@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap");

:root {
  --primary: #333333;
  --light: #eff5ff;
  --dark: #000000;
}

@keyframes gradient-animation {
  0% {
    background-position: 10% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.project-image1 {
  width: 80%;
  max-width: 300px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-image1:hover {
  transform: scale(1.1); /* הגדלה עדינה של התמונה */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* הוספת הצללה חזקה יותר */
  opacity: 0.9; /* הקטנת השקיפות במעט */
}

.text-overlay {
  position: relative;
  color: white;
}

.text-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* שכבת רקע כהה ב-50% שקיפות */
  z-index: -1; /* שהשכבה לא תכסה את הטקסט */
}

.text-shadow {
  color: white;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8); /* צל עמוק יותר */
}

.back-to-top {
  position: fixed;
  display: none;
  right: 45px;
  bottom: 45px;
  z-index: 99;
  width: 48px;
  height: 48px;
  background-color: #ffffff; /* צבע לבן לרקע של הכפתור */
  border-radius: 50%; /* צורת עיגול */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, color 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* תוספת של צל */
  border: #333333;
}

.back-to-top i {
  font-size: 24px;
  color: #000; /* צבע לבן לאייקון */
  transition: color 0.3s ease;
}

.back-to-top:hover {
  background-color: #000; /* צבע רקע לבן בריחוף */
}

.back-to-top:hover i {
  color: #ffffff; /* צבע לבן לאייקון בריחוף */
}

#spinner {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-out, visibility 0s linear 0.5s;
  z-index: 99999;
}

#spinner.show {
  transition: opacity 0.5s ease-out, visibility 0s linear 0s;
  visibility: visible;
  opacity: 1;
}

.bg-body-tertiary {
  background-image: url("../images/today.webp"); /* הכנס את נתיב התמונה כאן */
  background-size: cover; /* גורם לתמונה להתאים לגודל הקונטיינר */
  background-position: center; /* ממקם את התמונה במרכז */
}
.bg-body-tertiary-proj1 {
  background-image: url("../images/pic8.webp"); /* הכנס את נתיב התמונה כאן */
  background-size: cover; /* גורם לתמונה להתאים לגודל הקונטיינר */
  background-position: center; /* ממקם את התמונה במרכז */
  padding-top: 80px; /* גובה ה-Navigation Bar */
  margin-top: 80px; /* התאמה לגובה ה-Navigation Bar */
}
.bg-body-tertiary-proj2 {
  background-image: url("../images/My_blog_back_pic.webp"); /* הכנס את נתיב התמונה כאן */
  background-size: cover; /* גורם לתמונה להתאים לגודל הקונטיינר */
  background-position: center; /* ממקם את התמונה במרכז */
  padding-top: 80px; /* גובה ה-Navigation Bar */
  margin-top: 80px; /* התאמה לגובה ה-Navigation Bar */
}

.bg-body-tertiary-proj3 {
  background-image: url("../images/ExpenseTracker_12.webp"); /* הכנס את נתיב התמונה כאן */
  background-size: cover; /* גורם לתמונה להתאים לגודל הקונטיינר */
  background-position: center; /* ממקם את התמונה במרכז */
  padding-top: 80px; /* גובה ה-Navigation Bar */
  margin-top: 80px; /* התאמה לגובה ה-Navigation Bar */
}

.bg-body-tertiary-proj4 {
  background-image: url("../images/eco_back4.webp"); /* הכנס את נתיב התמונה כאן */
  background-size: cover; /* גורם לתמונה להתאים לגודל הקונטיינר */
  background-position: center; /* ממקם את התמונה במרכז */
  padding-top: 80px; /* גובה ה-Navigation Bar */
  margin-top: 80px; /* התאמה לגובה ה-Navigation Bar */
}

.bg-body-tertiary-proj4a {
  background-image: url("../images/eco_back3.webp"); /* הכנס את נתיב התמונה כאן */
  background-size: cover; /* גורם לתמונה להתאים לגודל הקונטיינר */
  background-position: center; /* ממקם את התמונה במרכז */
  padding-top: 80px; /* גובה ה-Navigation Bar */
  margin-top: 80px; /* התאמה לגובה ה-Navigation Bar */
}

.bg-body-tertiary-proj5 {
  background-image: url("../images/harry_back3.webp"); /* הכנס את נתיב התמונה כאן */
  background-size: cover; /* גורם לתמונה להתאים לגודל הקונטיינר */
  background-position: center; /* ממקם את התמונה במרכז */
  padding-top: 80px; /* גובה ה-Navigation Bar */
  margin-top: 80px; /* התאמה לגובה ה-Navigation Bar */
}

.bg-body-tertiary-proj5a {
  background-image: url("../images/harry_back4.webp"); /* הכנס את נתיב התמונה כאן */
  background-size: cover; /* גורם לתמונה להתאים לגודל הקונטיינר */
  background-position: center; /* ממקם את התמונה במרכז */
  padding-top: 80px; /* גובה ה-Navigation Bar */
  margin-top: 80px; /* התאמה לגובה ה-Navigation Bar */
}

.bg-body-tertiary-proj6a {
  background-image: url("../images/movie_back1.webp"); /* הכנס את נתיב התמונה כאן */
  background-size: cover; /* גורם לתמונה להתאים לגודל הקונטיינר */
  background-position: center; /* ממקם את התמונה במרכז */
  padding-top: 80px; /* גובה ה-Navigation Bar */
  margin-top: 80px; /* התאמה לגובה ה-Navigation Bar */
}
.bg-body-tertiary-proj6 {
  background-image: url("../images/movie_back2.webp"); /* הכנס את נתיב התמונה כאן */
  background-size: cover; /* גורם לתמונה להתאים לגודל הקונטיינר */
  background-position: center; /* ממקם את התמונה במרכז */
  padding-top: 80px; /* גובה ה-Navigation Bar */
  margin-top: 80px; /* התאמה לגובה ה-Navigation Bar */
}

