/* Fonts - Premium Apple Style */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;900&display=swap');

:root {
    --bg-color: #000000;
    --card-bg: #0a0a0a;
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --accent-color: #f00d0d;
    /* Neon Red */
    --accent-secondary: #ff0000;
    /* Fire Orange/Red */
    --gradient-main: linear-gradient(135deg, var(--accent-color), var(--accent-secondary));
    --glass-border: 1px solid #333;
    --transition-speed: 0.3s;
}

body.light-mode {
    --bg-color: #ffffff;
    --card-bg: #f5f5f5;
    --text-primary: #000000;
    --text-secondary: #555555;
    --glass-border: 1px solid #e0e0e0;
}

.theme-toggle {
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    border: 1px solid var(--text-secondary);
    background: transparent;
    color: var(--text-primary);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover {
    background: var(--card-bg);
    color: var(--accent-color);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-primary);
    overflow-x: hidden;
    line-height: 1.6;
}

/* Image Optimization */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

h1,
h2,
h3,
h4 {
    font-family: 'Inter', sans-serif;
    text-transform: none;
    letter-spacing: -0.04em;
    /* Tighter tracking like image */
    font-weight: 800;
    /* Bolder headers */
}

/* Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

.section-padding {
    padding: 100px 0;
}

/* Improve touch targets for mobile */
@media (hover: none) and (pointer: coarse) {

    .btn,
    .portfolio-item,
    .client-logo,
    .nav-links a,
    .theme-toggle,
    .menu-toggle {
        -webkit-tap-highlight-color: rgba(255, 0, 0, 0.1);
        touch-action: manipulation;
    }
}

/* Arabic Font */
/* Arabic Font - Premium Tech Style */
/* Arabic Font - SF Arabic Style (Technical/Modern) */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

/* RTL Base Styles */
html[dir="rtl"] body {
    font-family: 'SFArabic', 'IBM Plex Sans Arabic', sans-serif;
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .hero h1,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4 {
    font-family: 'SFArabic', 'IBM Plex Sans Arabic', sans-serif;
    letter-spacing: 0 !important;
    line-height: 1.4;
    font-weight: 700;
}

/* RTL Hero Section */
html[dir="rtl"] .hero-grid {
    flex-direction: row-reverse;
}

html[dir="rtl"] .hero-content {
    text-align: right;
}

html[dir="rtl"] .hero-actions {
    flex-direction: row-reverse;
}

html[dir="rtl"] .glass-box>div {
    flex-direction: row-reverse;
}

/* RTL Navigation */
html[dir="rtl"] nav .container {
    flex-direction: row-reverse;
}

html[dir="rtl"] .nav-links {
    flex-direction: row-reverse;
}

html[dir="rtl"] .nav-controls {
    flex-direction: row-reverse;
}

/* RTL Timeline */
html[dir="rtl"] .timeline::after {
    right: 50%;
    left: auto;
    margin-right: -1px;
    margin-left: 0;
}

html[dir="rtl"] .left {
    right: 0;
    left: auto;
    text-align: right;
}

html[dir="rtl"] .right {
    right: 50%;
    left: auto;
    text-align: right;
}

html[dir="rtl"] .timeline-item::after {
    left: -10px;
    right: auto;
}

html[dir="rtl"] .left::before {
    left: 30px;
    right: auto;
    border-width: 10px 10px 10px 0;
    border-color: transparent var(--card-bg) transparent transparent;
}

html[dir="rtl"] .right::before {
    right: 30px;
    left: auto;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent var(--card-bg);
}

/* RTL Portfolio */
html[dir="rtl"] .portfolio-overlay {
    align-items: flex-end;
}

html[dir="rtl"] .portfolio-overlay h3,
html[dir="rtl"] .portfolio-overlay p {
    text-align: right;
}

html[dir="rtl"] .play-icon svg {
    margin-right: 4px;
    margin-left: 0;
}

/* RTL Clients Section */
html[dir="rtl"] .clients-grid {
    flex-direction: row-reverse;
}

/* RTL Footer */
html[dir="rtl"] footer {
    text-align: center;
}

html[dir="rtl"] footer>div {
    flex-direction: row-reverse;
}

/* RTL Buttons */
html[dir="rtl"] .btn {
    direction: rtl;
}

/* RTL Section Titles */
html[dir="rtl"] .section-title,
html[dir="rtl"] .section-subtitle {
    text-align: center;
}

/* RTL Contact Section */
html[dir="rtl"] #contact {
    text-align: center;
}

