/* resets */
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
box-sizing: border-box;
scroll-behavior: smooth; /* גלילה חלקה יותר אם שמים קישורים בתוך העמוד */
}
body {
margin: 0;
overflow-y: scroll;
overflow-x: hidden; /* זה ימנע את ה"פתיחה" לצדדים של התמונה */
-webkit-font-smoothing: antialiased; /* לראות יותר טוב ב-MAC */
-moz-osx-font-smoothing: grayscale; /* לראות יותר טוב בפיירפוקס */
}
*, *:before, *:after {
box-sizing: inherit;
}
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1;
margin: 0; /* 2 */
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
vertical-align: middle;
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
p, h1, h2, h3, h4 {
margin: 0;
}
ul, ol {
padding: 0;
margin: 0;
list-style: none;
}
/* global critical */
:root {
--theme-container-padding: 16px;
--theme-black: #000;
--theme-black-2: #070707;
--theme-orange: #f4831c;
/*--theme-blue: #0385C6;*/
--theme-blue: #007eb2;
--theme-blue-darker: #053542;
}
body {
/* font-family: 'Heebo', Arial, sans-serif; */
font-family: 'Varela Round', 'Heebo', Arial, sans-serif;
font-size: 16px;
line-height: normal;
}
.container {
max-width: 1180px;
padding: 0 var(--theme-container-padding);
/*margin: auto;*/
margin: 0 auto;
}
.container-fluid {
max-width: 1800px;
padding: 0 var(--theme-container-padding);
margin: auto;
}
.theme_title {
font-size: 2.5em; /* =40px */
font-weight: bold;
}
/* הגדרת H1 לאזור ההירו */
h1.theme_title_header {
font-weight: 400;
padding-bottom: 0.2em;
color: #2c3e50;
width: 100%;
margin: 0 auto;
display: block;
text-align: center;
font-size: inherit; /* יורש את הגודל מ-theme_title */
line-height: inherit;
}
.theme_subtitle {
font-size: 1.875em; /* =30px */
}
.page_footer--contact .contact_form input[type="submit"],
.theme_button_1 {
display: inline-block;
/* font-size: 1.875rem; */
font-size: 1.4rem;
font-weight: bold;
/* border-radius: 24px; */
border-radius: 18px;
background-color: var(--theme-blue);
color: #fff;
border: 0;
padding: 12px 20px;
text-decoration: none;
}
.site_head {
background-size: cover;
background-repeat: no-repeat;
min-height: 600px;
display: flex;
align-items: center;
justify-content: center;
padding: 35px 0;
}
.site_head .title {
font-size: 3.125em;
line-height: 1em;
color: #FFF;
text-align: center;
}
.site_head #breadcrumbs + .theme_title {
margin-top: 30px;
}
.page_the_content {
padding: 4rem 0;
}
.page_the_content p,
.page_the_content li {
margin-bottom: 1em;
}
.page_the_content ul,
.page_the_content ol {
list-style: auto;
}
.center {
text-align: center;
}
@media (min-width: 768px) {
.visible_mobile {
display: none !important;
}
}
@media (max-width: 767px) {
.hidden_mobile {
display: none !important;
}
.site_head #breadcrumbs + .theme_title {
text-align: center;
}
.theme_title {
/* font-size: 2.125em; */
font-size: 1.5em;
line-height: 1.2em;
}
.theme_subtitle {
font-size: 1.2em;
line-height: 1.2em;
}
.page_footer--contact .contact_form input[type="submit"],
.theme_button_1 {
font-size: 1.375rem;
}
.site_head {
display: block;
min-height: 250px;
}
.site_head .title {
font-size: 1.625em;
}
.page_the_content {
padding: 2rem 0;
}
}
/* Text meant only for screen readers. */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
/* =========================
Header (desktop + mobile)
========================= */
.page_header{
box-shadow: 0 1px 5px rgba(0,0,0,0.05);
background-color: rgba(255,255,255,.95);
position: sticky;
top: 0;
z-index: 9999;
}
/* ===== Desktop layout (>=1025) ===== */
@media (min-width: 1025px){
.page_header .container-fluid{
display:flex;
align-items:center;
justify-content: space-between;
padding: 6px var(--theme-container-padding) 0px; /* ה-0 זה המרחק מהתפריטים לתחילת המסך למטה, אם רוצים רווח מהלוגו - להגדיל קצת */
}
/* Logo right */
.page_header .logo{
order: 1;
flex: 0 0 209px;
display:flex;
justify-content:flex-end;
}
/* Menu center */
.page_header .primary_menu_wrap{
order: 2;
flex: 1 1 auto;
display:flex;
justify-content:center;
}
/* Fake column left for true centering */
.page_header .container-fluid::before{
content:"";
order: 3;
flex: 0 0 209px;
}
.page_header .primary_menu_toggle{ display:none; }
.page_header .primary_menu_wrap > ul{
display:flex;
flex-wrap:nowrap;
align-items:center;
gap: 30px;
}
.page_header .primary_menu_wrap a{
font-size: 1.125em;
font-weight: 700;
color: #473147;
text-decoration:none;
white-space: nowrap;
}
.page_header .primary_menu_wrap .highlight > a{
display:inline-block;
background: var(--theme-orange);
padding: 5px 10px;
border-radius: 15px;
color:#fff !important;
}
/* =========================
lowlight - אפור (דסקטופ)
========================= */
.page_header .primary_menu_wrap li.lowlight > a{
color: #8b8f96 !important;
font-weight: 600;
}
}
/* אם התפריט מוריד שורה להוסיף את זה */
/*
@media (min-width: 1367px) and (max-width: 1487px){
.page_header .primary_menu_wrap > ul {
gap: 14px !important;
}
.page_header .primary_menu_wrap a,
#primary_menu.primary_menu_wrap a {
font-size: 1.1em !important;
white-space: nowrap !important;
}
}
*/
/* Logo size */
.page_header .logo img{
max-height: 82px;
width:auto;
height:auto;
display:block;
}
/* ===== Mobile / Tablet (<=1024) ===== */
@media (max-width: 1024px){
.page_header .container-fluid{
position: relative;
display:flex;
align-items:center;
justify-content: space-between;
padding: 6px var(--theme-container-padding);
min-height: 64px;
}
/* Hide the standalone plane image placed after .logo in HTML */
.page_header .logo + img{ display:none !important; }
/* Center logo in header */
.page_header .logo{
position:absolute;
left:50%;
transform: translateX(-50%);
display:inline-flex;
align-items:center;
justify-content:center;
flex-direction: row-reverse; /* RTL: logo right, plane left */
gap: 8px;
z-index:2;
max-width:none;
}
.page_header .logo img{ max-height: 56px; }
/* Add plane as pseudo-element to keep perfect centering */
.page_header .logo::after{
content:"";
width:45px;
height:58px;
background: url("../images/transpaernt-paper-plane-small.png") no-repeat center;
background-size: contain;
display:block;
flex:0 0 auto;
}
/* =========================
Hamburger button
========================= */
#primary_menu_toggle{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:28px;
height:30px;
position:relative;
margin:0 !important;
line-height:0 !important;
z-index:10001; /* מעל הכל */
-webkit-tap-highlight-color: transparent;
}
#primary_menu_toggle span{
position:relative;
display:block;
width:100%;
height:3px;
background:#053542;
border-radius:2px;
transition: all .3s;
}
#primary_menu_toggle span:before,
#primary_menu_toggle span:after{
content:"";
position:absolute;
left:0;
width:100%;
height:3px;
background:#053542;
border-radius:2px;
transition: all .3s;
}
#primary_menu_toggle span:before{ top:-9px; }
#primary_menu_toggle span:after{ top:9px; }
/* X state */
#primary_menu_toggle.on span{ background:transparent; }
#primary_menu_toggle.on span:before{ transform: rotate(45deg) translate(5px,5px); }
#primary_menu_toggle.on span:after{ transform: rotate(-45deg) translate(7px,-8px); }
/* =========================
Overlay + Drawer
========================= */
/* Overlay */
#menu_backdrop.menu_backdrop{
position: fixed;
inset: 0;
background: rgba(0,0,0,.35);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .25s ease, visibility .25s ease;
z-index: 10000;
}
/* Drawer panel */
#primary_menu.primary_menu_wrap{
position: fixed !important;
top: 0 !important;
right: 0 !important; /* RTL: נפתח מימין */
height: 100vh !important;
width: min(78vw, 360px) !important; /* תופס חלק מהמסך */
max-width: 92vw !important;
padding: 84px 18px 18px !important; /* מקום “אווירי” למעלה */
background: #fff !important;
box-shadow: 0 12px 30px rgba(0,0,0,.18) !important;
overflow: auto !important;
text-align: right;
transform: translateX(105%) !important; /* סגור */
transition: transform .25s ease !important;
z-index: 10002 !important;
/* חשוב: לנטרל חוקי “הסתרה” ישנים */
opacity: 1 !important;
visibility: visible !important;
}
/* Open state (באמצעות sibling ~) */
/* מצב פתוח לפי class על html */
html.menu-open #menu_backdrop{
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
html.menu-open #primary_menu{
transform: translateX(0) !important;
}
/* Menu links */
#primary_menu.primary_menu_wrap a{
display:block;
padding:1em;
font-size:1.125em;
font-weight:700;
color:#473147;
text-decoration:none;
}
/* קו תחתון לכל פריט שהוא לא האחרון (ברירת מחדל) */
#primary_menu.primary_menu_wrap li:not(:last-child) > a{
border-bottom: 2px solid var(--theme-blue);
}
/* =========================
lowlight - אפור (מובייל)
========================= */
#primary_menu.primary_menu_wrap li.lowlight > a{
color: #8b8f96 !important;
font-weight: 600;
}
/* =========================
highlight - כמו בדסקטופ גם במובייל
========================= */
#primary_menu.primary_menu_wrap li.highlight > a{
display: block;
width: 100%;
box-sizing: border-box;
background: var(--theme-orange);
padding: 10px 12px;
border-radius: 14px;
color:#fff !important;
margin: 6px 0;
font-weight: 800;
}
/* =========================================================
FIX אמיתי: קו מתחת ל-highlight במובייל
למה זה עובד:
- הסידור לפי ID במובייל עלול להפוך את highlight ל-:last-child
ואז הכלל li:not(:last-child) לא נותן קו.
- במקום “להילחם” עם border על ה-a (שנחתך בגלל radius/רקע),
אנחנו מציירים קו כחלק מה-LI עצמו, תמיד, גם אם הוא האחרון.
========================================================= */
#primary_menu.primary_menu_wrap li.highlight{
position: relative;
}
#primary_menu.primary_menu_wrap li.highlight::after{
content:"";
display:block;
border-bottom: 2px solid var(--theme-blue);
margin-top: 8px; /* רווח קטן אחרי הכפתור הכתום */
}
}
/* Mobile submenu behavior */
@media (max-width: 1024px){
/* X סגירה בתוך המגירה (הקטנה קלה) */
#primary_menu .menu_close_btn{
position: absolute;
top: 14px;
left: 12px;
width: 36px;
height: 36px;
border: 0;
background: transparent;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 10003;
-webkit-tap-highlight-color: transparent;
}
#primary_menu .menu_close_btn span{
font-size: 28px;
line-height: 1;
color: #053542;
font-weight: 700;
}
#primary_menu .menu_close_btn:focus-visible{
outline: 3px solid rgba(0,126,178,.35);
outline-offset: 3px;
}
/* =========================================================
במובייל: תת-תפריט ייראה "תת" - בלי רקע ובלי מסגרת
רק אינדנט + לא מודגש
+ קו תחתון גם לפריט האחרון בתת-תפריט
========================================================= */
/* אינדנט עדין לתת-תפריט */
#primary_menu .submenu{
padding: 6px 0 10px;
margin-top: 6px;
margin-right: 10px; /* RTL: מזיז "שמאלה" */
background: transparent;
border: 0;
border-radius: 0;
}
/* לינקים בתת-תפריט: רגיל (לא bold) + פנימה */
#primary_menu .submenu a{
padding: 10px 28px 10px 12px;
font-weight: 400;
font-size: 1.0em;
color: #053542;
border-bottom: 1px solid rgba(0,126,178,0.12);
background: transparent;
}
/* קו גם לפריט האחרון בתת-תפריט */
#primary_menu .submenu li:last-child > a{
border-bottom: 1px solid rgba(0,126,178,0.12);
}
}
/* Click-submenu desktop width by content */
@media (min-width: 1025px){
.page_header .click-submenu > .submenu{
min-width:0 !important;
width:max-content !important;
max-width:320px !important;
display:inline-block !important;
right:0;
}
}
/* =========================================================
תוספת: ה-X לא יופיע בדסקטופ (הכפתור קיים ב-HTML תמיד)
========================================================= */
/* ברירת מחדל: לא להציג X */
#primary_menu .menu_close_btn{
display: none;
}
/* רק במובייל/טאבלט */
@media (max-width: 1024px){
#primary_menu .menu_close_btn{
display: inline-flex;
}
}
.hp_job_search .theme_title {
color: #fff;
margin-bottom: 30px;
/* text-shadow: 2px 2px 10px #000; */
}
.hp_job_search form .wrap {
background-color: #fff;
border-radius: 64px;
max-width: 100%;
display: flex;
align-items: stretch;
padding: 1em;
row-gap: 30px;
box-shadow : 0 0 12px rgba(0, 0, 0, 0.55);
}
.hp_job_search form label {
flex-grow: 1;
position: relative;
}
.hp_job_search form label .feedback {
display: inline-block;
position: absolute;
left: 0;
bottom: 5px;
font-size: 14px;
color: red;
}
.hp_job_search input[type="text"],
.hp_job_search select {
width: 100%;
height: 100%;
border: 0;
padding: 0.5em 1em;
font-size: 1.875em;
color: var(--theme-blue);
border-radius: 64px;
outline: 0;
}
.hp_job_search form .sep {
width: 2px;
background-color: var(--theme-blue);
}
.hp_job_search input[type="text"] {
font-weight: bold;
}
.hp_job_search input[type="text"]::placeholder {
color: var(--theme-blue);
}
.hp_job_search button {
margin: -1em 1em -1em -1em;
border-top-left-radius: 64px;
border-bottom-left-radius: 64px;
border: 0;
background-color: var(--theme-blue);
padding: 1em 2em 1em 2.5em;
cursor: pointer;
}
.hp_job_search button svg {
width: 42px;
height: 42px;
color: #fff;
}
.hp_job_search .cv_button_wrap {
text-align: left;
margin-top: 1.5em;
}
.hp_job_search .cv_button {
display: inline-block;
background-color: var(--theme-blue);
border: 3px solid #fff;
font-size: 1.375em;
color: #fff;
padding: 0.5em 1.5em;
text-decoration: none;
font-weight: bold;
border-radius: 64px;
box-shadow : 0 0 12px rgba(0, 0, 0, 0.55);
}
.jobs_head_search form {
margin-top: 35px;
}
@media (min-width: 1100px) {
.hp_job_search form .wrap {
width: 940px;
}
}
@media (max-width: 940px) {
.hp_job_search form .wrap {
flex-direction: column;
padding: 2em;
}
.hp_job_search form .sep {
display: none;
}
.hp_job_search input[type="text"],
.hp_job_search select {
border-bottom: 2px solid var(--theme-blue);
border-radius: 0;
}
.hp_job_search button {
margin: 2em -2em -2em -2em;
border-radius: 0;
border-bottom-left-radius: 64px;
border-bottom-right-radius: 64px;
}
}
@media (max-width: 767px) {
.hp_job_search .container {
/* margin-bottom: auto; */
margin-bottom: 0;
margin-top: 4em;
}
.hp_job_search input[type="text"],
.hp_job_search select,
.hp_job_search .cv_button {
font-size: 1.125em;
}
.hp_job_search button {
margin: 0.5em -2em -2em -2em;
}
.hp_job_search button svg {
width: 35px;
height: 35px;
}
}
/* =========================================================
HP HERO SECTION - CLEAN & UNIFIED
========================================================= */
.hp_job_search {
position: relative;
aspect-ratio: 1920 / 845; /* פרופורציה לדסקטופ */
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
display: flex;
align-items: flex-start;
padding-top: 60px;
/* background-image: url('../images/homepage-header.jpg'); */
background-image: url('../images/homepage-header.webp');
}
.hp_job_search .container {
margin-bottom: 6em;
}
/* === בלוק אייפד מאוחד ומתוקן - מונע בריחה ימינה === */
@media (min-width: 768px) and (max-width: 1024px) {
.hp_job_search {
display: flex !important;
flex-direction: column !important;
height: 92svh !important;
min-height: 700px !important;
/* נעילת רוחב - הפתרון לפס הלבן */
width: 100% !important;
max-width: 100vw !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
/* background-image: url('../images/homepage-header-ipad.jpg') !important; */
/* background-image: url('../images/homepage_ipad_001.jpg') !important; */
background-image: url('../images/homepage_ipad_001.webp') !important;
background-position: center top !important;
background-size: cover !important;
}
.hp_job_search .container {
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
padding: 60px 30px 40px !important;
box-sizing: border-box !important;
margin: 0 !important;
}
.hp_job_search .theme_title.hp_form_title.hp-hero-text {
position: relative !important;
align-self: flex-start !important;
max-width: 500px !important;
text-align: right !important;
top: 0 !important;
right: 0 !important;
margin: 0 !important;
}
/* תיקון הבאנרים - מניעת חריגה מהמסך */
.hp-banners-row {
position: relative !important;
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* 3 עמודות גמישות */
gap: 12px !important;
width: 100% !important;
max-width: 820px !important;
margin: 0 auto !important; /* מרכוז */
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
padding: 0 !important;
}
}
/* --- הגדרה ספציפית למובייל (עד 767px) --- */
@media (max-width: 767px) {
.hp_job_search {
/* ביטול יחס הגובה - עכשיו המספר למטה ישפיע מיד! */
aspect-ratio: auto !important;
/* גובה יציב למובייל - שנה את 510px לכל מספר שתרצה */
/* height: 410px !important; */
/* min-height: 410px !important; */
background-image: url('../images/homepage-header-ipad3.jpg') !important;
background-position: center top !important;
background-size: cover !important;
background-attachment: scroll !important;
background-color: #007eb2;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
align-items: center !important;
padding: 20px 15px 30px !important;
box-sizing: border-box !important;
}
.hp_job_search .theme_title.hp_form_title.hp-hero-text {
/* font-size: 19px !important; */
line-height: 1.3 !important;
margin: 0 !important;
text-align: center !important;
width: 100% !important;
position: relative !important;
top: 0 !important;
right: 0 !important;
}
}
/* =========================================================
HERO TEXT ALIGNMENT - DESKTOP & IPAD
========================================================= */
/*
.hp_job_search .theme_title.hp_form_title.hp-hero-text {
position: absolute !important;
right: var(--theme-container-padding) !important;
top: 60px !important;
left: auto !important;
float: none !important;
margin: 0 !important;
max-width: 600px !important;
text-align: right !important;
font-size: 1.8em;
line-height: 1.15;
color: #dbeaff;
*/
/* font-family: 'Rubik', Heebo, Arial, sans-serif !important; */
/* font-family: 'Varela Round', 'Heebo', Arial, sans-serif !important; */
*/
font-weight: 300 !important;
letter-spacing: -1px;
text-shadow: 1px 1px 1px #555;
}
*/
/* יישור מושלם למסכים רחבים (זהה ל-Desc_section) */
@media (min-width: 1200px) {
.hp_job_search .theme_title.hp_form_title.hp-hero-text {
right: calc(50% - 590px + var(--theme-container-padding)) !important;
}
}
/* תיקון טקסט לאייפד */
@media (min-width: 768px) and (max-width: 1024px) {
.hp_job_search .theme_title.hp_form_title.hp-hero-text {
max-width: 500px !important;
font-size: 1.8em;
right: var(--theme-container-padding) !important; /* נוסף ; תקין */
/* top: 120px !important; */
top: 15vh !important;
right: 10vh !important;
}
}
/* מובייל */
/* תיקון מובייל: שהטקסט לא יתכסה על ידי הבאנרים */
/* מובייל - בלוק מאוחד למניעת התחרבשות ושליטה בגובה */
@media (max-width: 767px) {
/* 1. הגדרות האזור כולו */
.hp_job_search {
/* ביטול יחס הגובה של הדסקטופ */
aspect-ratio: auto !important;
/* גובה מלא של המסך כדי שהבאנרים יהיו בתחתית המסך */
height: 100svh !important;
min-height: 570px !important;
display: flex !important; /* flex עדיף על block כדי למנוע בלאגן */
flex-direction: column !important;
justify-content: space-between !important;
align-items: center !important;
/* background-image: url('../images/homepage-header-ipad3.jpg') !important; */
/* background-image: url('../images/homepage-cell4.jpg') !important; */
background-image: url('../images/homepage-cell4.webp') !important;
background-position: center top !important;
background-size: cover !important;
background-attachment: scroll !important;
/* padding: 20px 15px 30px !important; */
/*
padding-top: 40px !important;
padding-right: 15px !important;
padding-bottom: 30px !important;
padding-left: 15px !important;
*/
/* padding-top: 4.9svh !important; */ /* מבוסס על 40px בגובה 812px */
padding-top: 8.5svh !important;
padding-right: 4vw !important; /* מבוסס על 15px ברוחב 375px */
padding-bottom: 3.7svh !important;/* מבוסס על 30px בגובה 812px */
padding-left: 4vw !important; /* מבוסס על 15px ברוחב 375px */
box-sizing: border-box !important;
}
/* 2. תיקון הטקסט (מה שמונע את ההתחרבשות) */
.hp_job_search .theme_title.hp_form_title.hp-hero-text {
/* ביטול הציפה של הדסקטופ */
position: relative !important;
right: auto !important;
top: auto !important;
left: auto !important;
/* יישור וריווח */
/* margin: 0 auto 15px !important; */ /* הצמדה לאמצע */
margin: 0 0 15px auto !important; /* הצמדה לימין */
/* max-width: 100% !important; */
/* width: 85% !important; */
/* max-width: 200px !important; */
/* text-align: center !important; */
/* font-size: 17px !important; */
line-height: 1.3 !important;
display: block !important;
}
/* first text paragraph - צר יותר כדי לא להתנגש ברקע */
.hp_job_search .theme_title_first_pr{
width: 85% !important; /* קצר יותר מהשאר */
margin-left: auto !important; /* הצמדה לימין */
margin-right: 0 !important;
display: block;
text-align: right;
}
/* שאר הפסקאות - רוחב מלא יחסית */
.hp_job_search .theme_title_2nd_pr {
width: 85% !important;
display: block;
}
.hp_job_search .theme_title_3rd_pr{
width: 100% !important;
display: block;
}
/* להפוך את שני ה-BR אחרי span1 ל-BR אחד */
.hp_job_search .theme_title_first_pr + br + br{
display: none !important;
}
}
/* ==============================================
Banners at bottom for medium-mobile (451-767px only)
Not applied to iPhones (≤450px) which use the dedicated block below
============================================== */
@media (min-width: 451px) and (max-width: 767px) {
.hp_job_search .container {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
box-sizing: border-box !important;
}
}
/* ==============================================
DESKTOP: ZERO-OVERLAP & GUARANTEED 1px GAP
============================================== */
@media (min-width: 1025px) {
.hp-banners-row {
position: absolute !important;
bottom: 50px !important; /* המרחק של הבאנרים מהתחתית */
/* מרכוז אבסולוטי קשיח */
left: 50% !important;
transform: translateX(-50%) !important;
/* שימוש ב-inline-flex כדי למנוע מתיחה או כיווץ כפוי */
display: inline-flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
vertical-align: middle !important;
direction: rtl !important;
/* ביטול כל הגבלת רוחב שעשויה לגרום לחפיפה */
width: auto !important;
min-width: max-content !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
z-index: 999;
}
.hp-banners-row li {
/* Flex-shrink: 0 הוא פקודה שאוסרת על הדפדפן להקטין את הבאנר */
flex: 0 0 auto !important;
display: block !important;
/* יצירת המרווח של ה-1 פיקסל באמצעות Margin חיצוני */
margin: 0 0.5px !important;
padding: 0 !important;
}
.hp-banners-row a {
/* שימוש ב-inline-flex בתוך הקישור כדי לשמור על גודל התוכן */
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
/* content-box מבטיח שהפדינג הוא תוספת חיצונית ולא מקטין את הלוגו */
box-sizing: content-box !important;
width: auto !important;
height: auto !important;
/* המרווחים שלך (אנכי 12px, אופקי 5px) */
padding: 12px 5px !important;
/* שקיפות 0.10 ורדיוס 14px */
background: rgba(255, 255, 255, 0.10) !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
border-radius: 14px !important;
text-decoration: none !important;
transition: transform .15s ease, background .15s ease !important;
}
.hp-banners-row a:hover {
transform: translateY(-2px) !important;
background: rgba(255, 255, 255, 0.14) !important;
}
.hp-banners-row img,
.hp-banners-row video {
/* גודל הלוגו: 180x45, מתכווץ רק כשהמסך ממש קטן */
width: min(180px, 14vw) !important;
height: auto !important;
max-height: 45px !important;
display: block !important;
object-fit: contain !important;
border: 0 !important;
}
}
/* כל באנר */
.hp-banners-row li{
display: flex;
}
/* קישור של באנר */
.hp-banners-row a{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 10px 8px;
border-radius: 12px;
background: rgba(255,255,255,0.10);
box-shadow: 0 6px 18px rgba(0,0,0,0.25);
text-decoration: none;
transition: transform .15s ease,
background-color .15s ease;
}
/* Hover */
.hp-banners-row a:hover{
transform: translateY(-2px);
background: rgba(255,255,255,0.14);
}
/* פוקוס לנגישות */
.hp-banners-row a:focus-visible{
outline: 3px solid rgba(255,255,255,0.55);
outline-offset: 3px;
}
/* מדיה: תמונה / וידאו (דסקטופ) */
.hp-banners-row img,
.hp-banners-row video{
width: 213px;
height: 53px;
max-width: 100%;
object-fit: contain;
display: block;
border: 0;
}
/* ===============================
Responsive
=============================== */
/* ==============================================
iPad / Tablet (Portrait)
- 3 באנרים בשורה (2 שורות ל-6)
- הצמדה לתחתית ההירו
============================================== */
@media (min-width: 768px) and (max-width: 1024px){
.hp-banners-row{
position: absolute;
bottom: 160px; /* מרחק מהתחתית בטאבלט רגיל */
right: 30px;
left: 30px;
transform: none;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
width: auto; /* נשלט ע"י left/right */
max-width: none; /* שלא יחנוק */
}
.hp-banners-row img,
.hp-banners-row video{
width: 100%;
height: auto;
max-width: 213px;
object-fit: contain;
justify-self: center;
}
/* מפנה מקום לבאנרים מתחת לטופס */
.hp_job_search .container{
padding-bottom: 240px; /* תכוון לפי הצורך */
}
}
/* ==============================================
iPad 11 / טאבלט רחב יותר
שליטה נפרדת במרחק מהתחתית
============================================== */
@media (min-width: 830px) and (max-width: 1024px){
.hp-banners-row{
bottom: 60px;
}
}
/* באנרים במובייל - 6 באנרים = 2 שורות (3 בכל שורה) */
@media (max-width: 767px) {
.hp-banners-row{
position: static !important;
width: 100% !important;
max-width: 100% !important;
margin: 10px 0 0 !important;
padding: 0 8px 14px !important;
padding-bottom: 20px !important;
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* <-- זה מה שקובע 2 שורות */
gap: 6px !important;
box-sizing: border-box !important;
}
.hp-banners-row a{
padding: 4px 6px !important;
min-height: 44px !important;
border-radius: 10px !important;
}
.hp-banners-row img,
.hp-banners-row video{
width: 100% !important;
max-height: 44px !important;
object-fit: contain !important;
display: block !important;
}
}
/* ==============================================
מסכים קטנים מאוד
- 2 בשורה כדי שלא יהיה צפוף
============================================== */
@media (max-width: 420px){
.hp-banners-row{
/* grid-template-columns: repeat(2, 1fr) !important; */
}
}
/* ===== Desc Section ===== */
/* כותרת - ממורכזת */
.Desc_section .desc_title{
text-align: center;
font-size: 2.2em;
font-weight: 700;
color: var(--theme-blue);
margin-bottom: 30px;
}
/* טקסט - מיושר לימין */
.Desc_section .desc_text{
text-align: right;
max-width: 820px;
margin-right: 0;
margin-left: auto; /* מצמיד לימין בתוך ה-container */
/* font-size: 1.1em; */
font-size: 18px;
margin-top:4px;
/* line-height: 1.7; */
line-height: 1.3;
letter-spacing: -0.2px;
/* color: #333; */
color: #074168;
}
/* רווח בין פסקאות */
.Desc_section .desc_text + .desc_text{
margin-top: 16px;
}
/* =========================
Desc: 2 columns (text right, logos left)
========================= */
/* העטיפה של שתי העמודות */
.Desc_section .desc_wrap{
display: flex;
gap: 28px;
align-items: flex-start;
/* חובה: להשאיר רגיל */
flex-direction: row;
/* כדי ש-FLEX יתנהג RTL (ימין->שמאל) */
direction: rtl;
}
/* התוכן הראשי נשאר RTL */
.Desc_section .desc_main{
flex: 1 1 auto;
min-width: 0;
direction: rtl;
}
/* עמודת הלוגואים */
.Desc_section .desc_logos{
flex: 0 0 280px; /* רוחב עמודה */
direction: rtl; /* טקסט כותרת בעברית */
text-align: right;
position: sticky; /* אופציונלי: יישאר “נעוץ” בגלילה */
top: 110px; /* תכוון לפי הגובה של ההדר sticky */
}
/* כותרת הלוגואים */
.Desc_section .logos_title{
margin: 0 0 14px 0;
font-size: 1.25em;
font-weight: 800;
color: var(--theme-blue);
text-align: center;
line-height: 0.9; /* ריווח כללי בין שורות הכותרת */
margin-bottom: 10px;
}
.Desc_section .logos_accent{
color: #ea832d;
display: block;
}
/* גריד של לוגואים */
.Desc_section .logos_grid{
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
/* דסקטופ בלבד: עמודה אחת של לוגואים (אחד מתחת לשני) */
@media (min-width: 1025px){
/* =========================================================
שינינו כאן את ה-min-width מ-1025px ל-768px
כדי שהתצוגה של עמודה אחת תחול גם על אייפדים וטאבלטים בנוסף לדסקטופים
========================================================= */
/* @media (min-width: 768px){ */
.Desc_section .logos_grid{
grid-template-columns: 1fr; /* במקום 2 עמודות */
}
/* אופציונלי: שיהיה פחות “דחוס” */
.Desc_section .logos_grid{
gap: 12px;
}
.Desc_section .logos_grid img{ height: 44px; }
}
/* === FIX FOR LEFT ALIGNMENT (לוגואים צמודים לשמאל, טקסט נשאר במקום) === */
@media (min-width: 1200px) {
/* 1. מבטל את הגבלת הרוחב של הקונטיינר כדי שהלוגואים יוכלו לגעת בצד */
.Desc_section .container {
max-width: 100%;
padding-left: 0;
padding-right: 0;
}
/* 2. מפזר את האלמנטים לקצוות */
.Desc_section .desc_wrap {
justify-content: space-between;
}
/* 3. הלוגואים נדבקים לשמאל עם רווח קבוע */
.Desc_section .desc_logos {
margin-left: 30px; /* <--- שנה כאן את הרוחב מהצד השמאלי של המסך */
}
/* 4. מחזיר את הטקסט למקומו המקורי (כאילו הקונטיינר הוא 1180) */
.Desc_section .desc_main {
/* חישוב: 50% מהמסך פחות חצי מהקונטיינר המקורי (590px) */
padding-right: calc(50% - 590px + var(--theme-container-padding));
/* מרווח ביטחון מהלוגואים בצד שמאל */
padding-left: 50px;
}
}
/* === END FIX === */
/* כרטיס לוגו */
.Desc_section .logos_grid a{
display: flex;
align-items: center;
justify-content: center;
/* שליטה על גודל המסגרת */
height: 54px; /* גובה המסגרת */
width: 100%; /* רוחב מלא של עמודת הלוגואים */
max-width: 100px; /* תקרת רוחב - תכוון */
margin: 0 auto; /* מרכז בעמודה */
padding: 6px 10px; /* רווח פנימי עדין */
border-radius: 12px;
background: #fff;
box-shadow: 0 4px 14px rgba(0,0,0,0.06);
transition: transform .15s ease, box-shadow .15s ease;
}
.Desc_section .logos_grid a:hover{
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0,0,0,0.10);
}
/* תמונת לוגו - בלי inline padding */
.Desc_section .logos_grid img{
max-width: 100%;
height: 40px; /* גובה אחיד */
width: auto;
object-fit: contain;
display: block;
}
/* רספונסיביות */
/*
@media (max-width: 1024px){
.Desc_section .desc_logos{
flex-basis: 240px;
}
.Desc_section .logos_grid img{
height: 36px;
}
}
*/
@media (max-width: 1024px){
.Desc_section .desc_wrap{
display: block; /* טור אחד */
direction: rtl;
}
.Desc_section .desc_logos{
position: static; /* לא sticky במובייל */
top: auto;
margin-top: 26px;
}
.Desc_section .logos_grid{
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.Desc_section .logos_grid img{
height: 32px;
}
}
@media (max-width: 767px){
.Desc_section .desc_wrap{
display: block; /* טור אחד */
direction: rtl;
}
.Desc_section .desc_logos{
position: static; /* לא sticky במובייל */
top: auto;
margin-top: 26px;
}
.Desc_section .logos_grid{
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.Desc_section .logos_grid img{
height: 32px;
}
}
/* לפטופים - מניעת שבירת תפריט */
@media (min-width: 1025px) and (max-width: 1366px){
.page_header .primary_menu_wrap ul{
gap: 18px; /* היה 30px */
}
.page_header .primary_menu_wrap a{
font-size: 1.125em; /* היה 1.125em */
}
.page_header .container-fluid::before{
flex: 0 0 40px;
}
}
/* פריט עם תת תפריט */
.page_header .has-submenu{
position: relative;
}
/* תת תפריט */
.page_header .submenu{
display: block;
position: absolute;
top: 100%;
right: 0; /* RTL */
/* min-width: 200px; */
background: #fff;
box-shadow: 0 10px 25px rgba(0,0,0,0.12);
border-radius: 10px;
padding: 8px 0;
margin: 0;
list-style: none;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all .2s ease;
z-index: 9999;
}
/* Mobile override must come AFTER the global rule so it wins the cascade */
@media (max-width: 1024px){
.page_header .submenu{
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
display: none;
}
.page_header .has-submenu.open > .submenu{
display: block;
}
}
@media (min-width: 1025px){
/* .page_header .has-submenu:hover > .submenu{ */
.page_header .has-submenu:not(.click-submenu):hover > .submenu{
opacity: 1;
visibility: visible;
transform: translateY(0);
}
}
/* =========================================================
Desktop: menuleftside צמוד לשמאל המסך (כירורגי)
========================================================= */
/* חשוב:
- הצמדה לשמאל רק כשיש מספיק מקום (נבדק אצלך: מ-1285px זה נראה נורמלי)
- מתחת לזה (כולל iPad landscape וחלון דסקטופ צר) חוזרים להתנהגות רגילה
- בלי !important, בלי order מיותר (כי הפריט יוצא מה-flow כשהוא absolute)
- המסגרת קיימת *רק* כשהפריט בצד שמאל
*/
@media (min-width: 1285px){
/* ההדר יהיה "anchor" למיקום האבסולוטי */
.page_header .container-fluid{
position: relative;
}
/* מפנים מקום בצד שמאל כדי שהתפריט המרכזי לא יכנס עליו */
.page_header .primary_menu_wrap{
padding-left: 220px; /* תכוון לפי האורך של הטקסט + מרווח */
}
/* מצמיד את הפריט לשמאל ההדר */
.page_header .primary_menu_wrap > ul > li.menuleftside{
position: absolute;
left: var(--theme-container-padding);
top: 50%;
transform: translateY(-50%);
margin: 0;
white-space: nowrap;
z-index: 2;
/* ===== המסגרת קיימת רק כאן ===== */
border: 1px solid rgba(0,126,178,0.35);
border-radius: 13px;
padding: 1px;
}
/* הלינק עצמו */
.page_header .primary_menu_wrap > ul > li.menuleftside > a{
display: inline-block;
padding: 2px 6px;
font-weight: 700;
color: #007eb2;
border-radius: 8px;
transition: background-color .15s ease,
color .15s ease,
box-shadow .15s ease;
}
/* Hover / Focus */
.page_header .primary_menu_wrap > ul > li.menuleftside > a:hover,
.page_header .primary_menu_wrap > ul > li.menuleftside > a:focus-visible{
background: rgba(0,126,178,0.08);
color: #053542;
text-decoration: none;
}
}
/* =========================================================
Desktop צר / iPad landscape:
הפריט חוזר לזרימה רגילה + בלי מסגרת
========================================================= */
@media (min-width: 1025px) and (max-width: 1284px){
.page_header .primary_menu_wrap{
padding-left: 0;
}
.page_header .primary_menu_wrap > ul > li.menuleftside{
position: static;
left: auto;
top: auto;
transform: none;
margin: 0;
z-index: auto;
/* ===== ביטול מוחלט של המסגרת ===== */
border: 0;
padding: 0;
border-radius: 0;
}
.page_header .primary_menu_wrap > ul > li.menuleftside > a{
padding: 0;
border-radius: 0;
color: inherit;
background: transparent;
}
}
/* =========================================================
Desktop צר בלבד (1025px-1235px)
מטרות:
- להקטין פונטים בתפריט בצורה מדורגת
- להקטין לוגו בצורה מדורגת
- שהאוירון יקטן יחד עם הלוגו (רק בטווח הזה)
- לא לגעת במובייל
- לא לגעת מעל 1235px
========================================================= */
/* ===== בסיס לטווח 1025-1235 ===== */
@media (min-width: 1025px) and (max-width: 1235px){
/* מסתיר את תמונת האוירון הנפרדת בדסקטופ (רק כאן) */
.page_header .logo + img{
display: none !important;
}
/* מחברים לוגו + אוירון כיחידה אחת */
.page_header .logo{
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 6px; /* מרחק קטן וקבוע */
direction: ltr; /* כדי שהאוירון יהיה מימין ללוגו */
}
/* אוירון מימין ללוגו (רק בטווח הזה) */
.page_header .logo::after{
content:"";
width: 38px;
height: 48px;
background: url("../images/transpaernt-paper-plane-small.png") no-repeat center;
background-size: contain;
display: block;
flex: 0 0 auto;
}
}
/* ===== שלב 1: 1235 ומטה ===== */
@media (min-width: 1025px) and (max-width: 1235px){
.page_header .primary_menu_wrap a{
font-size: 1.05em;
}
.page_header .logo img{
max-height: 70px;
}
.page_header .logo::after{
width: 38px;
height: 48px;
}
}
/* ===== שלב 2: 1170 ומטה ===== */
@media (min-width: 1025px) and (max-width: 1170px){
.page_header .primary_menu_wrap a{
font-size: 1.02em;
}
.page_header .logo img{
max-height: 60px;
}
.page_header .logo::after{
width: 34px;
height: 44px;
}
}
/* ===== שלב 3: 1106 ומטה ===== */
@media (min-width: 1025px) and (max-width: 1106px){
.page_header .primary_menu_wrap a{
font-size: 0.96em;
}
.page_header .logo img{
max-height: 50px;
}
.page_header .logo::after{
width: 30px;
height: 40px;
}
}
/* =========================================================
Desktop צר בלבד (1025px-1235px):
לבטל "רוחב מוקצה" ללוגו כדי שיתכווץ לתוכן
========================================================= */
@media (min-width: 1025px) and (max-width: 1235px){
/* הלוגו כפריט flex: לא לשמור רוחב קבוע */
.page_header .logo{
flex: 0 0 auto; /* במקום ערך קשיח */
width: auto;
max-width: none;
}
}
/* פריטי תת-תפריט */
.page_header .submenu li{
/* border-bottom: 1px solid rgba(0,0,0,0.08); */ /* קו דק ועדין */
width: 100%;
border-bottom: 1px solid rgba(0,126,178,0.15);
}
/* בלי קו בפריט האחרון */
.page_header .submenu li:last-child{
border-bottom: none;
}
.page_header .submenu a{
display: block;
width: 100%;
box-sizing: border-box;
padding: 8px 12px; /* רווח בסאב בין התפריטים */
text-align: right;
border-bottom: 1px solid rgba(0,126,178,0.15);
color: var(--theme-black);
font-size: 0.95em;
text-decoration: none;
white-space: nowrap;
}
.page_header .submenu a:hover{
background: rgba(0,126,178,0.08);
}
.page_header .has-submenu > a::after{
content: "▾";
font-size: 0.7em;
margin-right: 0px; /* המרווח בין הטקסט לחץ */
margin-left: 0;
position: relative;
top: -1px; /* יישור עדין לגובה הטקסט */
}
/* ברירת מחדל - סגור */
.page_header .click-submenu > .submenu{
display: none;
min-width: 180px; /* מינימום הגיוני */
max-width: 260px; /* מונע התרחבות */
width: max-content; /* מתאים את עצמו לטקסט */
}
/* פתוח */
.page_header .click-submenu.open > .submenu{
display: block;
opacity: 1;
visibility: visible;
transform: translateY(0);
}
@media (min-width: 1025px){
/* תת-תפריט בלחיצה - רוחב לפי תוכן */
.page_header .click-submenu > .submenu{
min-width: 0 !important; /* מנטרל את 200px מהכללי */
width: max-content !important; /* לפי תוכן */
max-width: 320px !important; /* תקרה, כדי שלא יהיה ענק */
display: inline-block !important; /* חשוב: שלא יתנהג כבלוק מלא */
right: 0; /* RTL: צמוד לימין */
}
}
/* =========================================================
Recruiter Box (widget1 replacement) - FULL CSS
מטרות:
- אותו vibe של רקע + אייקון (כותרת עם אייקון מימין)
- מסגרת רחבה יותר, נמוכה יותר (לפחות ~30% פחות גובה)
- כפתור חדש קטן ונקי, בלי underline, יושב בסוף הטקסט (inline)
- שליטה נוחה על גובה/רוחב/ריווחים
========================================================= */
/* === משתנים לשליטה מהירה === */
:root{
--recruiter-max-width: 980px; /* רוחב המסגרת */
--recruiter-padding-y: 14px; /* padding למעלה/למטה */
--recruiter-padding-x: 18px; /* padding ימין/שמאל */
--recruiter-radius: 18px;
--recruiter-bg: rgba(0,126,178,0.08); /* רקע עדין */
--recruiter-border: rgba(0,126,178,0.18);
--recruiter-shadow: 0 6px 18px rgba(0,0,0,0.06);
--recruiter-title-size: 1.35em;
--recruiter-text-size: 1.05em;
--recruiter-line-height: 1.55;
--recruiter-icon-url: url("../images/leftbox_icon.png"); /* עדכן נתיב אם צריך */
--recruiter-icon-size: 34px; /* גודל האייקון */
--recruiter-icon-padding: 54px; /* מקום לטקסט בגלל האייקון */
--recruiter-btn-font: 0.98em;
--recruiter-btn-pad-y: 6px;
--recruiter-btn-pad-x: 12px;
--recruiter-btn-radius: 14px;
--recruiter-btn-border: rgba(0,126,178,0.35);
--recruiter-btn-bg: #fff;
--recruiter-btn-color: var(--theme-blue);
}
/* === הקונטיינר של המסגרת === */
.recruiter_box{
max-width: var(--recruiter-max-width);
margin: 28px auto 0;
padding: var(--recruiter-padding-y) var(--recruiter-padding-x);
border-radius: var(--recruiter-radius);
background: var(--recruiter-bg);
border: 1px solid var(--recruiter-border);
box-shadow: var(--recruiter-shadow);
direction: rtl;
text-align: right;
}
/* ביטול underline לכל קישור בתוך המסגרת */
.recruiter_box a{
text-decoration: none !important;
}
/* === כותרת + אייקון === */
.recruiter_box h3{
margin: 0 0 8px 0;
font-size: var(--recruiter-title-size);
font-weight: 800;
color: var(--theme-blue);
line-height: 1.2;
/* אייקון בצד ימין של הכותרת */
background-image: var(--recruiter-icon-url);
background-repeat: no-repeat;
background-position: right 6px center;
background-size: var(--recruiter-icon-size) auto;
padding-right: var(--recruiter-icon-padding);
min-height: var(--recruiter-icon-size);
}
/* === טקסט === */
.recruiter_box p{
margin: 0;
font-size: var(--recruiter-text-size);
line-height: var(--recruiter-line-height);
color: #123;
}
/* === עטיפה קטנה כדי להחזיק כפתור בסוף המשפט === */
.recruiter_box .cta_inline{
display: inline-flex;
align-items: center;
gap: 10px;
margin-right: 8px;
white-space: nowrap;
vertical-align: baseline;
}
/* === כפתור קטן ונקי === */
.recruiter_box .cta_btn{
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--recruiter-btn-font);
font-weight: 700;
padding: var(--recruiter-btn-pad-y) var(--recruiter-btn-pad-x);
border-radius: var(--recruiter-btn-radius);
background: var(--recruiter-btn-bg);
color: var(--recruiter-btn-color) !important;
border: 1px solid var(--recruiter-btn-border);
text-decoration: none !important;
line-height: 1.2;
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.recruiter_box .cta_btn:hover{
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(0,0,0,0.12);
background: rgba(0,126,178,0.06);
}
.recruiter_box .cta_btn:focus-visible{
outline: 3px solid rgba(0,126,178,0.35);
outline-offset: 3px;
}
/* === מובייל: עוד קומפקט + התאמת גדלים === */
@media (max-width: 767px){
:root{
--recruiter-max-width: 100%;
--recruiter-padding-y: 12px;
--recruiter-padding-x: 14px;
--recruiter-title-size: 1.25em;
--recruiter-text-size: 1.0em;
--recruiter-icon-size: 32px;
--recruiter-icon-padding: 52px;
--recruiter-btn-font: 0.95em;
--recruiter-btn-pad-y: 6px;
--recruiter-btn-pad-x: 10px;
}
}
/* =========================
SVG Logo (size + animation)
========================= */
/* 1) עטיפת הלוגו - זה מחליף את width/height של ה-img הישן */
.logo-wrap{
width: 209px; /* שנה כאן את הגודל */
max-width: 100%;
display: inline-block;
line-height: 0; /* מבטל רווח "inline" מתחת ל-SVG */
vertical-align: middle;
}
/* 2) ה-SVG עצמו - שיישב כמו תמונה רספונסיבית */
.logo-wrap > svg{
width: 100%;
height: auto;
display: block;
}
/* 3) Fade-in רק לכחול (קבוצות עם class="fill-blue") */
.fill-blue{
opacity: 0;
animation: blueFade 1s ease forwards;
animation-delay: .6s;
}
@keyframes blueFade{
to{ opacity: 1; }
}
/* 4) אם הלוגו נמצא בתוך לינק .logo ורוצים יישור יפה עם אלמנטים ליד */
a.logo{
display: inline-flex;
align-items: center;
}
/* 5) מובייל - אופציונלי: להקטין מעט */
@media (max-width: 767px){
.logo-wrap{
width: 180px; /* שנה אם צריך */
}
}
/* אם גובה המסך הוא פחות מ-650 פיקסלים - השם בשורה עם הכותרת */
@media (max-height: 650px) {
.break1-up-650 {display: none;}
.minus1-up-650 {display :inline;}
.alloy-rim {margin-top: 0px;}
}
@media (min-height: 651px) {
.break1-up-650 {display: block;} /* או display: inline */
.minus1-up-650 {display: none;}
.alloy-rim {margin-top: 1em;}
}
/* המעטפת החיצונית - מסגרת מתכת */
/* https://uiverse.io/mahiatlinux/cowardly-crab-22 */
.alloy-rim {
display: inline-block !important;
background: linear-gradient(145deg, #e6e6e6, #8e8e8e) !important;
padding: 2px !important;
border-radius: 50px !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
direction: ltr !important; /* מבטיח שהחץ תמיד משמאל ללא קשר ל-RTL של האתר */
}
/* גוף הכפתור */
.tungsten-shifter {
all: unset !important;
cursor: pointer !important;
display: block !important;
padding: 3px !important;
border-radius: 50px !important;
background: linear-gradient(to bottom, #cfd3d6 0%, #9ea3a8 50%, #70777d 100%) !important;
transition: all 0.2s ease !important;
}
/* אפקטים בריחוף על הכפתור */
.tungsten-shifter:hover {
filter: brightness(1.05) !important;
}
/* הזזת החץ 6 פיקסלים שמאלה בזמן ריחוף */
.tungsten-shifter:hover .chrome-surface::before {
/* scaleX(-1) שומר על הכיוון, translateX(6px) מזיז שמאלה בגלל ההיפוך */
transform: scaleX(-1) translateX(6px) !important;
}
.tungsten-shifter:active {
transform: scale(0.98) !important;
}
/* השטח הפנימי - מתכת מלוטשת בהירה */
.chrome-surface {
background: linear-gradient(135deg, #ffffff 0%, #dcdcdc 50%, #bcbcbc 100%) !important;
border-radius: 50px !important;
padding: 4px 25px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 1),
inset 0 -1px 2px rgba(0, 0, 0, 0.2) !important;
}
/* הטקסט */
.mercury-text {
font-weight: 800 !important;
font-size: 0.8em !important;
color: #2c3e50 !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) !important;
display: flex !important;
align-items: center !important;
margin-left: 15px !important;
}
/* החץ הכתום משמאל */
.chrome-surface::before {
content: "➤" !important;
font-size: 1.1em !important;
color: #ff8c00 !important;
line-height: 1 !important;
display: inline-block !important;
/* מצב התחלתי */
transform: scaleX(-1) !important;
filter: drop-shadow(0 1px 0 rgba(255,255,255,0.5)) !important;
/* אנימציה חלקה לתנועה */
transition: transform 0.2s ease-in-out !important;
}
/* =========================
Desc_section - background image
========================= */
.Desc_section{
position: relative;
padding: 80px 0;
background-color: #ffffff;
/* background-image: url("../images/paperplane-bg-3.jpg"); */
background-image: url("../images/paperplane-bg-3.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
}
/* שכבת הבהרה מעל התמונה */
.Desc_section::before{
content: "";
position: absolute;
inset: 0;
/* background: rgba(255,255,255,0.85); */ /* שלוט בעוצמה */
background: rgba(255,255,255,0.50); /* שלוט בעוצמה */
z-index: 0;
}
/* התוכן מעל הרקע */
.Desc_section > .container{
position: relative;
z-index: 1;
}
.Desc_section_title {
/* font-size: 1.8em; */ /* =40px */
font-size: 1.6em;
font-weight: bold;
/* color: #123; */
color: var(--theme-blue);
margin-top: 6px; /* המרווח בין הכותרת לטקסט */
margin-bottom: 6px; /* המרווח בין הכותרת לטקסט */
/* letter-spacing: -0.05em; */
}
/* שבירת שורה יזומה במובייל - רק בתוך כותרות התיאור */
.Desc_section_title .mobile-block {
display: inline-block;
white-space: nowrap;
color: #ea832d;
}
.desc_text2 {margin-top: 4px;}
.p_br1 {margin-top: 1em;}
.p_br1 a {text-decoration: underline;
/* color: #0056b3; */
color: inherit;
}
.p_br1 a:hover {
/* text-decoration: underline; */
font-weight: 600;
}
@media (max-width: 767px) {
.Desc_section_title {
/* font-size: 2.125em; */
font-size: 1.5em;
line-height: 1.2em;
text-align: center;
/* color: #123; */
color: var(--theme-blue);
margin-top: 8px; /* המרווח בין הכותרת לטקסט */
margin-bottom: 8px; /* המרווח בין הכותרת לטקסט */
}
.desc_text2 {
color: #123;
font-size: 17px;
}
.desc_text {
font-size: 17px;
}
.Desc_section .desc_text{font-size: 17px;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.desc_text2 {
font-size: 18px;
}
.desc_text {
font-size: 18px;
}
}
/* =========================================================
ICON BOXES - Final Swiper & Grid Logic
========================================================= */
/* 1. מצב דסקטופ (מעל 767px) */
.site_icon_boxes .icon-grid {
display: grid !important;
}
.site_icon_boxes .icon-swiper {
display: none !important;
}
/* 2. מצב מובייל (מתחת ל-767px) */
@media (max-width: 767px) {
/* הסתרת הגריד של הדסקטופ */
.site_icon_boxes .icon-grid {
display: none !important;
}
/* הצגת הסוויפר כאלמנט סליידר תקין */
.site_icon_boxes .icon-swiper {
display: block !important;
position: relative;
overflow: hidden; /* חובה לסוויפר */
width: 100%;
margin: 0 auto;
padding-bottom: 40px !important;
}
/* חשוב: לא להוסיף display:flex ידני ל-swiper-wrapper כאן!
הספרייה של Swiper תוסיף אותו לבד בצורה נכונה. */
.site_icon_boxes .icon-swiper .box {
background: #fff;
border: 1px solid #eee;
border-radius: 15px;
padding: 20px 10px;
height: 100%; /* שכל הסליידים יהיו באותו גובה */
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
box-sizing: border-box;
}
/* טיפול בתמונות - מניעת חיתוך */
.site_icon_boxes .icon-swiper .img_wrap {
width: 100%;
height: 100px; /* גובה קבוע לאזור התמונה */
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
.site_icon_boxes .icon-swiper .img_wrap img {
max-height: 100%;
max-width: 90%;
width: auto !important;
object-fit: contain !important; /* מבטיח שהתמונה לא תיחתך */
}
}
/* =========================================================
SITE ICON BOXES - Landscape: MAXIMUM TEXT WIDTH FIX
========================================================= */
/* =========================================================
SITE ICON BOXES - Landscape: NUCLEAR FIX FOR WIDE TEXT
========================================================= */
@media (max-width: 950px) and (orientation: landscape) {
/* 1. מניעת חריגה מהמסך */
.site_icon_boxes .icon-swiper {
height: 200px !important;
padding-bottom: 35px !important;
}
/* 2. התיבה הלבנה - הופכת לרחבה מאוד (95%) */
.site_icon_boxes .icon-swiper .box {
width: 95% !important;
margin: 0 auto !important;
display: flex !important;
flex-direction: row !important; /* אייקון בימין, טקסט בשמאל */
align-items: center !important;
justify-content: flex-start !important; /* הצמדה לימין, לא מרכוז! */
/* פדינג ימני (30px) דוחף את האייקון פנימה, פדינג שמאלי אפסי (5px) פותח את הטקסט */
padding: 10px 30px 10px 5px !important;
gap: 20px !important;
box-sizing: border-box !important;
height: 100% !important;
}
/* 3. האייקון - שומר על גודל קבוע */
.site_icon_boxes .icon-swiper .img_wrap {
flex: 0 0 90px !important;
width: 90px !important;
margin: 0 !important;
}
/* 4. ה-P וה-SPAN: כאן קורה הריחוב האמיתי */
.site_icon_boxes .icon-swiper .box p {
flex: 1 1 100% !important; /* פקודה שמכריחה את הטקסט להימתח עד הסוף שמאלה */
width: 100% !important;
max-width: none !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important; /* יישור לימין ב-RTL */
text-align: right !important;
margin: 0 !important;
}
/* 5. ביטול כל הגבלה על רוחב השורה */
.site_icon_boxes .icon-swiper .box p strong,
.site_icon_boxes .icon-swiper .box p b,
.site_icon_boxes .icon-swiper .box span {
width: 100% !important;
display: block !important;
text-align: right !important;
max-width: none !important; /* מבטל חניקה של הטקסט */
}
/* הגדלת גובה שורה כדי שהטקסט הרחב יהיה קריא ב-3 שורות */
.site_icon_boxes .icon-swiper .box span {
font-size: 1.05em !important;
line-height: 1.35 !important;
}
}
.site_clients{
position: relative;
padding: 80px 0;
/* background-image: url("../images/paperplane-bg-3.jpg"); */
/* background-image: url("../images/backrounds-tests/bg_w2.png"); */
/* background-repeat: no-repeat;*/
/* background-size: cover;*/
/* background-position: center top;*/
/*background:url(../images/content_bg2_new.gif) repeat-y left top*/
/* background:url(../images/content_bg3.png) repeat-y left top */
background-image: url("../images/content_bg3.png");
background-repeat: repeat;
background-position: left top;
/* background-repeat: repeat-x left top; */
/* background-position: left top; */
/* background-size: auto 100%; */
}
.cmp-strip{
/* background:#fff; */
background: transparent;
padding: 10px 0;
direction:ltr;
--perView: 5; /* כמה חברות מוצגות בדסקטופ */
--gap: 30px;
}
.cmp-viewport{
overflow:hidden;
width:100%;
}
.cmp-track{
display:flex;
gap: var(--gap);
will-change: transform;
user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.cmp-item{
flex: 0 0 calc((100% - (var(--gap) * (var(--perView) - 1))) / var(--perView));
text-align:center;
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
direction: rtl;
font-size: 18px;
color:#111;
user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
}
/* טאבלט */
@media (max-width: 900px){
.cmp-strip{ --perView: 3; --gap: 22px; }
.cmp-item{ font-size: 17px; }
}
/* מובייל */
@media (max-width: 560px){
.cmp-strip{ --perView: 2; --gap: 16px; }
.cmp-item{ font-size: 16px; }
}
.cmp-strip{ margin-bottom: 40px; } /* הרווח עד לכפתור במקום BR*/
.cmp-item { border: 2px solid transparent; }
.cmp-item:nth-child(5n+1){ border-color:#007eb2; }
.cmp-item:nth-child(5n+2){ border-color:#330978; }
.cmp-item:nth-child(5n+3){ border-color:#e67e22; }
.cmp-item:nth-child(5n+4){ border-color:#16a085; }
.cmp-item:nth-child(5n){ border-color:#c0392b; }
.cmp-item{
border:2px solid;
border-radius:8px;
padding:6px 12px;
/* background:#fff;*/
/* background: transparent;*/
box-shadow:0 1px 4px rgba(0,0,0,.08);
}
/*
.cmp-item{
background: rgba(255,255,255,.22);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
*/
/* border-radius: 16px; */
/* padding: 14px 0;*/
}
/*כל הפס של החברות שקוף למחצה*/
/*
.cmp-strip{ background: transparent; padding: 10px 0; }
.cmp-viewport{
background: rgba(255,255,255,.18);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 16px;
padding: 10px 0;
}
*/
/* A) Border + רקע עדין לפי הצבע */
/*
#cmpTrack .cmp-item{
border: 2px solid transparent;
border-radius: 8px;
padding: 6px 12px;
background: #fff;
box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
#cmpTrack .cmp-item:nth-child(5n+1){ border-color:#007eb2; background: rgba(0,126,178,.08); }
#cmpTrack .cmp-item:nth-child(5n+2){ border-color:#330978; background: rgba(51,9,120,.08); }
#cmpTrack .cmp-item:nth-child(5n+3){ border-color:#e67e22; background: rgba(230,126,34,.08); }
#cmpTrack .cmp-item:nth-child(5n+4){ border-color:#16a085; background: rgba(22,160,133,.08); }
#cmpTrack .cmp-item:nth-child(5n){ border-color:#c0392b; background: rgba(192,57,43,.08); }
*/
/* משרות חמות RSS news ticker */
.news_ticker_full{
width:100%;
margin:20px 0;
border:0;
font-family: inherit; /* פונט מערכת */
}
.news_ticker_title{
font-size:16px;
font-weight:700;
text-align:center;
margin:5px 0 10px;
}
/* הקופסה של הטיקר - שקוף */
.rssTicker{
background: transparent;
direction: rtl;
text-align: right;
}
/* 6 שורות: 6 * 32px = 192px (תשנה אם צריך) */
.rssViewport{
height: 192px;
overflow: hidden;
background: transparent;
}
.rssList{
list-style: none;
padding: 0;
margin: 0;
background: transparent;
}
.rssItem{
padding: 6px 0;
border-bottom: 1px solid rgba(0,0,0,.12);
background: transparent;
line-height: 20px; /* שולט על “גובה שורה” */
}
.rssItem a{
text-decoration: none;
font-weight: 700;
color: #123;
}
.rssDesc{
display:block;
font-weight: 400;
opacity: .9;
}
/* אזור קישורים נוספים ומאמרים */
.more_sitelinks{
padding-top: 70px;
padding-bottom: 70px;
padding-right: 30px;
padding-left: 30px; /* ← הוספה חובה */
background: var(--theme-blue);
}
/* קונטיינר */
.more_sitelinks .container{
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 עמודות */
gap: 30px; /* רווח בין עמודות */
max-width: 1200px;
margin: 0 auto;
}
/* כותרת */
.more_sitelinks .theme_title{
grid-column: 1 / -1; /* תופס את כל הרוחב */
margin-bottom: 10px;
text-align: center;
}
/* תת-כותרת */
.more_sitelinks .theme_subtitle{
grid-column: 1 / -1; /* תופס את כל הרוחב */
margin-bottom: 40px;
text-align: center;
}
/* עמודה בודדת */
.more_sitelinks .site_col{
text-align: center;
}
/* כפתור כללי */
.site_btn{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
/* padding: 14px 26px; */
border: 2px solid #16253b; /* כחול כהה */
/* border-radius: 999px; */ /* pill */
background: transparent;
/* color: #16253b; */
/* font-size: 16px; */
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: all .25s ease;
/* display: inline-block;*/
/* font-size: 1.875rem; */
/* font-size: 1.4rem;*/
font-size: clamp(1.05rem, 1.2vw + 0.6rem, 1.4rem);
/* font-weight: bold; */
/* border-radius: 24px; */
border-radius: 18px;
/* background-color: var(--theme-blue); */
color: #fff;
/* border: 0; */
/* padding: 12px 20px;*/
/* text-decoration: none;*/
padding: 11px 15px;
}
/* חץ */
.site_btn .arrow{
width: 0;
height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-right: 10px solid #16253b; /* חץ שמאלה (RTL) */
}
/* hover */
.site_btn:hover{
background: #16253b;
color: #ffffff;
}
.site_btn:hover .arrow{
border-right-color: #ffffff;
}
/* אלמנט שתופס את כל הרוחב אחרי העמודות */
.more_sitelinks .full_width{
grid-column: 1 / -1; /* תופס את כל העמודות */
}
.more_sitelinks .full_width a{
color: #ffffff; /* לבן */
text-decoration: none; /* בלי קו תחתי */
font-weight: 400;
transition: color .25s ease;
text-align: right;
max-width: 820px;
font-size: 1.1em;
line-height: 1.6;
letter-spacing: -0.2px;
}
/* hover - כחול כמו הכפתורים */
.more_sitelinks .full_width a:hover{
color: #16253b; /* אותו כחול של הכפתורים */
}
/* הוספת ריווח בין שורות המאמרים */
.more_sitelinks .full_width ul li {
margin-bottom: 7px; /* שנה את המספר 15px כדי להגדיל או להקטין את הרווח */
}
/* ביטול הרווח בפריט האחרון כדי לשמור על יישור נקי */
.more_sitelinks .full_width ul li:last-child {
margin-bottom: 0;
}
.more_sitelinks .links_title{
font-size: 1.8em;
font-weight: 600;
margin-bottom: 10px;
margin-top: 20px;
line-height: 1em;
}
.more_sitelinks .site_col .col_title{
/* font-size: 1.2em; */ /* שליטה בגודל */
font-size: clamp(1.0rem, 0.8vw + 0.7rem, 1.2em);
font-weight: 500;
margin-bottom: 10px;
/* color: #ffffff;*/
}
.break-ipad{ display: none; }
@media (max-width: 1024px) and (min-width: 767px){
.break-ipad{ display: inline; }
}
/* טאבלטים ומסכים קטנים - הקטנה בלבד (בלי לשבור עמודות) */
@media (max-width: 1024px){
/* .break-ipad{ display: inline; } */ /*שובר את השורות עם BR שמופעל רק בניידים*/
.more_sitelinks .site_btn.site_btn_wide{ /*מרחיב כפתורים ספציפיים צרים מדי אחרי השבירה שלהם*/
padding-left: 30px;
padding-right: 30px;
}
/* כותרות עמודות */
.more_sitelinks .site_col .col_title{
font-size: 1.2em;
margin-bottom: 10px;
}
/* .more_sitelinks .site_col:nth-of-type(4) { */ /*להעלים את הכפתור הזה במובייל*/
/* display: none; */
/* } */
/* כפתורים */
.more_sitelinks .site_btn{
font-size: 1.15rem;
padding: 10px 14px;
gap: 8px;
white-space: normal; /* זה מה שמפסיק את נעלם שמאלה */
text-align: center;
max-width: 100%;
}
.more_sitelinks .site_btn .arrow{
border-top-width: 6px;
border-bottom-width: 6px;
border-right-width: 8px;
}
}
/* מובייל - גם הקטנה וגם ירידה לשורה */
@media (max-width: 767px){
.more_sitelinks{
padding-right: 15px;
padding-left: 15px;
}
.more_sitelinks .container{
grid-template-columns: 2fr; /* ירידה מתחת */
gap: 20px;
}
/* .more_sitelinks .site_col:nth-of-type(4) { */ /*להעלים את הכפתור הזה במובייל*/
/* display: none; */
/* } */
.more_sitelinks .site_col .col_title{
font-size: 1.1em;
margin-bottom: 8px;
}
.more_sitelinks .site_btn{
font-size: 1.05rem;
padding: 9px 12px;
white-space: normal; /* מאפשר שבירת שורה */
text-align: center;
}
}
@media (max-width: 767px) and (min-width: 530px){
.more_sitelinks .container{
grid-template-columns: repeat(2, 1fr);
}
/* צמצום המרווח בין השורות בתוך אותו קישור כאשר הטקסט נשבר */
.more_sitelinks .full_width a {
line-height: 1.2 !important; /* ערך נמוך יותר מצמצם את המרווח */
display: block; /* מבטיח שה-line-height יחול בצורה נכונה */
margin-bottom: 10px; /* שומר על רווח בין קישור אחד למשנהו */
}
}
/* מעלים את החלק של הקישורים בנייד */
@media (max-width: 767px) {
.more_sitelinks {display: none;}
}
@media (min-width: 768px) {
.more_sitelinks {display: block;}
}
/* עיצוב הקישור - הופך אותו לזהה לחלוטין לטקסט */
.links_title .title_link {
color: var(--theme-black) !important;
font-weight: 600 !important;
font-size: 1em !important;
text-decoration: none !important;
cursor: pointer !important;
}
/* ביטול שינוי צבע במעבר עכבר כדי לשמור על מראה אחיד */
.links_title .title_link:hover {
color: #ffffff !important;
text-decoration: none !important;
}
/* אפקט קו תחתון בלבד ב-Hover לקישורי העמודה האמצעית בפוטר */
.page_footer--columns .widget_text a:hover {
text-decoration: underline !important;
}
/* =========================
MOB FOOTER LINKS - phones only
========================= */
/* 1) ברירת מחדל: הכל מוסתר (כולל row-2 ו-row-3) */
.mob_footer_links{
max-width: 1200px;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
padding: 40px 10px 0;
display: none;
}
/* מסתירים את שתי השורות כברירת מחדל */
.mob_footer_links .row-3,
.mob_footer_links .row-2{
display: none;
}
/* 2) טלפונים בלבד: מציגים את כל הבלוק */
@media (max-width: 767px){
.mob_footer_links{ display: block; }
}
/* 3) טלפונים "רחבים" (451-767): רק 3 עמודות */
@media (min-width: 451px) and (max-width: 767px){
.mob_footer_links .row-3{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
width: 100%;
align-items: start;
direction: rtl;
}
.mob_footer_links .row-3 .col.right{ justify-self: end; text-align: right; }
.mob_footer_links .row-3 .col.center{ justify-self: center; text-align: right; }
.mob_footer_links .row-3 .col.left{ justify-self: start; text-align: right; }
}
/* 4) טלפונים "צרים" (0-450): רק 2 עמודות (3 קישורים בכל עמודה) */
@media (max-width: 450px) {
.mob_footer_links .row-2 {
display: flex; /* עוברים לפלקס כדי לשלוט בריווח ביניהם */
justify-content: space-between; /* מצמיד אחת לימין ואחת לשמאל */
width: 100%;
direction: rtl;
gap: 10px; /* מרווח מינימלי למניעת נגיעה */
}
.mob_footer_links .row-2 .col {
width: auto; /* העמודה תופסת רק את רוחב הטקסט */
text-align: right; /* הטקסט עצמו תמיד מיושר לימין */
}
/* אופציונלי: אם תרצה שהעמודה השמאלית תהיה צמודה לקצה ממש */
.mob_footer_links .row-2 .col:last-child {
display: flex;
flex-direction: column;
align-items: flex-start; /* שומר על הבלוק בשמאל */
}
}
/* קישורים (לשתי הגרסאות) */
.mob_footer_links .col a{
display: block;
font-size: 0.9em;
line-height: 1.2;
color: #ffffff;
text-decoration: none;
font-weight: 300;
margin: 0 0 6px 0;
transition: color 0.3s ease, transform 0.2s ease;
}
.mob_footer_links .col a:hover,
.mob_footer_links .col a:active {
/* color: var(--theme-orange) !important; */ /* שימוש בכתום המוגדר באתר */
text-decoration: underline; /* הוספת קו תחתי להדגשה */
}
/* תיבה תחתונה */
.mob_footer_links .box-3{
margin-top: 20px;
border: 1px solid #ccc;
border-radius: 6px;
overflow: hidden;
text-overflow: ellipsis;
padding: 6px 10px;
font-size: 0.8em;
line-height: 1.2;
color: #ffffff;
direction: rtl;
text-align: center;
box-sizing: border-box;
}
/* =========================
Header mobile/tablet: hamburger centering fix
========================= */
@media (max-width: 1024px){
/* ביטול top ישן, z-index מתחת ל-backdrop */
#primary_menu_toggle{
position: relative;
top: 0;
margin: 0;
z-index: 3;
}
/* ההמבורגר - ממורכז אנכית בגובה ההדר */
.page_header #primary_menu_toggle{
align-self: center !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 100% !important;
min-height: 64px !important;
top: auto !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
}
}
/* מובייל: הבלוק יורד מתחת לטופס וממורכז */
@media (max-width: 767px){
.page_footer--contact .follow_us{
align-self: center;
text-align: center;
width: 100%;
}
}
/* דסקטופ/טאבלט: follow_us, social_list, container alignment */
@media (min-width: 768px){
.page_footer--contact .follow_us{
align-self: flex-start;
text-align: center;
margin-top: 4px;
}
.page_footer--contact .follow_us .title{
margin-bottom: 48px;
line-height: 1.2;
}
.page_footer--contact .social_list{
flex-direction: column;
align-items: center;
}
.page_footer--contact > .container,
.page_footer--contact .container{
align-items: flex-start !important;
}
}
/* איפוס גודל ספציפי - רק לכותרת המדיה החברתית בפוטר */
footer h3.title {
font-size: 1em; /* מחזיר לגודל טקסט רגיל */
font-weight: 400; /* שומר על עובי */
/* margin-block-start: 1em; */
/* margin-block-end: 1em; */
}
/* צבעים שונים לכל אייקון */
/* צבע לפי class לכל אייקון - לשים בסוף הקובץ */
.page_footer--contact .social_list a.soc{
color: #fff; /* ברירת מחדל */
}
/* חשוב: לגרום לכל הצורות ב-SVG להשתמש ב-currentColor */
.page_footer--contact .social_list a.soc svg *{
fill: currentColor !important;
stroke: currentColor !important; /* למקרה שאייקון משתמש ב-stroke */
}
/* צבעים ספציפיים */
.page_footer--contact .social_list a.soc-fb{ color:#1877F2; }
.page_footer--contact .social_list a.soc-ln{ color:orange; }
.page_footer--contact .social_list a.soc-x { color:#fff; } /* או #fff אם הרקע כהה */
/* שבריחוף כולם יהיו בצבע אחר/בהירים יותר */
/* .social_list a:hover { filter: brightness(1.08); } */
/* רווח במובייל בין הטופס לאייקונים */
@media (max-width: 767px){
.page_footer--contact .follow_us .title{
margin-top: 30px; /* כוון: 16-28 לפי העין */
}
}
/* אפקט Glow לאייקונים בסקשן יצירת קשר */
.page_footer--contact .social_list a.soc {
transition: all 0.3s ease !important; /* מעבר חלק לאנימציה */
display: inline-block;
}
.page_footer--contact .social_list a.soc:hover {
transform: scale(1.2); /* הגדלה ב-20% ליצירת בולטות */
/* יצירת הילה זוהרת המשתמשת בצבע המקורי של האייקון */
filter: drop-shadow(0 0 10px currentColor);
}
@media (max-width: 450px) {
/* 1. קיבוע גובה הסקשן הראשון - מונע את ה"מתיחה" בזמן גלילה */
.hp_job_search {
/* svh = גובה יציב שלא משתנה כשהתפריטים של האייפון זזים */
height: 100svh !important;
min-height: 100svh !important;
display: flex !important;
flex-direction: column !important;
padding-bottom: 0 !important;
position: relative !important;
overflow: hidden !important; /* מונע חריגות מיותרות */
box-sizing: border-box !important;
}
/* 2. מתיחת התוכן הפנימי */
.hp_job_search .container {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
padding-bottom: 0 !important;
width: 100% !important;
height: 100% !important;
}
/* 3. הבאנרים - נעולים לתחתית של ה-svh */
.hp-banners-row {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 4px !important;
/* נוסחת המירכוז שלך */
width: 100vw !important;
max-width: 100vw !important;
position: relative !important;
margin-right: calc(-50vw + 50%) !important;
margin-left: calc(-50vw + 50%) !important;
/* נעילה לרצפה ללא מרווחים */
margin-bottom: 0 !important;
margin-top: auto !important;
/* ריווח מהצדדים ופינות ישרות בתחתית */
padding: 0 14px 0px 14px !important;
box-sizing: border-box !important;
z-index: 10 !important;
}
.hp-banners-row li {
width: 100% !important;
margin: 0 !important;
}
.hp-banners-row a {
width: 100% !important;
border-radius: 6px 6px 0 0 !important; /* הצמדה חלקה לקו */
padding: 6px 2px !important;
min-height: 44px !important;
box-shadow: 0 -2px 10px rgba(0,0,0,0.15) !important;
box-sizing: border-box !important;
background: rgba(255,255,255,0.1) !important;
}
.hp-banners-row img,
.hp-banners-row video {
width: 100% !important;
max-height: 32px !important;
object-fit: contain !important;
}
}
/* קטע שתף במדיה החברתית בפוטר בעמוד הראשי ובמובייל בעמוד הראשי */
/* =====================================
SHARE BLOCK - MOBILE VERSION
===================================== */
/* טקסט "שתפו:" */
.share_block_mobile .share_title{
font-size: 16px;
font-weight: 500;
line-height: 25px; /* בדיוק כמו גובה האייקון */
height: 25px; /* זהה לגובה האייקון */
display: flex;
align-items: center;
margin: 0;
padding: 0;
position: relative;
top: 2px; /* תשחק עם המספר */
}
/* שורת האייקונים */
.share_block_mobile .share_bar2{
display: flex;
align-items: center;
gap: 4px; /* שליטה על רווח בין האייקונים */
}
/* כפתור */
.share_block_mobile .share_btn2{
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
padding: 0;
margin: 0;
border: 0;
background: transparent;
transition: color .2s ease;
}
/* האייקון עצמו */
.share_block_mobile .share_btn2 .icon{
display: block;
width: 25px; /* שליטה בגודל האייקונים */
height: 25px;
fill: currentColor;
}
/* Hover - רק שינוי צבע האייקון */
.share_block_mobile .share_btn2:hover{
/* color: #ffffff; */
}
/* ברירת מחדל (דסקטופ): מוסתר */
.share_block_mobile{
display:none !important;
}
/* רק במובייל: מוצג */
/* ================================
SHARE BLOCK
================================ */
.share_block2{
display:flex;
align-items:center;
gap:10px;
}
/* כותרת "שתף עמוד" */
.share_title2{
font-size:14px;
color:#fff;
padding-bottom:4px;
}
/* שורת האייקונים */
.share_bar2{
display:flex;
/* gap: clamp(2px, 1vw, 6px); */
gap: 10px;
margin:0;
padding:0;
}
/* כפתור בודד */
.share_btn2{
display:inline-flex;
align-items:center;
justify-content:center;
line-height:0; /* הכי חשוב - מבטל רווח טקסט */
}
.share_btn2 .icon{
display:block; /* מונע baseline-gap של SVG */
/* width: clamp(16px, 2vw, 26px); */
/* height: clamp(16px, 2vw, 26px); */
width: 28px;
height: 28px;
fill: currentColor;
}
/* צבעים לפי רשת */
.share_btn2[data-share="facebook"]{
color:#1877F2;
}
.share_btn2[data-share="x"]{
color:#ffffff;
}
.share_btn2[data-share="linkedin"]{
color:#0A66C2;
}
.share_btn2[data-share="whatsapp"]{
color:#25D366;
}
.share_btn2[data-share="telegram"]{
color:#229ED9;
}
/* hoover */
.share_btn2{
transition: all 0.3s ease;
display: inline-block;
}
.share_btn2:hover{
transform: scale(1.2);
filter: drop-shadow(0 0 10px currentColor);
}
@media (max-width: 767px){
.share_block_mobile{
display: flex !important;
justify-content: center; /* ממורכז מתחת ללוגו */
align-items: center; /* ממרכז אנכית */
gap: 12px; /* מרחק בין "שתפו:" לאייקונים */
margin-top: 10px; /* מרחק מהלוגו - שנה חופשי */
}
}
/* חשוב: לאפשר שבירה טבעית */
.copyright .legal-links{
/* display:inline; */
display:inline-block; /* מאפשר שליטה על שבירות בתוך הבלוק */
white-space:normal;
}
/* הקופירייט: לא לחסום שבירה */
.copyright{
white-space:normal;
}
.copyright-years{
white-space: nowrap; /* שלא יישבר באמצע השנים */
}
@media (max-width: 446px){
/* כשה-נגישות נשברה לשורה חדשה - מעלימים את הנקודה שלפניה */
.dot-before-accessibility{
display:none;
}
.legal-accessibility{
display:block;
width:100%;
margin:0;
}
}
.copyr {letter-spacing: 0px;
font-size: 14px;
}
/* =============== האיקונים של עקבו אחרינו בפוטר =================== */
.share_btn2[data-share="facebook-square-small"]{
color:#1877F2;
}
.share_btn2[data-share="linkedin-small"]{
color:orange;
}
.share_btn2[data-share="x-small"]{
color:#fff;
}
/* גודל שונה רק לאייקונים של עיקבו אחרינו למטה במובייל */
.share_btn2.share_small .icon{
width: 23px;
height: 23px;
}
/* ריווח שונה רק ביניהם */
.share_bar2 .share_small{
margin-inline: 5px;
}
.share_block_mobile .share_bar2 {
/* border: 1px solid blue; */
}
/* עיצוב קישור לאשף ההפצה בטקסט */
a.linktype1 {
text-decoration: none; /* ברירת מחדל: ללא קו */
color: #ea832d; /* צבע כתום (תואם ללוגו) - שנה אם תרצה צבע אחר */
font-weight: bold; /* הדגשה כדי שיבלוט בטקסט */
transition: color 0.2s ease;
}
a.linktype1:hover {
text-decoration: underline; /* קו תחתון במעבר עכבר */
color: #d35400; /* אופציונלי: כתום כהה יותר בריחוף */
}
/* עיצוב קישור לאשף ההפצה בטקסט2 */
a.linktype2 {
text-decoration: none; /* ברירת מחדל: ללא קו */
/* color: #ea832d; */ /* צבע כתום (תואם ללוגו) - שנה אם תרצה צבע אחר */
/* color: rgb(71, 49, 71); */
/* color: #333; */
/* color: var(--theme-blue-darker); */
color: #123;
font-weight: bold; /* הדגשה כדי שיבלוט בטקסט */
transition: color 0.2s ease;
}
a.linktype2:hover {
text-decoration: underline; /* קו תחתון במעבר עכבר */
color: #d35400; /* אופציונלי: כתום כהה יותר בריחוף */
}
/* עיצוב קישור לאשף ההפצה בטקסט2 */
a.linktype3 {
text-decoration: none; /* ברירת מחדל: ללא קו */
/* color: #ea832d; */ /* צבע כתום (תואם ללוגו) - שנה אם תרצה צבע אחר */
/* color: rgb(71, 49, 71); */
/* color: #333; */
/* color: var(--theme-blue-darker); */
/* color: #123; */
/* font-weight: bold; */ /* הדגשה כדי שיבלוט בטקסט */
transition: color 0.2s ease;
}
a.linktype3:hover {
text-decoration: underline; /* קו תחתון במעבר עכבר */
/* color: #d35400; */ /* אופציונלי: כתום כהה יותר בריחוף */
}
/* תיקון פריסה לשדה ההודעה (מחליף את העיצוב הישן של ה-label) */
.page_footer--contact .contact_form .fields > .field-full {
grid-column: 1 / span 2; /* פורס את השדה לרוחב מלא */
margin: 0;
display: block;
}
/* שמירה על עיצוב ה-Textarea */
.page_footer--contact .contact_form .fields > .field-full textarea.wpcf7-textarea {
border-radius: 24px;
}
/* הודעות שגיאה בטופס כתבו לנו */
.input-error {
background-color: #d90000 !important;
color: #ffffff !important;
border: 1px solid #d90000 !important;
}
.input-error::placeholder {
color: #ffffff;
opacity: 1;
}
/* אם זה textarea */
textarea.input-error {
background-color: #d90000 !important;
color: #ffffff !important;
}
/* חץ שמאלה שיתאים גם לאייפון */
@font-face {
font-family: 'ArrowSymbol';
src: url('../fonts/left-arrow-font-noto/left_arrow.woff2') format('woff2');
font-display: swap;
}
.arrow-symbol {
font-family: 'ArrowSymbol', sans-serif;
}