.bg-body-tertiary-proj7a {
  background-image: url("../images/AI_back1.webp"); /* הכנס את נתיב התמונה כאן */
  background-size: cover; /* גורם לתמונה להתאים לגודל הקונטיינר */
  background-position: center; /* ממקם את התמונה במרכז */
  padding-top: 150px; /* גובה ה-Navigation Bar */
  margin-top: 150px; /* התאמה לגובה ה-Navigation Bar */
}
.bg-body-tertiary-proj7 {
  background-image: url("../images/AI_back2.webp"); /* הכנס את נתיב התמונה כאן */
  background-size: cover; /* גורם לתמונה להתאים לגודל הקונטיינר */
  background-position: center; /* ממקם את התמונה במרכז */
  padding-top: 80px; /* גובה ה-Navigation Bar */
  margin-top: 80px; /* התאמה לגובה ה-Navigation Bar */
}

.bg-body-tertiary-proj8a {
  background-image: url("../images/chat_back1.webp"); /* הכנס את נתיב התמונה כאן */
  background-size: cover; /* גורם לתמונה להתאים לגודל הקונטיינר */
  background-position: center; /* ממקם את התמונה במרכז */
  padding-top: 80px; /* גובה ה-Navigation Bar */
  margin-top: 80px; /* התאמה לגובה ה-Navigation Bar */
}
.bg-body-tertiary-proj8 {
  background-image: url("../images/chat_back2.webp"); /* הכנס את נתיב התמונה כאן */
  background-size: cover; /* גורם לתמונה להתאים לגודל הקונטיינר */
  background-position: center; /* ממקם את התמונה במרכז */
  padding-top: 80px; /* גובה ה-Navigation Bar */
  margin-top: 80px; /* התאמה לגובה ה-Navigation Bar */
}

.bg-body-tertiary9 {
  background-image: url("../images/pic7.webp"); /* הכנס את נתיב התמונה כאן */
  background-size: cover; /* גורם לתמונה להתאים לגודל הקונטיינר */
  background-position: center; /* ממקם את התמונה במרכז */
  padding-top: 80px; /* גובה ה-Navigation Bar */
  margin-top: 80px; /* התאמה לגובה ה-Navigation Bar */
}

.bg-body-tertiary-proj10a {
  background-image: url("../images/Bussiness_back2.webp"); /* הכנס את נתיב התמונה כאן */
  background-size: cover; /* גורם לתמונה להתאים לגודל הקונטיינר */
  background-position: center; /* ממקם את התמונה במרכז */
  padding-top: 80px; /* גובה ה-Navigation Bar */
  margin-top: 80px; /* התאמה לגובה ה-Navigation Bar */
}
.bg-body-tertiary-proj10 {
  background-image: url("../images/Bussiness_back1.webp"); /* הכנס את נתיב התמונה כאן */
  background-size: cover; /* גורם לתמונה להתאים לגודל הקונטיינר */
  background-position: center; /* ממקם את התמונה במרכז */
  padding-top: 80px; /* גובה ה-Navigation Bar */
  margin-top: 80px; /* התאמה לגובה ה-Navigation Bar */
}
.bg-body-tertiary-proj11a {
  background-image: url("../images/pre1.webp"); /* הכנס את נתיב התמונה כאן */
  background-size: cover; /* גורם לתמונה להתאים לגודל הקונטיינר */
  background-position: center; /* ממקם את התמונה במרכז */
  padding-top: 80px; /* גובה ה-Navigation Bar */
  margin-top: 80px; /* התאמה לגובה ה-Navigation Bar */
}
.bg-body-tertiary-proj11 {
  background-image: url("../images/pre2.webp"); /* הכנס את נתיב התמונה כאן */
  background-size: cover; /* גורם לתמונה להתאים לגודל הקונטיינר */
  background-position: center; /* ממקם את התמונה במרכז */
  padding-top: 80px; /* גובה ה-Navigation Bar */
  margin-top: 80px; /* התאמה לגובה ה-Navigation Bar */
}

.bg-body-tertiary-proj12 {
  background-image: url("../images/TASK-BACK.webp"); /* הכנס את נתיב התמונה כאן */
  background-size: cover; /* גורם לתמונה להתאים לגודל הקונטיינר */
  background-position: center; /* ממקם את התמונה במרכז */
  padding-top: 80px; /* גובה ה-Navigation Bar */
  margin-top: 80px; /* התאמה לגובה ה-Navigation Bar */
}
.bg-body-tertiary-proj13 {
  background-image: url("../images/TASKֹֹ_MOֹֹ_BACK.webp"); /* הכנס את נתיב התמונה כאן */
  background-size: cover; /* גורם לתמונה להתאים לגודל הקונטיינר */
  background-position: center; /* ממקם את התמונה במרכז */
  padding-top: 80px; /* גובה ה-Navigation Bar */
  margin-top: 80px; /* התאמה לגובה ה-Navigation Bar */
}

.bg-body-tertiary-proj14 {
  background-image: url("../images/Cost_BACK.webp"); /* הכנס את נתיב התמונה כאן */
  background-size: cover; /* גורם לתמונה להתאים לגודל הקונטיינר */
  background-position: center; /* ממקם את התמונה במרכז */
  padding-top: 80px; /* גובה ה-Navigation Bar */
  margin-top: 80px; /* התאמה לגובה ה-Navigation Bar */
}
.bg-body-tertiary-proj15 {
  background-image: url("../images/12.png"); /* הכנס את נתיב התמונה כאן */
  background-size: cover; /* גורם לתמונה להתאים לגודל הקונטיינר */
  background-position: center; /* ממקם את התמונה במרכז */
  padding-top: 80px; /* גובה ה-Navigation Bar */
  margin-top: 80px; /* התאמה לגובה ה-Navigation Bar */
}
.bg-body-tertiary-proj16 {
  background-image: url("../images/fina.png"); /* הכנס את נתיב התמונה כאן */
  background-size: cover; /* גורם לתמונה להתאים לגודל הקונטיינר */
  background-position: center; /* ממקם את התמונה במרכז */
  padding-top: 80px; /* גובה ה-Navigation Bar */
  margin-top: 80px; /* התאמה לגובה ה-Navigation Bar */
}
.bg-body-tertiary-proj17 {
  background-image: url("../images/recipe.png"); /* הכנס את נתיב התמונה כאן */
  background-size: cover; /* גורם לתמונה להתאים לגודל הקונטיינר */
  background-position: center; /* ממקם את התמונה במרכז */
  padding-top: 80px; /* גובה ה-Navigation Bar */
  margin-top: 80px; /* התאמה לגובה ה-Navigation Bar */
}
.bg-body-tertiary-proj18 {
  background-image: url("../images/task.png"); /* הכנס את נתיב התמונה כאן */
  background-size: cover; /* גורם לתמונה להתאים לגודל הקונטיינר */
  background-position: center; /* ממקם את התמונה במרכז */
  padding-top: 80px; /* גובה ה-Navigation Bar */
  margin-top: 80px; /* התאמה לגובה ה-Navigation Bar */
}
.bg-body-tertiary-proj19 {
  background-image: url("../images/CHROME.png"); /* הכנס את נתיב התמונה כאן */
  background-size: cover; /* גורם לתמונה להתאים לגודל הקונטיינר */
  background-position: center; /* ממקם את התמונה במרכז */
  padding-top: 80px; /* גובה ה-Navigation Bar */
  margin-top: 80px; /* התאמה לגובה ה-Navigation Bar */
}