html[dir="rtl"] #contact p {
    direction: rtl;
}

html[dir="rtl"] #contact i {
    margin-left: 8px;
    margin-right: 0;
}

/* Language Toggle */
#lang-toggle {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
}

/* Gradient Text */
.gradient-text {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.btn {
    display: inline-block;
    padding: 15px 35px;
    background: var(--gradient-main);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    border-radius: 50px;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    cursor: pointer;
}

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

/* Mobile Nav Toggle */
.menu-toggle {
    display: none;
    font-size: 1.5rem;
    color: var(--text-primary);
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
}

.nav-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Navigation */
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px 0;
    z-index: 1000;
    background: var(--bg-color);
    border-bottom: 1px solid #222;
}

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

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 40px;
    width: auto;
    object-fit: contain;
}

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

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

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

/* Hero Section */
/* Hero Section */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    background-color: var(--bg-color);
    overflow: hidden;
    padding-top: 120px;
}

.hero::before {
    display: none;
}

/* Hero Grid Layout */
.hero-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
}

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

.hero-image {
    flex: 1;
    display: flex;
    justify-content: center;
    position: relative;
    animation: float 6s ease-in-out infinite;
}

.hero-image img {
    max-width: 400px;
    width: 100%;
    height: auto;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

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

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

.hero h1 {
    font-size: 4rem;
    line-height: 1.1;
    margin-bottom: 20px;
    font-weight: 900;
}

.hero p {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 40px;
    max-width: 600px;
}

.glass-box {
    background: var(--card-bg);
    border: 1px solid #333;
    padding: 30px;
    border-radius: 20px;
    display: inline-block;
    margin-top: 20px;
}

/* Experience Section */
.experience {
    background-color: var(--bg-color);
}

.section-title {
    font-size: 3rem;
    margin-bottom: 60px;
    text-align: center;
}

.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.timeline::after {
    content: '';
    position: absolute;
    width: 2px;
    background: var(--glass-border);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1px;
}

.timeline-item {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
}

.timeline-item::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    right: -10px;
    background-color: var(--accent-color);
    border: 4px solid var(--bg-color);
    top: 15px;
    border-radius: 50%;
    z-index: 1;
}

.left {
    left: 0;
}

.right {
    left: 50%;
}

.left::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 30px;
    border: medium solid var(--card-bg);
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent var(--card-bg);
}

.right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 30px;
    border: medium solid var(--card-bg);
    border-width: 10px 10px 10px 0;
    border-color: transparent var(--card-bg) transparent transparent;
}

.right::after {
    left: -10px;
}

.content {
    padding: 20px 30px;
    background-color: var(--card-bg);
    position: relative;
    border-radius: 6px;
    border: var(--glass-border);
    transition: transform var(--transition-speed);
}

.timeline-item:hover .content {
    transform: translateY(-5px);
    border-color: var(--accent-color);
}

.content h2 {
    color: var(--accent-secondary);
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.content h3 {
    font-size: 1.1rem;
    margin-bottom: 10px;
    color: var(--text-primary);
    font-weight: 700;
}

/* Portfolio Grid */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
    gap: 30px;
}

.portfolio-item {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    aspect-ratio: 16/9;
    cursor: pointer;
}

