/*
   Theme: Cyberpunk / Modern Dark
   Primary Colors: Deep Blue, Neon/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&family=Rubik:wght@300;400;500;700&display=swap');

:root {
    --primary-color: #00f0ff;
    --secondary-color: #7000ff;
    --accent-color: #ff0055;
    --dark-bg: #0a0a12;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --text-color: #ffffff;
    --transition-speed: 0.3s;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Rubik', sans-serif;
}

/* Hebrew Font Support - Now Global so redundant */
/* [lang="he"] * {
    font-family: 'Rubik', sans-serif;
} */

/* RTL Mode Base Styles */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

/* Header RTL fixes - Force English Layout (LTR) */
[dir="rtl"] header,
[dir="rtl"] .glass-header,
[dir="rtl"] nav {
    direction: ltr !important;
    text-align: left;
    font-family: 'Rubik', sans-serif;
}

[dir="rtl"] .logo {
    /* Logo stays on right or moves to left? Standard Hebrew sites: Logo on Right (Start), Nav on Left (End).
       Flexbox with 'space-between' handles this automatically!
       Logo is first child -> Right side. Nav is last -> Left side.
       So no specific change needed for layout, just ensure padding/margins.
    */
}

[dir="rtl"] .nav-links {
    gap: 2rem;
    /* Restore standard gap */
}

[dir="rtl"] .nav-links li {
    margin: 0;
    /* Reset manual margins */
}

[dir="rtl"] .nav-links li:last-child {
    margin: 0;
}

[dir="rtl"] .nav-links a::after {
    left: 0;
    right: auto;
    /* Reset underline position */
}

/* Hero RTL */
[dir="rtl"] #hero {
    flex-direction: row-reverse;
    /* Flip content and image */
    text-align: right;
}

/* About RTL */
[dir="rtl"] .profile-image-container {
    /* If row, image first (Right), text second (Left). Correct. */
}

/* Contact Form RTL */
[dir="rtl"] input,
[dir="rtl"] textarea {
    text-align: right;
    direction: rtl;
}

[dir="rtl"] .link-arrow {
    display: inline-block;
}

/* Flip arrows if needed, but standard arrow might be okay or need flip */
[dir="rtl"] .link-arrow {
    transform: scaleX(-1);
    /* Flip arrow horizontally */
}

/* Language Toggle Button */
.lang-toggle-container {
    display: flex;
    align-items: center;
    margin-left: 1rem;
    /* Space from nav links */
}

[dir="rtl"] .lang-toggle-container {
    margin-left: 0;
    margin-right: 1rem;
    /* Space from nav links */
}

.lang-btn {
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    padding: 0.3rem 0.8rem;
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 20px;
    transition: all 0.3s;
    font-family: 'Rubik', sans-serif;
    /* Monospaced-ish look */
}

.lang-btn:hover {
    background: var(--primary-color);
    color: var(--dark-bg);
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--dark-bg);
    color: var(--text-color);
    overflow-x: hidden;
    line-height: 1.6;
}

/* Background Animation */
.background-globes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.globe {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.6;
    animation: float 10s infinite ease-in-out alternate;
}

.globe-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--primary-color), transparent);
    top: -100px;
    left: -100px;
}

.globe-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--secondary-color), transparent);
    bottom: -150px;
    right: -150px;
    animation-delay: -5s;
}

.globe-3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--accent-color), transparent);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.3;
}

@keyframes float {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(30px, 50px);
    }
}

/* Header & Nav */
.glass-header {
    background: rgba(10, 10, 18, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--glass-border);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    padding: 1rem 5%;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
}

.highlight {
    color: var(--secondary-color);
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 2rem;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    transition: color var(--transition-speed);
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: var(--primary-color);
    transition: width var(--transition-speed);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}

.nav-links a:hover,
.nav-links a.active {
    color: #fff;
}

.hamburger {
    display: none;
    cursor: pointer;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: #fff;
    transition: all 0.3s ease-in-out;
}

/* Sections */
.section {
    padding: 6rem 10%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 3rem;
    text-align: center;
    position: relative;
    display: inline-block;
    align-self: center;
}

.section-title::before {
    content: '';
    position: absolute;
    width: 60px;
    height: 4px;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 2px;
}

/* Hero Section */
#hero {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
}

.hero-content {
    flex: 1;
    max-width: 600px;
    z-index: 2;
}

.hero h1 {
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 1rem;
    background: linear-gradient(to right, #fff, var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.subtitle {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    color: #bbb;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
}

.btn {
    padding: 0.8rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
    cursor: pointer;
    border: none;
    font-size: 1rem;
}

.btn.primary {
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    color: #000;
}

.btn.secondary {
    background: transparent;
    border: 2px solid var(--glass-border);
    color: #fff;
    backdrop-filter: blur(5px);
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 240, 255, 0.2);
}