.pic1 {
  color: aliceblue;
}

/* שינוי צבע הרקע של הכפתור הפעיל */
.nav-pills .nav-link.active {
  background-color: inherit; /*לשנות פה לשחור או צבע אחר אם אני רוצה */ /* צבע רקע לכפתור הפעיל */
  color: white; /* צבע הטקסט לכפתור הפעיל */
}

.nav-item .nav-link {
  color: white;
}
.lead-text-center {
  text-align: center;
}

html {
  scroll-behavior: smooth;
}

/*** Button ***/
.btn {
  font-weight: 500;
  transition: 0.5s;
  color: #333333;
}

.btn.btn-primary,
.btn.btn-secondary {
  color: #333333;
}

.btn-square {
  width: 38px;
  height: 38px;
}

.btn-sm-square {
  width: 32px;
  height: 32px;
}

.btn-lg-square {
  width: 48px;
  height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: normal;
}

.card-cover {
  background-size: cover;
  background-position: center;
  transition: transform 0.3s ease, background-size 0.3s ease;
}

.card-cover:hover {
  transform: scale(1.05); /* הגדלת הקוביה ב-5% */
  background-size: 110%; /* הגדלת גודל התמונה ב-10% בעת הריחוף */
}

.about-new {
  font-size: 18px; /* גודל טקסט */
  .about-new {
    background-color: rgba(0, 0, 0, 0.6); /* רקע שחור חצי שקוף */
    color: #ffffff; /* טקסט בצבע לבן */
    padding: 20px;
    border-radius: 10px; /* פינות מעוגלות */
  }
}

h1.lead-text-center {
  font-family: "Playfair Display", serif;
  font-size: 40px; /* גודל כותרת */
  color: #ffffff; /* צבע לבן */
}

p.lead-about {
  font-family: "Open Sans", sans-serif;
  font-size: 18px; /* גודל טקסט רגיל */
  line-height: 1.6; /* מרווח בין השורות */
  color: #ffffff; /* צבע לבן */
}

.social-icons {
  margin-top: 15px;
}

.social-icons a {
  display: inline-block;
  margin: 0 10px;
  width: 24px;
  height: 24px;
}

.social-icons svg {
  fill: white;
  transition: fill 0.3s;
}

.social-icons a:hover svg {
  fill: #000; /* שינוי צבע במעבר עכבר */
}

.feature-icon {
  background-color: #000; /* הסרת הרקע הכחול */
  fill: #ffffff; /* צבע ה-SVG בלבן */
}

.skills-section h2 {
  font-family: "Poppins", sans-serif;
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: #ffffff;
}

.skill-item {
  padding: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.skill-item:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.skill-icon {
  margin-bottom: 15px;
  transition: all 0.3s ease;
}

.skill-icon:hover {
  fill: #00d4ff;
}

.no-bullets {
  list-style: none;
  padding: 0;
}

.no-bullets li {
  margin-bottom: 5px;
  color: #ffffff;
}

.no-bullets li:hover {
  color: #00d4ff;
  font-weight: bold;
}

.projects-title {
  font-size: 2.5rem;
  margin-bottom: 30px;
  color: #ffffff;
}

.carousel-item {
  height: 400px; /* Adjust the height as necessary */
  background-size: cover;
  background-position: center;
}

.carousel-caption h5 {
  color: #ffffff;
  font-size: 24px;
}

.carousel-caption p {
  color: #cccccc;
  font-size: 18px;
}

/* הגדרת סגנון כללי לעמוד */
body {
  font-family: "Poppins", sans-serif;
  background-color: #000; /* צבע רקע שחור */
  color: white;
  margin: 0;
  padding: 0;
}

.projects-section {
  padding: 40px 20px; /* הגדל את הריווח */
  text-align: center;
  background-color: #000; /* רקע שחור */
}

.projects-title {
  font-size: 2.5rem; /* גודל גדול יותר לכותרת */
  margin-bottom: 30px; /* ריווח נוסף */
  color: #ffffff; /* צבע כחול מודגש */
  font-weight: bold;
  text-transform: uppercase;
}

/* עיצוב הקרוסלה */
.carousel-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}

.project-carousel {
  display: flex;
  overflow-x: auto;
  gap: 20px; /* ריווח גדול יותר בין הכרטיסים */
  padding: 20px 0;
  scroll-behavior: smooth;
  width: 100%;
  scrollbar-width: thin; /* צר יותר */
  scrollbar-color: #ffffff transparent; /* צבע מותאם */
}

.project-carousel::-webkit-scrollbar {
  height: 8px; /* גובה הגלילה */
}

.project-carousel::-webkit-scrollbar-thumb {
  background: #ffffff; /* צבע מותאם */
  border-radius: 10px;
}

/* עיצוב כרטיסים */
.project-card {
  min-width: 300px;
  height: 220px; /* גובה מתאים יותר */
  flex-shrink: 0;
  background-color: #555; /* רקע כהה יותר */
  border-radius: 15px; /* יותר מעוגל */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6);
  background-size: cover;
  background-position: center;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.project-card:hover {
  transform: scale(1.1); /* הגדלה עדינה */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.8); /* הצללה חזקה יותר */
}