.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.portfolio-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 10%, rgba(0, 0, 0, 0) 60%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Align content to bottom */
    padding: 20px;
    align-items: flex-start;
    /* Left align text */
    opacity: 0;
    /* Hidden by default, shown heavily on hover, or kept subtle? User said "remove cover and put little transparency under button". Actually usually means "gradient at bottom". */
    transition: opacity 0.3s ease;
}

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

/* Make the Play Icon center but only appear on hover, maybe? User said "remove cover". */
/* Let's adjust the overlay to be ALWAYS visible as a subtle gradient, and TEXT appears on hover or is always there? */
/* "Remove the cover that is on it" implies removing the full dark background. */
/* "Put just a little transparency under the button" -> usually means under the text/action area. */

/* REVISED STRATEGY based on "Remove cover... put little transparency under" */
/* Portfolio Overlay - Linear Gradient Bottom */
.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    /* Transparent by default */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Text at bottom */
    align-items: flex-start;
    /* Text at left */
    padding: 30px;
    opacity: 0;
    transition: all 0.3s ease;
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
    /* Subtle gradient from bottom */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0) 100%);
}

.portfolio-item:hover img {
    transform: scale(1.1);
    filter: none;
}

/* Text Styling for Bottom Layout */
.portfolio-overlay h3 {
    margin-top: 0;
    font-size: 1.4rem;
    color: #fff;
    text-align: left;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.portfolio-overlay p {
    font-size: 1rem;
    color: #ddd;
    text-align: left;
    margin-bottom: 0;
    transform: translateY(20px);
    transition: transform 0.3s ease 0.1s;
}

.portfolio-item:hover h3,
.portfolio-item:hover p {
    transform: translateY(0);
}

/* Play Icon - Centered or Top Right? 
   In bottom layout, play icon usually floats or sits above text. 
   Let's keep it consistent with the "Original" but maybe positioned differently if text is at bottom?
   Actually, let's just make the play icon disappear or stay centered?
   If I put justify-content: flex-end, the play icon will be at the bottom too.
   Let's move 'play-icon' to be absolute centered if we want it centered, OR let it sit above text.
   Let's let it sit above text for now as part of the flow.
*/
/* Hidden Work Items */
.hidden-work {
    display: none;
}

/* Show More Button */
#show-more-btn {
    min-width: 200px;
    margin-top: 20px;
}