.hero-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* Image Grid Container */
.image-grid-container {
    width: 500px;
    height: 500px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 0.8rem;
    width: 100%;
    height: 100%;
}

.grid-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    transition: transform 0.3s ease, z-index 0s;
}

.grid-item:hover {
    transform: scale(1.15);
    z-index: 10;
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Gradient fallbacks for grid items */
.grid-item-1 {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.grid-item-2 {
    grid-column: 3 / 5;
    grid-row: 1 / 3;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.grid-item-3 {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.grid-item-4 {
    grid-column: 2 / 3;
    grid-row: 2 / 4;
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.grid-item-5 {
    grid-column: 1 / 2;
    grid-row: 3 / 5;
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.grid-item-6 {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
    background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
}

.grid-item-7 {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.grid-item-8 {
    grid-column: 4 / 5;
    grid-row: 3 / 5;
    background: linear-gradient(135deg, #ff9a56 0%, #ff6a88 100%);
}

.grid-item-9 {
    grid-column: 3 / 4;
    grid-row: 4 / 5;
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}

.grid-item-10 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
}

.floating {
    animation: floating-card 6s ease-in-out infinite;
}

@keyframes floating-card {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

/* About Section */
.about-container {
    display: flex;
    align-items: center;
    gap: 4rem;
}

.profile-image-container {
    flex: 1;
    display: flex;
    justify-content: center;
}

.image-placeholder {
    width: 300px;
    height: 300px;
    border-radius: 20px;
    /* Slightly squarish for modern look */
    background: linear-gradient(135deg, var(--glass-border), rgba(255, 255, 255, 0.02));
    border: 2px dashed rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 0.9rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.image-placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--primary-color);
    opacity: 0.1;
    z-index: -1;
}

/* Profile Image Styling */
#profile-upload-zone {
    width: 300px;
    height: 450px;
    /* 2:3 Aspect Ratio */
    object-fit: cover;
    border-radius: 20px;
    /* Match original placeholder border style */
    border: 2px dashed rgba(255, 255, 255, 0.2);
    /* Add padding so the border doesn't touch the image directly if desired, 
       but typically 'border' on img sits on the edge. 
       If the user wants the exact 'placeholder' look, the border helps. */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

#profile-upload-zone:hover {
    transform: scale(1.05);
    border-color: var(--primary-color);
}

.about-text {
    flex: 2;
}

.about-text h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.about-text p {
    margin-bottom: 1.5rem;
    color: #ccc;
}

.skills-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.skill-tag {
    background: rgba(255, 255, 255, 0.05);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    font-size: 0.9rem;
    color: var(--secondary-color);
}

/* Portfolio Section */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.project-card {
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.4s ease;
    display: flex;
    flex-direction: column;
}

.project-card:hover {
    transform: translateY(-10px);
}

.project-image {
    height: 200px;
    background-color: #1a1a24;
    /* Placeholder color before image */
    background-image: linear-gradient(45deg, #1f1f2e 25%, transparent 25%, transparent 75%, #1f1f2e 75%, #1f1f2e),
        linear-gradient(45deg, #1f1f2e 25%, transparent 25%, transparent 75%, #1f1f2e 75%, #1f1f2e);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}

.project-info {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.project-info h3 {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}

.project-info p {
    color: #aaa;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.link-arrow {
    margin-top: auto;
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: margin-left 0.2s;
}

.link-arrow:hover {
    margin-left: 5px;
}

/* Contact Section */
.contact-form {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #ddd;
    font-weight: 500;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    transition: border-color var(--transition-speed);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--secondary-color);
}

.full-width {
    width: 100%;
}

/* Footer */
footer {
    padding: 2rem 5%;
    text-align: center;
    border-top: 1px solid var(--glass-border);
    background: rgba(10, 10, 18, 0.9);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.social-links {
    display: flex;
    gap: 1.5rem;
}

.social-links a {
    color: #aaa;
    text-decoration: none;
    transition: color 0.3s;
}

.social-links a:hover {
    color: var(--secondary-color);
}

/* Interactivity (Scroll Reveal) */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Media Queries */
@media screen and (max-width: 768px) {
    #hero {
        flex-direction: column-reverse;
        text-align: center;
    }

    .hero-content {
        margin-top: 2rem;
    }

    .nav-links {
        display: none;
    }

    .hamburger {
        display: block;
    }

    .about-container {
        flex-direction: column;
        text-align: center;
    }

    .skills-grid {
        justify-content: center;
    }

    .footer-content {
        flex-direction: column;
        gap: 1rem;
    }

    .image-grid-container {
        width: 90vw;
        height: 90vw;
        max-width: 400px;
        max-height: 400px;
    }
}

/* Form Message Styles */
.form-message {
    margin-top: 1rem;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    min-height: 1.5rem;
}

.form-message.success {
    color: #00ff88;
    /* Green for success */
}

.form-message.error {
    color: #ff3333;
    /* Red for error */
}