.project-card a {
  text-decoration: none;
  color: white;
  display: block;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 10px;
  background: rgba(0, 0, 0, 0.6); /* רקע כהה */
  transition: background 0.3s ease;
}

.project-card a:hover {
  background: rgba(0, 0, 0, 0.8); /* רקע כהה יותר, ללא שינוי בצבע הכיתוב */
  color: white; /* שמירת צבע הכיתוב בלבן */
}

/* עיצוב כפתורי גלילה */
.carousel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  border: none;
  color: #ffffff;
  font-size: 2.5rem;
  padding: 12px 25px;
  cursor: pointer;
  z-index: 2;
  border-radius: 50%; /* עיגול כפתור */
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.carousel-button.left {
  left: 20px;
}

.carousel-button.right {
  right: 20px;
}

.carousel-button:hover {
  background-color: #ffffff; /* כחול-ניאון */
  color: #000;
  transform: scale(1.2); /* אפקט הגדלה */
}

.container {
  width: 100%; /* גורם למיכל להשתמש ברוחב מלא */
  padding: 0; /* מסיר רווח פנימי */
  margin: 0 auto; /* מסיר שוליים חיצוניים */
  text-align: center; /* ממרכז את התמונה */
}

body,
html {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* מניעת שוליים גלובליים */
  overflow-x: hidden;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* section {
    animation: fadeIn 1s ease-in-out;
} */

.parallax {
  background-image: url("background.jpg");
  height: 500px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* עיצוב בסיסי */
body {
  font-family: Arial, sans-serif;
  background-color: #000;
  color: white;
  margin: 0;
  padding: 0;
}

.projects-section {
  padding: 20px;
  text-align: center;
}

.projects-title {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #ffffff; /* צבע לבן לכותרת */
}

/* עיצוב הקרוסלה */
.carousel-container {
  position: relative;
  display: flex;
  align-items: center;
}

.project-carousel {
  display: flex;
  overflow-x: auto;
  gap: 15px;
  padding: 20px 0;
  scroll-behavior: smooth;
  width: 100%;
}

.project-card {
  min-width: 300px;
  height: 200px;
  flex-shrink: 0;
  background-color: #444;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  background-size: cover;
  background-position: center;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.project-card:hover {
  transform: scale(1.1); /* הגדלת הכרטיס */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.7); /* צל בולט יותר */
}

/* שם הפרויקט */
.project-card .project-title {
  background: rgba(0, 0, 0, 0.7); /* רקע כהה חצי שקוף */
  color: #ffffff; /* טקסט לבן */
  font-size: 1.5rem; /* גודל טקסט מוגדל */
  font-weight: 600; /* עובי טקסט בינוני */
  text-align: center; /* טקסט ממורכז */
  padding: 10px 15px; /* ריווח פנימי */
  width: 100%; /* רוחב מלא */
  position: absolute; /* מיקום מוחלט */
  bottom: 0; /* בתחתית הכרטיס */
  left: 0; /* צמוד לשמאל */
  z-index: 2;
  text-transform: uppercase; /* טקסט באותיות גדולות */
  letter-spacing: 1px; /* רווח קטן בין אותיות */
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5); /* צל מעלה */
  transition: background 0.3s ease, transform 0.3s ease; /* מעבר חלק */
}

.project-card:hover .project-title {
  background: rgba(0, 0, 0, 0.9); /* רקע כהה יותר */
  color: #00d4ff; /* טקסט כחול ניאון */
  transform: scale(1.05); /* הגדלה קלה */
}

.project-card a {
  text-decoration: none;
  color: white;
  display: block;
  width: 100%;
  height: 100%;
}

/* עיצוב כפתורי גלילה */
.carousel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  border: none;
  color: white;
  font-size: 2rem;
  padding: 10px 20px;
  cursor: pointer;
  z-index: 2;
}

.carousel-button.left {
  left: 10px;
}

.carousel-button.right {
  right: 10px;
}

.carousel-button:hover {
  background-color: rgba(255, 255, 255, 0.8);
  color: black;
}

.github-button {
  display: inline-block;
  padding: 15px 30px; /* הגדלת הרווחים הפנימיים */
  font-size: 1.2rem; /* הגדלת גודל הטקסט */
  font-weight: bold;
  color: #000; /* צבע טקסט רגיל */
  background-color: #ffffff; /* צבע רקע רגיל */
  border-radius: 8px; /* עיגול פינות חזק יותר */
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.github-button:hover {
  background-color: #ffffff; /* צבע רקע חדש במעבר עכבר */
  color: #000; /* צבע טקסט חדש במעבר עכבר */
  transform: scale(1.15); /* מגדיל את הכפתור יותר במעבר עכבר */
}

.github-button:active {
  background-color: #000; /* צבע רקע בעת לחיצה */
  transform: scale(0.9); /* מקטין מעט את הכפתור בעת לחיצה */
}

/* מצב בהיר */
.light-mode {
  background-color: #ffffff;
  color: #000000;
}

/* מצב כהה */
.dark-mode {
  background-color: #000;
  color: #ffffff;
}

/* עיצוב הכפתור */
.theme-button {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 10px 20px;
  font-size: 16px;
  background-color: #000;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.theme-button:hover {
  background-color: #000;
  transform: scale(1.1);
}

/* עיצוב כללי לטופס יצירת קשר */
#contact {
  padding: 2rem 1rem;
  background-color: #000;
  color: #fff;
  text-align: center;
}

#contact h2 {
  margin-bottom: 1.5rem;
  font-size: 2rem;
  color: #f8f9fa;
}

/* עיצוב טופס */
#contact-form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#contact-form label {
  text-align: left;
  color: #adb5bd;
}

#contact-form input,
#contact-form textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #495057;
  border-radius: 5px;
  background-color: #212529;
  color: #f8f9fa;
}