.fade-in {
    animation: fadeIn 0.5s ease forwards;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.play-icon svg {
    width: 24px;
    height: 24px;
    fill: #fff;
    margin-left: 4px;
}

/* Hero Actions Container */
.hero-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

/* Hero Instagram Link */
.hero-insta-link {
    font-size: 2rem;
    color: var(--text-secondary);
    transition: color 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.hero-insta-link:hover {
    color: var(--accent-color);
    transform: scale(1.1);
}

/* Footer Social Icons */
.footer-social-link {
    color: #fff;
    /* Default white for dark mode */
    font-size: 1.5rem;
    margin: 0 10px;
    transition: color 0.3s ease;
    text-decoration: none;
}

body.light-mode .footer-social-link {
    color: #000;
    /* Black for light mode */
}

.footer-social-link:hover {
    color: var(--accent-color) !important;
    /* Force Red on Hover */
}

/* Footer */
footer {
    padding: 50px 0;
    text-align: center;
    border-top: var(--glass-border);
    color: var(--text-secondary);
}

/* Animation Classes */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

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

/* Responsive */
/* Tablet Landscape and Small Desktops */
@media screen and (max-width: 1024px) {
    .container {
        padding: 0 30px;
    }

    .section-padding {
        padding: 80px 0;
    }

    .hero h1 {
        font-size: 3.5rem;
    }

    .section-title {
        font-size: 2.5rem;
    }

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

/* Tablet Portrait */
@media screen and (max-width: 900px) {
    .hero h1 {
        font-size: 3rem;
    }

    .hero p {
        font-size: 1.1rem;
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .glass-box {
        padding: 25px;
    }
}

/* Mobile and Small Tablets */
@media screen and (max-width: 768px) {
    .menu-toggle {
        display: block;
    }

    .container {
        padding: 0 20px;
    }

    .section-padding {
        padding: 60px 0;
    }

    .nav-links {
        display: flex;
        position: fixed;
        top: 0;
        right: -100%;
        width: 75%;
        height: 100vh;
        background: var(--bg-color);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: right 0.3s ease, left 0.3s ease;
        border-left: 1px solid #333;
        z-index: 999;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
    }

    .nav-links.active {
        right: 0;
    }

    .nav-links li {
        margin: 20px 0;
        width: 100%;
        text-align: center;
    }

    .hero {
        padding-top: 80px;
        min-height: 100vh;
        height: auto;
    }

    .hero-grid {
        flex-direction: column-reverse;
        text-align: center;
        padding-top: 40px;
        gap: 30px;
    }

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

    .hero-image {
        margin-bottom: 20px;
        justify-content: center;
    }

    .hero-image img {
        max-width: 250px;
    }

    .hero h1 {
        font-size: 2.5rem;
        margin-bottom: 15px;
    }

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

    .hero p {
        font-size: 1rem;
        margin-bottom: 30px;
    }

    .hero-actions {
        justify-content: center;
        flex-wrap: wrap;
    }

    .section-title {
        font-size: 2.2rem;
        margin-bottom: 40px;
    }

    .timeline::after {
        left: 31px;
    }

    .timeline-item {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }

    .timeline-item::before {
        left: 60px;
        border: medium solid white;
        border-width: 10px 10px 10px 0;
        border-color: transparent white transparent transparent;
    }

    .left::after,
    .right::after {
        left: 21px;
    }

    .right {
        left: 0%;
    }

    .content {
        padding: 20px;
    }

    .content h2 {
        font-size: 1.3rem;
    }

    .content h3 {
        font-size: 1rem;
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .portfolio-item {
        aspect-ratio: 16/9;
    }

    .portfolio-overlay {
        padding: 20px;
    }

    .portfolio-overlay h3 {
        font-size: 1.2rem;
    }

    .portfolio-overlay p {
        font-size: 0.9rem;
    }

    .glass-box {
        padding: 20px;
        margin-top: 15px;
    }

    .glass-box>div {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px !important;
    }

    .glass-box h3 {
        font-size: 1.5rem;
    }

    .btn {
        padding: 12px 28px;
        font-size: 0.95rem;
    }

    /* RTL Support for Mobile Menu */
    html[dir="rtl"] .nav-links {
        right: auto;
        left: -100%;
        border-left: none;
        border-right: 1px solid #333;
    }

    html[dir="rtl"] .nav-links.active {
        left: 0;
        right: auto;
    }

    html[dir="rtl"] .hero-grid {
        flex-direction: column-reverse;
    }

    html[dir="rtl"] .hero-content {
        text-align: center;
    }

    html[dir="rtl"] .hero-actions {
        justify-content: center;
        flex-direction: row-reverse;
    }

    html[dir="rtl"] .timeline::after {
        right: 31px;
        left: auto;
    }

    html[dir="rtl"] .timeline-item {
        padding-right: 70px;
        padding-left: 25px;
    }

    html[dir="rtl"] .timeline-item::before {
        right: 60px;
        left: auto;
        border-width: 10px 0 10px 10px;
        border-color: transparent transparent transparent white;
    }

    html[dir="rtl"] .left::after,
    html[dir="rtl"] .right::after {
        right: 21px;
        left: auto;
    }

    html[dir="rtl"] .content {
        text-align: right;
    }

    html[dir="rtl"] .portfolio-overlay {
        align-items: flex-start;
    }

    html[dir="rtl"] .portfolio-overlay h3,
    html[dir="rtl"] .portfolio-overlay p {
        text-align: right;
    }
}

/* Small Mobile Devices */
@media screen and (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    .section-padding {
        padding: 50px 0;
    }

    .hero {
        padding-top: 70px;
    }

    .hero h1 {
        font-size: 2rem;
        line-height: 1.2;
    }

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

    .hero p {
        font-size: 0.95rem;
        margin-bottom: 25px;
    }

    .hero-image img {
        max-width: 180px;
    }

    .hero-actions {
        gap: 15px;
    }

    .hero-insta-link {
        font-size: 1.5rem;
    }

    .section-title {
        font-size: 1.8rem;
        margin-bottom: 30px;
    }

    .content {
        padding: 15px 20px;
    }

    .content h2 {
        font-size: 1.1rem;
        margin-bottom: 8px;
    }

    .content h3 {
        font-size: 0.95rem;
    }

    .content p {
        font-size: 0.9rem;
    }

    .portfolio-grid {
        gap: 15px;
    }

    .portfolio-overlay {
        padding: 15px;
    }

    .portfolio-overlay h3 {
        font-size: 1.1rem;
    }

    .portfolio-overlay p {
        font-size: 0.85rem;
    }

    .glass-box {
        padding: 15px;
    }

    .glass-box h3 {
        font-size: 1.3rem;
    }

    .glass-box span {
        font-size: 0.85rem !important;
    }

    .btn {
        padding: 10px 22px;
        font-size: 0.85rem;
        letter-spacing: 0.5px;
    }

    #show-more-btn {
        min-width: 160px;
        padding: 12px 25px;
    }
}

/* Extra Small Devices */
@media screen and (max-width: 360px) {
    .hero h1 {
        font-size: 1.75rem;
    }

    .section-title {
        font-size: 1.6rem;
    }

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

    .btn {
        padding: 10px 20px;
        font-size: 0.8rem;
    }

    .portfolio-overlay h3 {
        font-size: 1rem;
    }
}

/* Clients Section */
.clients-section {
    background-color: var(--bg-color);
    padding-bottom: 50px;
    /* Adjust padding to fit between Hero and Experience */
    position: relative;
    z-index: 2;
}

.clients-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 60px;
}

.section-subtitle {
    text-align: center;
    color: var(--accent-color);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.client-logo {
    height: 80px;
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.client-logo img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    /* Default: White for Dark Mode */
    filter: grayscale(100%) brightness(1000%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

/* Hover: Turn Red */
.client-logo:hover img {
    /* Filter to generate Red (#ff0000) */
    filter: brightness(0) saturate(100%) invert(18%) sepia(90%) saturate(6382%) hue-rotate(355deg) brightness(91%) contrast(124%);
    opacity: 1;
}

.client-logo:hover {
    transform: scale(1.1);
}

/* Light Mode: Default to Dark Gray/Black */
body.light-mode .client-logo img {
    filter: grayscale(100%) brightness(0);
    opacity: 0.8;
}

/* Light Mode Hover: Still Red */
body.light-mode .client-logo:hover img {
    filter: brightness(0) saturate(100%) invert(18%) sepia(90%) saturate(6382%) hue-rotate(355deg) brightness(91%) contrast(124%);
    opacity: 1;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .clients-grid {
        gap: 30px;
    }

    .client-logo {
        height: 60px;
        width: 120px;
    }
}

/* Video Modal */
.video-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
}

.video-modal.show {
    display: flex;
    animation: fadeIn 0.3s ease-in-out;
}

.modal-content {
    position: relative;
    width: 85%;
    max-width: 900px;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    /* border-radius removed, handled by parent */
}

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

.close-modal {
    position: absolute;
    top: -40px;
    right: 0;
    color: #fff;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    line-height: 1;
}

.close-modal:hover,
.close-modal:focus {
    color: var(--accent-color);
    text-decoration: none;
    cursor: pointer;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media screen and (max-width: 768px) {
    .modal-content {
        width: 95%;
    }
}



/* Portfolio Show More Overlay - Premium Design */
.portfolio-show-more-overlay {
    position: relative;
    margin-top: -200px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;

    /* Glassmorphism Effect */
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.3) 0%,
            rgba(0, 0, 0, 0.85) 50%,
            rgba(0, 0, 0, 0.95) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);

    /* Border and Shadow */
    border-radius: 20px;
    border: 1px solid rgba(255, 0, 0, 0.2);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light Mode Overlay */
body.light-mode .portfolio-show-more-overlay {
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 255, 255, 0.9) 50%,
            rgba(255, 255, 255, 0.95) 100%);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.portfolio-show-more-overlay:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 0, 0, 0.4);
    box-shadow:
        0 30px 80px rgba(255, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Overlay Content Container */
.overlay-content {
    text-align: center;
    padding: 40px;
    position: relative;
    z-index: 11;
}

/* Overlay Icon */
.overlay-icon {
    font-size: 4rem;
    color: var(--accent-color);
    margin-bottom: 20px;
    animation: pulseIcon 2s ease-in-out infinite;
}

@keyframes pulseIcon {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

.overlay-content h3 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 10px;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.overlay-content p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-bottom: 30px;
    font-weight: 500;
}

/* Premium Button Style */
.btn-premium {
    background: var(--gradient-main);
    color: #fff;
    padding: 18px 45px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 10px 30px rgba(255, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent);
    transition: left 0.5s ease;
}

.btn-premium:hover::before {
    left: 100%;
}

.btn-premium:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow:
        0 15px 40px rgba(255, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-premium:active {
    transform: translateY(-1px) scale(1.02);
}

/* Hide overlay when expanded */
.portfolio-show-more-overlay.hidden {
    display: none;
    opacity: 0;
    pointer-events: none;
}

/* Hidden portfolio items */
.hidden-work {
    display: none;
    position: relative;
    z-index: 1;
}

/* Animations for new items */
.portfolio-item.fade-in {
    animation: fadeInScale 0.6s ease-in-out forwards;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Navigation Redesign - Apple Style */
nav {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1000px;
    padding: 10px 0;
    z-index: 10000;
    /* Increased z-index */

    /* Glass Effect */
    background: rgba(15, 15, 15, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);

    /* Borders & Rounding */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;

    /* Shadow */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scrolled State (Smaller, more opaque) */
nav.scrolled {
    top: 10px;
    padding: 8px 0;
    width: 85%;
    background: rgba(10, 10, 10, 0.85);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Hover Effect on the Bar itself */
nav:hover {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    transform: translateX(-50%) translateY(-2px);
}

/* Nav Container adjustments */
nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 25px;
    /* Internal padding */
}

/* Light Mode Overrides */
body.light-mode nav {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

body.light-mode nav.scrolled {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.05);
}

/* Logo resizing for new propertions */
.logo img {
    height: 35px;
    transition: transform 0.3s;
}

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

/* Navigation Links Updates */
.nav-links {
    gap: 10px;
}

.nav-links a {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.nav-links a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

body.light-mode .nav-links a:hover {
    color: #000;
    background: rgba(0, 0, 0, 0.08);
}

/* Active Link Indicator (Optional idea, keeping simple for now) */

/* Mobile Responsiveness adjustments */
@media screen and (max-width: 768px) {
    nav {
        width: 95%;
        top: 10px;
        padding: 8px 0;
        border-radius: 20px;
    }

    nav .container {
        padding: 0 15px;
    }

    nav.scrolled {
        width: 95%;
        top: 8px;
        padding: 6px 0;
    }

    .logo img {
        height: 30px;
    }

    .nav-links {
        width: 100%;
        max-width: 280px;
        right: -120%;
        top: 60px;
        height: auto;
        padding: 25px;
        border-radius: 18px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(10, 10, 10, 0.95);
        backdrop-filter: blur(20px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
        gap: 5px;
    }

    .nav-links li {
        margin: 10px 0;
    }

    .nav-links a {
        font-size: 0.9rem;
        padding: 10px 20px;
        display: block;
    }

    body.light-mode .nav-links {
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(0, 0, 0, 0.1);
    }

    .nav-links.active {
        right: 50%;
        transform: translateX(50%);
    }

    .theme-toggle {
        padding: 8px;
        font-size: 0.85rem;
    }

    .theme-toggle i {
        font-size: 1rem;
    }

    .nav-controls {
        gap: 10px;
    }
}

@media screen and (max-width: 480px) {
    nav {
        width: 96%;
        top: 8px;
        padding: 6px 0;
    }

    nav .container {
        padding: 0 12px;
    }

    .logo img {
        height: 28px;
    }

    .nav-links {
        max-width: 250px;
        padding: 20px;
        top: 55px;
    }

    .nav-links a {
        font-size: 0.85rem;
        padding: 8px 16px;
    }

    .theme-toggle {
        padding: 6px;
        font-size: 0.8rem;
    }

    .nav-controls {
        gap: 8px;
    }
}

/* Animated Premium Background */
.animated-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    background-color: #050505;
    /* Deep Black Base */
}

/* Light Mode Override for Background */
body.light-mode .animated-bg {
    background-color: #f5f5f5;
}

.blob {
    position: absolute;
    filter: blur(80px);
    opacity: 0.6;
    animation: floatBackground 10s infinite alternate cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Top Right Red Glow (Like the image) */
.blob-1 {
    top: -100px;
    right: -100px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(160, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 70%);
    animation-delay: 0s;
}

/* Bottom Left Glow */
.blob-2 {
    bottom: -150px;
    left: -150px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(120, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 70%);
    animation-delay: -5s;
    animation-duration: 15s;
}

/* Center-ish subtle accent */
.blob-3 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 70%);
    animation-name: pulseCenter;
    animation-duration: 8s;
}

/* Light Mode Blobs - softer grey/red */
body.light-mode .blob-1 {
    background: radial-gradient(circle, rgba(200, 200, 200, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
}

body.light-mode .blob-2 {
    background: radial-gradient(circle, rgba(255, 200, 200, 0.6) 0%, rgba(255, 255, 255, 0) 70%);
}

@keyframes floatBackground {
    0% {
        transform: translate(0, 0) scale(1);
    }

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

@keyframes pulseCenter {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.3;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.1;
    }
}

/* Update main body background to be transparent to show the animated bg */
body {
    background-color: transparent !important;
}

.hero,
.experience,
.clients-section,
footer {
    background-color: transparent !important;
}

/* Card backgrounds need to stay opaque but darker to blend */
body:not(.light-mode) .content,
body:not(.light-mode) .glass-box {
    background: rgba(15, 15, 15, 0.6) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 0, 0, 0.1);
}

/* Responsive Design for Portfolio Overlay */
@media screen and (max-width: 768px) {
    .portfolio-show-more-overlay {
        margin-top: -150px;
        height: 350px;
        border-radius: 15px;
    }

    .overlay-content {
        padding: 30px 20px;
    }

    .overlay-icon {
        font-size: 3rem;
        margin-bottom: 15px;
    }

    .overlay-content h3 {
        font-size: 1.5rem;
        margin-bottom: 8px;
    }

    .overlay-content p {
        font-size: 1rem;
        margin-bottom: 20px;
    }

    .btn-premium {
        padding: 15px 35px;
        font-size: 1rem;
        letter-spacing: 1px;
    }
}

@media screen and (max-width: 480px) {
    .portfolio-show-more-overlay {
        margin-top: -120px;
        height: 300px;
        border-radius: 12px;
    }

    .overlay-content {
        padding: 25px 15px;
    }

    .overlay-icon {
        font-size: 2.5rem;
        margin-bottom: 12px;
    }

    .overlay-content h3 {
        font-size: 1.3rem;
    }

    .overlay-content p {
        font-size: 0.9rem;
        margin-bottom: 18px;
    }

    .btn-premium {
        padding: 12px 30px;
        font-size: 0.9rem;
    }
}