#contact-form button {
  padding: 0.75rem;
  background-color: #ffffff;
  color: #000;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#contact-form button:hover {
  background-color: #ffffff;
  transform: scale(1.15); /* מגדיל את הכפתור יותר במעבר עכבר */
}

/* הודעת אישור */
#confirmation-message {
  margin-top: 1rem;
  color: #4caf50;
  font-weight: bold;
}

#confirmation-message {
  display: none; /* מוסתר כברירת מחדל */
  color: #4caf50; /* ירוק להודעה חיובית */
  font-weight: bold;
  text-align: center;
  margin-top: 1rem;
}

/* עיצוב הספינר */
#loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#loading-spinner p {
  margin-top: 10px;
  font-size: 16px;
  color: #007bff;
}

h1,
h2,
h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 700; /* עובי כבד */
}

p {
  font-family: "Poppins", sans-serif;
  font-weight: 300; /* עובי קל */
}

h1 {
  font-size: 2.5rem;
}

p {
  font-size: 1rem;
}

.section-divider {
  height: 5px;
  background-color: #00d4ff;
  margin: 50px 0;
}
#About {
  background: url("background-image.jpg") no-repeat center center/cover;
  color: #ffffff;
  padding: 50px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.7);
}
#About h1 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 2.8rem;
  margin-bottom: 30px;
}
#About p {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.8;
  margin-bottom: 20px;
}
#About .container {
  max-width: 1200px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
#About img {
  max-width: 300px;
  border-radius: 15px;
  margin-left: 30px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  border: 3px solid #ffffff;
}
#About .highlight {
  color: #00d4ff;
  font-weight: bold;
}
#About .text-content {
  flex: 1;
  padding-right: 20px;
}

.section-divider {
  height: 5px;
  background-color: #ffffff;
  margin: 50px 0;
  border-radius: 2px; /* מוסיף עיגול קל */
}
#About {
  background: url("background-image.jpg") no-repeat center center/cover;
  color: #ffffff;
  padding: 50px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.7);
}
#About h1 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 2.8rem;
  margin-bottom: 30px;
}
#About p {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.8;
  margin-bottom: 20px;
}
#About .text-content {
  flex: 1;
  padding-left: 0px; /* Reduce or remove left padding to move text left */
  padding-right: 50px; /* Optional: Increase right padding for more spacing */
  text-align: left; /* Ensure text alignment stays on the left */
}

#About .container {
  max-width: 1200px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 20px; /* Push the entire content closer to the left */
}

#About img {
  max-width: 300px;
  border-radius: 15px;
  margin-left: 50px; /* Spacing between text and image */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  border: 3px solid #ffffff;
}

#About .highlight {
  color: #00d4ff;
  font-weight: bold;
}

/* CSS */
#Front {
  font-family: "Poppins", sans-serif;
  background-color: #000; /* רקע שחור */
  color: #fff; /* טקסט לבן */
  padding: 60px 60px; /* יותר מרווח אנכי */
  margin-bottom: 60px;
  border-radius: 15px;
  text-align: center;
  /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 2px solid #ddd; /* אם תרצה מסגרת, אפשר להשאיר או להסיר */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* הכותרת */
#Front h1 {
  font-size: 3rem;
  font-weight: bold;
  color: #fff; /* ודא שזה לבן במקום אפור */
  text-transform: uppercase;
  margin-bottom: 30px;
  letter-spacing: 2px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

/* הפסקאות */
#Front p.lead {
  font-size: 1.2rem;
  line-height: 1.8;
  color: #fff; /* שים לב שעידכנו ללבן במקום #555555 */
  margin-bottom: 20px;
}

/* טקסט אזהרה או הדגשה */
#Front .text-warning {
  color: #00d4ff !important;
  font-weight: bold;
  margin-bottom: 20px;
}

/*#top {
  position: fixed; /* החלק העליון נשאר קבוע */
/*top: 0; /* ממוקם בחלק העליון של העמוד */
/*width: 100%; /* מכסה את כל רוחב הדף */
/*z-index: 1000; /* מבטיח שהחלק יופיע מעל כל אלמנט אחר */
/*height: 80px; /* גובה הניווט */
/*}*/

.logo-img {
  height: 50px; /* גודל הלוגו */
  width: auto; /* שימור פרופורציות */
  transition: transform 0.3s ease, filter 0.3s ease; /* מעבר חלק */
}

.logo-img:hover {
  transform: scale(1.1); /* הגדלה עדינה של הלוגו */
  filter: drop-shadow(0 4px 6px rgba(255, 255, 255, 0.4)); /* הוספת צל זוהר */
}

.nav-pills .nav-link {
  color: white;
  font-weight: 500;
  transition: color 0.3s, background-color 0.3s, transform 0.3s;
  background-color: transparent;
  border-radius: 5px; /* מעוגל קל */
}

.nav-pills .nav-link.active {
  background-color: #ffffff;
  color: #000;
  border-radius: 5px;
}

.nav-pills .nav-link:hover {
  background-color: white; /* רקע לבן */
  color: black; /* טקסט שחור */
  transform: scale(1.1); /* אפקט הגדלה */
  box-shadow: 0 4px 8px white; /* הוספת צל */
}

#hero-section {
  position: relative;
  height: 100vh; /* למילוי מסך מלא */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* הסתרת אלמנטים שיוצאים מחוץ לגבולות */
}

.background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* הסרטון יתפרש לפי גודל הקונטיינר */
  z-index: -1; /* דואג שהסרטון יהיה מאחורי התוכן */
}

#hero-section .content {
  position: relative;
  z-index: 1; /* דואג שהטקסט יהיה מעל הסרטון */
  text-align: center;
  color: white; /* צבע הטקסט */
}

@media (max-width: 900px) {
  .main {
    grid-template-columns: 1fr;
  }

  .project-card {
    margin: 10px auto;
  }
}

@media (max-width: 600px) {
  body {
    padding: 16px;
  }

  .header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .project-image1 {
    width: 100%;
  }

  .fact-form input,
  .fact-form select {
    width: 100%;
  }

  .fact {
    flex-direction: column;
    align-items: stretch;
  }
}

.update-sticker {
  position: absolute;
  top: 20px; /* מתאים למרחק מהכותרת */
  left: 50%; /* מרכז את הסטיקר */
  transform: translateX(-50%); /* ממרכז לפי האמצע */
  background-color: #ff5722; /* צבע אדום יותר רך */
  color: white;
  padding: 5px 10px; /* התאמה לגודל קומפקטי יותר */
  font-size: 12px; /* טקסט קטן יותר */
  font-weight: bold;
  border-radius: 5px; /* קצוות מעוגלים */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* צל עדין */
  z-index: 1000; /* מופיע מעל אלמנטים אחרים */
}

body .top_line {
  margin: 0;
  padding: 0;
  padding-top: 80px; /* התאמה לגובה הניווט */
  position: fixed;
  top: 0;
  height: 35px;
  color: #fff;
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  justify-content: center;
  background-color: #000;
  font-size: 16px;
  gap: 36px;
  top: 0;
  font-weight: 700;
  transition: 0.4s all;
}

.top_line {
  font-size: 48px; /* גודל הטקסט */
  font-weight: bold; /* עובי הטקסט */
  text-align: center; /* מיקום הטקסט */
  color: #fff; /* צבע בסיס לטקסט */
  text-transform: uppercase; /* אותיות גדולות */
  background: linear-gradient(90deg, #ffffff, #ffffff, #ffffff, #ffffff);
  background-clip: text;
  -webkit-text-fill-color: transparent; /* הפיכת הטקסט לשקוף */
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(0, 0, 0, 0),
    0 0 30px rgba(0, 0, 0, 0);
  animation: glow 3s infinite alternate; /* אנימציית זוהר */
}

/* אנימציה של זוהר */
@keyframes glow {
  0% {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(0, 0, 0, 0),
      0 0 30px rgba(0, 0, 0, 0);
  }
  100% {
    text-shadow: 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(0, 0, 0, 0),
      0 0 40px rgba(0, 0, 0, 0);
  }
}

/* Hide navigation bar and keep logo for small screens */
@media (max-width: 600px) {
  .logo {
    margin: 0 auto; /* Center the logo */
    display: flex;
    justify-content: center;
  }

  #top {
    justify-content: center; /* Center content within the top section */
  }
}

#hero-section {
  position: relative;
  width: 100%;
  height: auto; /* Automatically adjust height based on content */
  overflow: hidden; /* Prevents overflow of image content */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black; /* Fallback background */
  padding-top: 60px; /* Adds space between the header and the hero section */
  z-index: 1;
}

#hero-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  /* החלף את ה-background-color בגרדיאנט או תמונה 
  background: url("./images/main_back2.jpg") no-repeat center center;*/
  background-size: cover; /* מתאים את התמונה לשטח הסקשן */
  background-attachment: fixed; /* מאפשר Parallax קליל */
  position: relative;
  padding: 6rem 2rem; /* במקום 2rem אפשר 6rem או יותר */
  gap: 2rem;
  height: 100vh; /* לוקח את כל גובה המסך */
}

/*
#hero-section::before {
  content: "";
  position: absolute;
  inset: 0; 
  background: rgba(0, 0, 0, 0.5); 
  z-index: 0;
}
*/

.background-image {
  width: 100%;
  height: auto;
  max-height: 100vh; /* Ensure the image doesn't exceed viewport height */
  object-fit: cover; /* Ensures the image covers the section */
  object-position: center; /* Centers the image */
}

/* For smaller screens (phones and tablets) */
@media (max-width: 768px) {
  #hero-section {
    height: auto; /* Let the section height adjust to content */
    padding-top: 50px; /* Adjust padding to provide space on small screens */
    margin: 0; /* Remove extra margins */
  }

  .background-image {
    width: 100%; /* Ensure the image spans the full width */
    height: auto; /* Let the height scale automatically */
    object-fit: contain; /* Ensure the entire image is visible */
    object-position: center; /* Center the image for smaller screens */
  }
}

#hero-section {
  margin-top: 80px; /* הוספת מרווח מתחת לניווט */
}

#top {
  position: fixed; /* נשאר מקובע בראש הדף */
  top: 0;
  width: 100%;
  z-index: 1000;
  background-color: transparent !important; /* הגדרה לשקיפות */
  /*background-color: #000 !important;*/
  height: 80px; /* הגובה הרצוי לניווט */
}

.background-image {
  width: 100%;
  height: auto;
  max-height: calc(100vh - 60px); /* התאמת גובה התמונה מתחת לניווט */
  object-fit: cover; /* התאמת התמונה לקונטיינר */
  object-position: center; /* מיקום מרכזי של התמונה */
}

@keyframes slideInFromBottom {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.slide-in-bottom {
  animation: slideInFromBottom 1s ease-in-out;
}

.zoom-on-hover {
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.zoom-on-hover:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.pulse-animation {
  animation: pulse 2s infinite;
}

:root {
  --primary-color: #888;
  --secondary-color: #ffffff;
  --background-color: #000000;
}

.hero-content {
  flex: 1;
  max-width: 50%;
  color: var(--secondary-color);
  text-align: left;
  margin-left: auto; /* מוודא שהתוכן לא צמוד לשמאל */
  margin-left: auto; /* מוודא שהתוכן לא צמוד לשמאל */
  margin-right: auto; /* מרכז את התוכן */
  padding-left: 20px; /* הוספת רווח בצד שמאל */
  max-width: 600px; /* הגדרת רוחב מקסימלי */
}

.hero-title {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
  margin-left: auto; /* מוודא שהתוכן לא צמוד לשמאל */
}

.hero-title .name {
  color: var(--secondary-color);
}

.hero-description {
  font-size: 1.2rem;
  line-height: 1.6;
}

.hero-image {
  flex: 1;
  max-width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-image img {
  width: 250px;
  height: 250px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--secondary-color);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-image img:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.8);
}

.hero-image {
  position: relative;
  flex: 1;
  max-width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-image::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: var(--secondary-color);
  opacity: 0.1; /* שכבה שקופה */
  z-index: -1; /* מאחורי התמונה */
}

.btn-cta {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: white;
  color: #fff;
  border-radius: 25px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.btn-cta:hover {
  background-color: #000; /* גוון אחר */
  transform: scale(1.05);
}

/* התאמות למסכים קטנים */
@media (max-width: 768px) {
  #hero-section {
    flex-direction: column;
    text-align: center;
  }

  .hero-content {
    max-width: 100%;
  }

  .hero-image {
    max-width: 100%;
  }

  .hero-title {
    font-size: 2rem;
  }

  .hero-description {
    font-size: 1rem;
  }

  .hero-image img {
    width: 200px;
    height: 200px;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 1.8rem;
  }

  .hero-description {
    font-size: 0.9rem;
  }

  .hero-image img {
    width: 150px;
    height: 150px;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes typing {
  0% {
    width: 0;
  }
  80% {
    width: 100%;
  }
  100% {
    width: 0; /* החזרת הרוחב לאפס בסוף */
  }
}

@keyframes blink {
  0%,
  100% {
    border-color: transparent;
  }
  50% {
    border-color: white;
  }
}

.hero-title .name,
.hero-description {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid;
  animation: typing 4s steps(20, end) infinite, blink 0.5s step-end infinite;
  animation-delay: 1s; /* הפסקה של שנייה בין חזרות */
}

.hero-content {
  animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  opacity: 0;
  transition: opacity 0.5s ease-in;
}

.fade-in.visible {
  opacity: 1;
}

.button:active {
  transform: scale(0.95);
}

.about-title {
  height: 100px;
  line-height: 100px; /* התאמה לגובה האלמנט */
  text-align: center; /* מרכז את הטקסט אופקית */
}

/* 1) הגדרות בסיסיות ל-header ולקונטיינר */
.header {
  position: fixed; /* נשארת למעלה אם תרצה */
  top: 0;
  width: 100%;
  z-index: 1000;
  background-color: #000; /* או שקוף, או כל צבע אחר */
  height: 80px; /* גובה הרצוי של הניווט */
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between; /* לוגו משמאל, תפריט מימין */
  height: 100%;
  padding: 0 1rem; /* ריווח פנימי */
}

/* 2) הלוגו */
.logo img {
  height: 50px;
  width: auto;
}

/* 3) כפתור המבורגר - בהתחלה מוסתר במסכים גדולים */
.menu-icon {
  display: none; /* יהיה none בברירת מחדל */
  cursor: pointer;
  width: 30px;
  height: 24px;
  position: relative; /* או absolute - בהתאם ל-layout */
  z-index: 9999;
  flex-shrink: 0;
}

/* עיצוב 3 הפסים */
.menu-icon span {
  display: block;
  width: 100%;
  height: 3px;
  background: #fff;
  margin-bottom: 5px;
  transition: 0.3s;
}

/*
.nav-container {
  display: flex; /* מציג את ה-UL inline במסכים גדולים */
/*}

.nav-container ul {
  list-style: none;
  display: flex;
  gap: 1rem; /* רווח בין הלינקים */
/* margin: 0;
  padding: 0;
}

.nav-container li a {
  text-decoration: none;
  color: #fff; /* טקסט לבן */
/* font-weight: bold;
}

/* כפתור ההמבורגר והתפריט מוסתרים כברירת מחדל */
.ham-menu,
.off-screen-menu {
  display: none; /* מוסתר כברירת מחדל */
}

/* מדיה קוורי למסכים קטנים */
@media (max-width: 768px) {
  /* הצגת כפתור ההמבורגר */
  .ham-menu {
    display: block; /* כפתור ההמבורגר מופיע במסכים קטנים */
  }

  /* התאמת תפריט הצד */
  .off-screen-menu {
    display: flex; /* התפריט יפעל במסכים קטנים */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    right: -450px; /* תפריט מוסתר מחוץ למסך */
    height: 100vh;
    width: 100%;
    max-width: 300px; /* רוחב התפריט */
    background-color: rgba(34, 37, 49, 0.95); /* צבע רקע כהה */
    transition: 0.3s ease;
    z-index: 9999;
  }

  .off-screen-menu.active {
    right: 0; /* התפריט מופיע כאשר הוא פעיל */
  }

  .navbar-toggler {
    display: block !important; /* מציג את כפתור ההמבורגר */
  }

  .navbar-collapse {
    display: none !important; /* מסתיר את התפריט כברירת מחדל */
  }

  .navbar-collapse.show {
    display: block !important; /* מציג את התפריט כאשר הוא פעיל */
  }
}

@media (max-width: 600px) {
  #top {
    position: relative;
    height: auto;
    min-height: 60px; /* שיהיה מספיק מקום */
    overflow: visible;
  }

  .menu-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    display: block;
    z-index: 9999;
  }
  /* כשהתפריט מקבל מחלקה show (JavaScript), הוא יוצג */
  .nav-container.show {
    display: flex; /* מחזיר את ה-flex */
  }

  .navbar-toggler {
    display: block !important;
  }

  .navbar-collapse {
    display: none !important;
  }

  .navbar-collapse.show {
    display: block !important;
  }

  .off-screen-menu {
    background-color: rgba(34, 37, 49);
    height: 100vh;
    width: 100%;
    max-width: 450px;
    position: fixed;
    top: 0;
    right: -450px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 3rem;
    transition: 0.3s ease;
  }

  .off-screen-menu.active {
    right: 0;
  }
  nav {
    padding: 1rem;
    display: flex;
    background-color: rgb(34, 37, 49);
  }

  .ham-menu {
    height: 50px;
    width: 50px;
    margin-left: auto;
    position: relative;
  }
  .ham-menu span {
    position: absolute;
    display: block;
    height: 5px;
    width: 100%;
    background-color: #fff;
    border-radius: 25px;
    transition: 0.3s;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.3s ease;
  }
  .ham-menu span:nth-child(1) {
    top: 25%;
  }
  .ham-menu span:nth-child(3) {
    top: 75%;
  }

  .ham-menu.active span:nth-child(1) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .ham-menu.active span:nth-child(2) {
    opacity: 0;
  }

  .ham-menu.active span:nth-child(3) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}

/* הגדרת אנימציית פייד אין */
.fade-in {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* כאשר האלמנט נכנס לתצוגה */
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

#particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: black; /* רקע שחור לאפקט */
}

.project-content {
  margin-top: 50px; /* מתאים את המרחק מלמעלה */
  padding: 20px; /* מרווח פנימי */
  text-align: center; /* ממקם את התוכן במרכז */
}

/******************************************************/
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: white;
  text-align: center;
  padding: 15px;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
}

.cookie-banner button {
  background-color: white;
  color: black;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.cookie-banner button:hover {
  background-color: #000;
  color: white;
}

.hidden {
  display: none;
}

.terms_privacy-link {
  color: white;
}

.small-image {
  max-width: 300px; /* הגבלת הרוחב ל-300 פיקסלים */
  height: auto; /* שמירה על פרופורציות */
  display: block; /* מסדר את התמונה בצורה נכונה */
  margin: 0 auto; /* ממרכז את התמונה */
}

.hero-title .name,
.hero-description {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid;
  animation: typing 4s steps(20, end) infinite, blink 0.5s step-end infinite;
  animation-delay: 1s;
}

/* הגדרות בסיסיות לאנימציית הקלדה */
.typing {
  display: inline-block;
  overflow: hidden; /* חותך טקסט שלא נכנס ברוחב האלמנט */
  white-space: nowrap; /* מונע ירידת שורה */
  border-right: 2px solid #fff; /* הסמן המהבהב */
  box-sizing: border-box;
  width: 0; /* מתחילים עם 0 כדי ליצור אפקט הקלדה */
  vertical-align: bottom;
}

/* שורה 1: מקלידה טקסט אחד */
.typing.line1 {
  animation: typing1 4s steps(16, end) forwards,
    blink 0.75s infinite step-end alternate;
  /* steps(16, end) – מספיק לתווים ב-"Hey there 👋"
     אפשר להגדיל אם האימוג'י דורש יותר צעדים */
}

/* שורה 2: תתחיל אחרי שהראשונה סיימה (delay), עם steps המתאימים */
.typing.line2 {
  margin-top: 0.8rem; /* רווח ויזואלי בין השורות */
  animation: typing2 4s steps(20, end) forwards,
    blink 0.75s infinite step-end alternate;
  animation-delay: 4.2s;
  /* מחכים קצת יותר מ-4 שניות כדי שהשורה הראשונה תסיים */
}

/* אנימציה מקלידה בין רוחב 0 לרוחב 100% */
@keyframes typing1 {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes typing2 {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* הבהוב של הסמן (border-right) */
@keyframes blink {
  50% {
    border-color: transparent;
  }
}

/* Add this near the bottom of style.css or wherever you keep media queries */
@media (max-width: 768px) {
  /* Center text in hero section */
  #hero-section .hero-content,
  #Front .container,
  #About .container {
    text-align: center;
    margin: 0 auto;
  }

  /* If you want headings and paragraphs centered as well */
  #Front h1,
  #Front p,
  #About h1,
  #About p {
    text-align: center;
  }

  /* Example: ensure hero image is also centered */
  .hero-image {
    margin: 20px auto; /* push the image to center on small screens */
  }
}

.typing.line1 {
  animation: typing1 4s steps(16, end) forwards,
    blink 0.75s infinite step-end alternate;
}

.typing.line2 {
  animation: typing2 4s steps(20, end) forwards,
    blink 0.75s infinite step-end alternate;
  animation-delay: 4.2s;
}

@media (max-width: 768px) {
  /* Speed up the typing animations */
  .typing.line1 {
    animation: typing1 2s steps(16, end) forwards,
      blink 0.75s infinite step-end alternate;
  }

  .typing.line2 {
    animation: typing2 2s steps(20, end) forwards,
      blink 0.75s infinite step-end alternate;
    animation-delay: 2.2s; /* Adjust so line2 starts after line1 finishes */
  }
}

@media (max-width: 600px) {
  h1.display-4,
  h1.hero-title,
  #Front h1 {
    font-size: 1.8rem; /* Smaller font for mobile */
    letter-spacing: normal; /* Remove or reduce spacing */
    line-height: 1.2; /* Tighter line-height so it fits better */
  }
}

#three-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.hero-content,
.hero-image {
  position: relative;
  z-index: 1;
}

/* ===========================
   PROJECT CARDS — DARK THEME
   =========================== */

/* ===== PROJECT CARD STYLING ===== */
.project-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background-color: #000;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.project-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px; /* <-- rounded corners */
  filter: brightness(0.85);
  transition: transform 0.4s ease, filter 0.4s ease;
}

.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff, 0 0 80px #fff; /* <-- much stronger glow */
}

.project-card:hover img {
  filter: brightness(1);
  transform: scale(1.08);
}

.project-card span {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  transition: text-shadow 0.3s;
}

.project-card:hover span {
  text-shadow: 0 0 6px #fff, 0 0 18px #fff, 0 0 36px #fff;
}

/* 1) הפוך את התמונות לרספונסיביות */
.project-card img {
  width: 100%;
  height: auto;
  display: block; /* עוזר למנוע רווחים מוזרים */
}

/* 2) אם הגדרת בכרטיס עצמו min-width ו-height קבועים,
   אפשר להחליף אותם כך (לשימוש גם בדסקטופ):
*/
.project-card {
  width: 100%;
  max-width: 300px; /* אם עדיין תרצה להגביל לרוחב מקסימלי */
  height: auto; /* שחרר גובה קבוע, שהכרטיס יגדל לפי התוכן */
  /* שאר ההגדרות (רקע, הצללה וכו') */
}

/* 3) אם בכל זאת חשוב לך לשמור מראה אחר בדסקטופ, אפשר להוסיף Media Query
   כדי לשנות הגדרות במסכים צרים (נניח מתחת ל-600 פיקסלים):
*/
@media (max-width: 600px) {
  .project-card {
    width: 90%; /* רוחב 90% ממסך הטלפון */
    max-width: 300px; /* או אפשר לוותר עליו לגמרי */
    margin: 0 auto; /* מרכז את הכרטיס */
    height: auto; /* חשוב לשחרר גובה קשיח */
  }

  .project-card img {
    width: 100%;
    height: auto;
  }
}