/* ============================= */
/*          MAIN STYLE           */
/* ============================= */
:root {
    --primary-color: #209de6;
    --secondary-color: #0b232b;
    --text-color: aliceblue;
    --font-family: 'Droid Sans', sans-serif, 'Roboto', 'Montserrat';
}
* {
    box-sizing: border-box;
    font-family: var(--font-family);
}
html {
    height: auto;
    min-height: 100vh;
}
body {
    background-image: url(/resources/images/background.jpg);         
    background-attachment: fixed;
    margin: 0;
    min-height: 100vh;
    height: auto;
    color: var(--text-color);                     
    font-size: 1.2em;
}
.extra-info {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    border-top: 2px solid #0b232b;
    border-bottom: 2px solid #0b232b;
    color: gray;
    font-style: italic;
    padding: 20px;
    margin-top: 15px;
    cursor: pointer;
}
.extra-info span {
    display: inline-block;
    padding: 6px 10px;
    background: rgba(255,255,255,0.02);
    border-radius: 6px;
    font-size: 0.95em;
    color: inherit;
}

/* Optional skills layout: apply class="skills" or combine with extra-info as class="extra-info skills" */
.skills, .extra-info.skills {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    align-items: center;
    padding: 8px 6px;
}
.skills span, .extra-info.skills span {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.025);
    border-radius: 8px;
    font-size: 0.92em;
    color: var(--text-color);
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.skills span:hover, .extra-info.skills span:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.18);
    background: rgba(255,255,255,0.04);
}
.skills span::before, .extra-info.skills span::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--primary-color);
    border-radius: 50%;
    flex: 0 0 6px;
}

/* Responsive: single column on narrow screens */
@media (max-width: 480px) {
    .skills, .extra-info.skills {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .skills span, .extra-info.skills span {
        padding: 8px 10px;
        justify-content: center;
    }
}

#web-content {
    height: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    position: relative;
   
}
.work-details, .achievements-details {
    /* Small descriptive blocks for headings or short paragraphs */
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100% - 12rem);
    text-align: center;
    margin: auto;
    display: block;
    gap: 0.5rem;
    padding: 1.25rem 2rem;
    background: rgba(2, 2, 2, 0.7);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    /* overlay is not a valid CSS property — removed */
    z-index: 1000;
    float: none;
    overflow: auto;
}
/* Close button for panels */
.panel-close {
    position: absolute;
    right: 8px;
    top: 8px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.4em;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 4px;
}
.panel-close:hover {
    background: rgba(255,255,255,0.06);
    font-size: 1.1em;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* Page loader overlay & spinner */
.loader-overlay, #page-loader {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    border-radius: 6px;
    margin-bottom: 8px;
    font-family: inherit;
    z-index: 1200;
}
.loader-overlay {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1400;
}
.loader-overlay .spinner, #page-loader .spinner {
    width: 18px;
    height: 18px;
    border: 3px solid rgba(255,255,255,0.18);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 900ms linear infinite;
    display: inline-block;
}
/* Carousel core */
.carousel { position: relative; overflow: hidden; width: 100%; }
.carousel .slides { display:flex; transition: transform 320ms ease; will-change: transform; }
.carousel .slide { min-width: 100%; box-sizing: border-box; padding: 0.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.carousel .slide img { max-height: 30rem; width: auto; border-radius: 6px; display: block; margin: 0  auto 0.5rem; }
/* Carousel Controls - Navigation Buttons */
.carousel-prev, .carousel-next { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    background: rgba(0,0,0,0.45); 
    color:#fff; 
    border: 1px solid rgba(255,255,255,0.3);
    font-size: clamp(1.2rem, 2vw, 1.6rem); 
    padding: clamp(6px, 1vw, 12px) clamp(8px, 1.2vw, 14px); 
    border-radius: 6px; 
    cursor:pointer; 
    z-index: 1100; 
    transition: all 250ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(36px, 5vw, 48px);
    min-height: clamp(36px, 5vw, 48px);
}
.carousel-prev:hover, .carousel-next:hover { 
    background: rgba(32, 157, 230, 0.6);
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(32, 157, 230, 0.4);
}
.carousel-prev:active, .carousel-next:active {
    transform: translateY(-50%) scale(0.95);
}
.carousel-prev { left: clamp(6px, 2vw, 16px); }
.carousel-next { right: clamp(6px, 2vw, 16px); }

/* Carousel Pagination Dots */
.carousel-dots { 
    position: absolute; 
    bottom: clamp(8px, 2vh, 20px); 
    left: 50%; 
    transform: translateX(-50%); 
    display: flex; 
    gap: clamp(6px, 1.5vw, 12px); 
    z-index: 1100;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 clamp(8px, 2vw, 16px);
    background: rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.carousel-dots button { 
    width: clamp(8px, 1.5vw, 14px); 
    height: clamp(8px, 1.5vw, 14px); 
    border-radius: 50%; 
    border: 2px solid rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.25); 
    cursor: pointer;
    transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}
.carousel-dots button:hover {
    background: rgba(255,255,255,0.5);
    border-color: rgba(255,255,255,0.8);
    transform: scale(1.2);
}
.carousel-dots button.is-active { 
    background: #fff;
    border-color: #fff;
    box-shadow: 0 0 12px rgba(255,255,255,0.6);
}

/* Keep carousel images centered but make captions left-aligned
   Strategy: center the wrapping <figure> by using `width: max-content`,
   so the caption can take the same width as the image and be left-aligned. */
.carousel .slide figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: max-content; /* shrink-wrap to image width */
    margin: 0 auto;     /* center the figure in the slide */
}
.carousel .slide figure figcaption,
.carousel .slide figure .caption {
    width: 100%;        /* match image width */
    text-align: left;   /* left-align caption text */
    margin-top: 0.5rem;
    color: rgba(255,255,255,0.95);
    line-height: 1.3;
}

/* reduce controls on small screens */
@media (max-width: 768px) {
    .carousel-dots {
        bottom: clamp(8px, 3vh, 16px);
        gap: clamp(4px, 1.2vw, 8px);
        padding: clamp(6px, 1.5vw, 12px);
    }
    
    .carousel-dots button {
        width: clamp(6px, 1.2vw, 10px);
        height: clamp(6px, 1.2vw, 10px);
        border-width: 1.5px;
    }
    
    .carousel-dots button:hover {
        transform: scale(1.3);
    }
}

@media (max-width: 480px) {
    .carousel-prev, .carousel-next { 
        font-size: 1rem;
        min-width: clamp(32px, 4vw, 40px);
        min-height: clamp(32px, 4vw, 40px);
        padding: 6px;
    }
    
    .carousel-dots {
        bottom: clamp(6px, 2.5vh, 12px);
        gap: clamp(3px, 1vw, 6px);
        padding: clamp(4px, 1vw, 8px);
    }
    
    .carousel-dots button {
        width: clamp(5px, 1vw, 8px);
        height: clamp(5px, 1vw, 8px);
        border-width: 1px;
    }
}
/* Screen reader only */
.sr-only {
    position: absolute !important;
    height: 1px; width: 1px; overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Overlay used when revealing panels (blur background behind panel) */
.panel-overlay {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.28);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 950;
}
/* Make sure panels render above the overlay */
.work-details, .achievements-details {
    z-index: 1000;
}

#work-button, #achievements-button {
    cursor: pointer;
    padding: 10px 20px;
    background-color: var(--primary-color);
    border: none;
    border-radius: 5px;
    color: var(--text-color);
    font-size: 1em;
    display: inline-flex;
    align-items: flex-start;
    justify-content: left;
    width: 12rem;
}
#work-button:hover, #achievements-button:hover {
    background-color: rgb(33, 150, 243);
    transition: background-color 0.3s ease-in-out;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    /*font-size: 1em;*/
}

/* Slide-in animations */
@keyframes slideInLeft {
    from { transform: translateX(-40px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

@keyframes slideInRight {
    from { transform: translateX(40px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

.slide-hidden {
    opacity: 0;
    transform: translateX(-20px);
}

.slide-in-left {
    animation: slideInLeft 700ms cubic-bezier(.2,.9,.2,1) both;
    animation-delay: var(--delay, 0ms);
}

.slide-in-right {
    animation: slideInRight 700ms cubic-bezier(.2,.9,.2,1) both;
    animation-delay: var(--delay, 0ms);
}

/* Fade-in used when swapping content */
@keyframes fadeInContent {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in {
    animation: fadeInContent 360ms cubic-bezier(.2,.9,.2,1) both;
}

@keyframes fadeOutContent {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(8px); }
}
.fade-out {
    animation: fadeOutContent 260ms cubic-bezier(.2,.9,.2,1) both;
}
/* ============================= */
/*          HEADER & NAV         */
/* ============================= */

header {
    background-color: rgba(11, 35, 43, 0.9);
    padding: 1em;
}
nav {
    display: flex;
    gap: 2rem;
    margin: 0.75rem;
    justify-content: flex-end;
}
nav a {
    color: aliceblue;
    font-size: 1.1em;
    padding: 0.2em 0.4em;
    border-radius: 0.5rem;
    transition: color 0.3s ease-in-out, text-shadow 0.3s ease-in-out;
}
nav a:hover {
    color: rgb(64, 149, 228);
    text-shadow: 0 5px 9px rgba(0, 0, 0.1, 0.4);
}
.main-nav {
    display: flex;
    gap: 2rem;
    margin: 0.75rem;
    justify-content: flex-end;
}
.menu-button {
    display: none;
    background-color: transparent;
    border: none;
    color: aliceblue;
    cursor: pointer;
    font-size: 1.3em;
}
.menu-button:hover {
    color: rgb(180, 209, 236);
    transition: all 0.3s ease-in-out;
}
.mobile-nav {
    display: none;
}
[data-hidden="true"] {
    display: none;
}

/* Override for mobile nav to allow transform-based animation (don't use display:none) */
.mobile-nav[data-hidden="true"] {
    display: flex !important;
    transform: translateY(-200vh);
    pointer-events: none; /* prevent clicks while hidden */
}
.mobile-nav[data-hidden="false"] {
    display: flex !important;
    pointer-events: auto;
}
.header-container {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
}
.main-footer {
    display: flex;
    position: relative;
    background-color: rgba(11, 35, 43, 0.9);
    text-align: center;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border-top: 1px solid rgba(32, 157, 230, 0.2);
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.footer-content p {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
}

.footer-social-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: all 200ms ease;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
}

.footer-social-link:hover {
    color: #fff;
    background: rgba(32, 157, 230, 0.2);
    text-decoration: underline;
}

.footer-separator {
    color: rgba(255, 255, 255, 0.3);
    font-weight: 300;
}

@media (max-width: 768px) {
    .footer-content {
        gap: 0.75rem;
    }
    
    .footer-content p {
        font-size: 0.85rem;
    }
    
    .footer-social-link {
        padding: 0.4rem 0.6rem;
        font-size: 0.9rem;
    }
}
@media screen and (max-width: 768px) {
    .main-nav {
        display: none;
    }
    .menu-button {
        display: block;
        margin-left: auto;
        margin-right: 0;
        font-size: 1.3em;
    }
    /* Hide menu button when mobile nav is open */
    .menu-button[aria-expanded="true"] {
        display: none;
    }
    /* show only the target element when not hidden; more specific selectors are below for mobile nav and others */
    /* more specific mobile-only appearance */
    .mobile-nav[data-hidden="false"] {
        display: flex;
    }
    /* On small screens make panels modal-like: centered, scrollable and
       ensure controls remain visible. Use fixed positioning so panels
       stay centered in the viewport regardless of page scroll. */
    .work-details, .achievements-details, #work-panel, #achivements-panel, #achievements-panel {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: calc(100% - 32px);
        max-width: 820px;
        margin: 0;
        padding: 1rem 1.25rem;
        border-radius: 12px;
        backdrop-filter: blur(6px);
        background: rgba(2, 2, 2, 0.92);
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        z-index: 1300; /* above overlay */
    }
    /* Make sure the panel close control stays visible on top of the panel */
    .work-details .panel-close, .achievements-details .panel-close,
    #work-panel .panel-close, #achivements-panel .panel-close, #achievements-panel .panel-close {
        position: absolute;
        right: 12px;
        top: 10px;
        z-index: 1600 !important; /* ensure it stays above overlay and panel content */
    }
    #work-button, #achievements-button {
        display: inline-flex;
        width: auto;
    }
    .mobile-nav {
        position: fixed;
        left: 0;
        right: 0;
        top: 62px; /* assume header height */
        background-color: rgba(11, 35, 43, 0.98);
        padding: 16px 20px;
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
        display: flex;
        flex-direction: column;
        gap: 12px;
        z-index: 1200;
        transform: translateY(-100%); /* hide above screen */
        transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 300ms ease-in-out;
        opacity: 0;
        pointer-events: none;
    }
    .mobile-nav[data-hidden="false"] {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }
    /* layout change for header on smaller screens */
    .header-container {
        flex-direction: row-reverse;
        align-items: center;
        gap: 8px;
    }
    /* Improve mobile nav anchor touch targets */
    .mobile-nav nav a {
        display: block;
        padding: 10px 14px;
        font-size: 1.2em;
        color: aliceblue;
        border-radius: 6px;
    }
    .mobile-nav nav a:hover {
        background: rgba(255,255,255,0.04);
    }
    .intro {
    width: 100%;
    padding: 1rem;
    margin: auto;
    }
}

/* ============================= */
/*           MAIN SECTION        */
/* ============================= */

main {
    background-color: hsla(202, 69%, 15%, 0.9);
    flex: 1;
    padding: 20px;
}
.intro-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.active {
    border-bottom: 0.3rem solid var(--primary-color);
    box-shadow: 0 6px 14px rgba(0,0,0,0.18);
    transform: translate(0, 0.2rem);
    transition: all 0.3s ease-in-out;
}
.info-sections {
display: flex;
gap: 1rem;
justify-content: space-around;
margin-top: 2rem;
border: 1px solid #0b232b;
padding: 1rem;
width: fit-content;
background-color: rgba(11, 35, 43, 0.8);
}
.welcome {
    display: flex;
    flex-direction: row-reverse;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

/* Professional avatar container used in the intro (always circular) */
.avatar {
    display: flex;
    align-items: center;
    justify-content: start;
    /* smaller on desktop: clamp(min, preferred, max) */
    width: clamp(140px, 40vw, 480px);
    max-width: 48%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    padding: 6px;
    transform-origin: center center;
    /* entrance animation */
    animation: avatar-entrance 520ms cubic-bezier(.2,.9,.2,1) both;
}
.avatar img,
.avatar video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Let textual column grow while avatar keeps a fixed-ish width */
.welcome > :not(.avatar) {
    flex: 1 1 340px;
    min-width: 220px;
}
.welcome .avatar {
    flex: 0 0 clamp(140px, 40vw, 480px);
}

@media (max-width: 768px) {
    .welcome {
        align-items: center;
    }
    .welcome > :not(.avatar) {
        flex: 1 1 100%;
        width: 100%;
    }
    .avatar {
        /* ensure avatar appears above text on mobile */
        order: -1;
        width: 260px;
        max-width: 90%;
        padding: 4px;
    }
}

@media (max-width: 480px) {
    .avatar {
        width: 160px;
        max-width: 100%;
        padding: 2px;
    }
}

@keyframes avatar-entrance {
    from { transform: translateY(10px) scale(.98); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .avatar { animation: none !important; }
}
.intro {
    width: 80%;
    padding: 2rem;
    margin: auto;
}
.card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    text-align: center;
    width: 280px;
}
.card img {
    width: 100%;
    max-height: fit-content;
    height: auto;
    border-radius: 6px;
    object-fit: cover;
    display: block;
}
.card figcaption {
    font-size: 0.95em;
    font-weight: 500;
    color: aliceblue;
    padding: 0.5rem 0;
    line-height: 1.4;
}
.more {
    display: flex;
    justify-content: left;
    gap: 1rem;
    margin-top: 1.5rem;
    flex-direction: row;
    max-width: 100%;
    position: absolute;
    width: fit-content;
}
/* ============================= */
/*           FOOTER              */
/* ============================= */

footer p {
    font-size: 0.8em;
}

/* ============================= */
/*           TEXT STYLE          */
/* ============================= */

h1 {
    font-family: Arial, Helvetica, sans-serif;

    font-size: 1.8em;
    display: inline;
}

h2 {
    text-align: center;
    font-size: 2em;
}

a {
    text-decoration: none;
    font-size: 1.2em;
    color: aliceblue;
}

a:hover {
   /** font-size: 1.3em;*/
    color: rgb(180, 209, 236);
}

p {
    font-size: 1.5em;
}

.description {
    font-size: 1em;
    font-style: italic;
}

/* ============================= */
/*          IMAGES & VIDEO       */
/* ============================= */

/* Make images responsive by default to avoid distortion */
img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    display: inline-block;
    border-radius: 5px;
}

.main-img {
    width: 400px;
    height: 500px;
}

video {
    width: 40vw;
    height: 50vh;
    display: block;
    margin: 20px auto;
}

.logo {
    width: clamp(40px, 4.5vw, 80px);
    height: auto;
    display: block;
    object-fit: contain;
}

.detailedimg {
    width: 640px;
    height: 360px;
    object-fit: cover;
    display: block;
    margin: auto;
}

/* ============================= */
/*           LIST STYLE          */
/* ============================= */

ul {
    list-style: none;
    color: aliceblue;
    font-size: 1.2em;
}

li {
    margin: 15px;
}

ul li::marker {
    content: "⚙️";
    margin: 15px;
}

#bulb::marker {
    content: "💡";
    margin: 10px;
}

#robotarm::marker {
    content: "🦾";
    margin: 10px;
}
#code::marker {
    content: "💻";
    margin: 10px;
}
#plc::marker {
    content: "🤖";
    margin: 10px;
}
#tech::marker {
    content: "🌐";
    margin: 10px;
}
#design::marker {
    content: "🎨";
    margin: 10px;
}
#database::marker {
    content: "🗄️";
    margin: 10px;
}
#system::marker {
    content: "🖥️";
    margin: 10px;
}
#embedded::marker {
    content: "📟";
    margin: 10px;
}
#wrench::marker {
    content: "🔧";
    margin: 10px;
}
/* ============================= */
/*           FORM STYLE          */
/* ============================= */

form {
    padding: 40px;
    box-shadow: 0 0 5px gray;
    display: flex;
    flex-direction: column;
    width: 50%;
    margin: auto;
}

input, textarea {
    margin: 20px 0;
    border-radius: 5px;
    border: 2px solid var(--primary-color);
    padding: 8px;
    background: rgba(11, 35, 43, 0.5);
    color: aliceblue;
}

input:focus, textarea:focus {
    outline: none;
    background: rgba(11, 35, 43, 0.8);
    box-shadow: 0 0 8px rgba(32, 157, 230, 0.4);
}

label {
    font-weight: bold;
    color: aliceblue;
}

button {
    padding: 10px;
    border-radius: 5px;
    border: none;
    background-color: var(--primary-color);
    color: aliceblue;
    cursor: pointer;
    font-size: 1em;
    transition: all 0.3s ease-in-out;
}

button:hover {
    color: rgb(180, 209, 236);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.work-description, .achievements-description {
    display: flex;
    flex-direction: column;
    margin-left: 0;
    padding: 1.2rem;
    font-size: 1em;
    max-width: 50%;
    position: relative;
    }

/* ============================= */
/*       RESPONSIVE MEDIA QUERY  */
/* ============================= */

@media (max-width: 1024px) {
    #web-content {
        max-width: 94%;
    }

    /* Extra-info: make chips wrap and size for larger tablets */
    .extra-info {
        gap: 10px;
    }
    .extra-info span {
        flex: 1 1 220px;
    }

    nav {
        gap: 1rem;
    }

    h1 {
        font-size: 40px;
    }

    h2 {
        font-size: 1.8em;
    }

    .welcome, .card {
        gap: 0.75rem;
    }

    .card {
        width: 240px;
    }

    img {
        width: 200px;
        height: auto;
    }

    video {
        width: 80%;
        height: auto;
    }

    ul {
        width: 100%;
    }
}

@media (max-width: 768px) {
    /* Responsive adjustments for .info-sections */
    .info-sections {
        flex-direction: column;
        gap: 1rem;
        padding: 0.75rem;
        margin-top: 1rem;
    }
    .info-sections > * {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    header {
        padding: 20px;
    }

    nav {
        flex-direction:column;
        gap: 10px;
        align-items: center;
        justify-content: center;
    }

    h1 {
        font-size: 32px;
        text-align: center;
    }

    h2 {
        font-size: 1.6em;
    }

    .welcome, .card {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .card {
        width: 200px;
    }
    .card img {
        width: 100%;
        height: auto;
    }

    /* Tablet adjustments: scale and center images/video/avatar/cards inside .welcome */
    .welcome {
        justify-content: center;
        align-items: center;
    }
    .welcome img,
    .welcome .card img,
    .welcome .avatar img,
    .welcome video {
        width: 100%;
        max-width: 520px; /* allow larger images on tablets */
        height: auto;
        display: block;
        margin: 0 auto;
    }
    .welcome .avatar {
        width: clamp(140px, 30vw, 320px);
        max-width: 85%;
        margin: 0 auto 0.6rem;
        padding: 4px;
    }
    .welcome .card {
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
    }

    /* Extra-info: two-column layout on small tablets */
    .extra-info {
        justify-content: center;
        padding: 12px;
        gap: 8px;
    }
    .extra-info span {
        flex: 1 1 calc(50% - 8px);
        text-align: center;
    }

    /* Make description blocks full-width on small screens */
    .work-details, .achievements-details {
        width: 100%;
        padding: 1rem;
    }
    /* reduce slide distance on small screens to avoid large motion */
    @keyframes slideInLeft {
        from { transform: translateX(-18px); opacity: 0; }
        to   { transform: translateX(0); opacity: 1; }
    }
    @keyframes slideInRight {
        from { transform: translateX(18px); opacity: 0; }
        to   { transform: translateX(0); opacity: 1; }
    }

    img {
        width: 150px;
        height: auto;
    }

    video {
        width: 100%;
        height: auto;
    }

    ul {
        width: 100%;
        padding: 0 10px;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 1em;
    }

    header {
        padding: 15px;
    }

    h1 {
        font-size: 28px;
    }

    h2 {
        font-size: 1.4em;
    }

    nav {
        gap: 8px;
    }

    .card {
        width: 160px;
    }
    .card img {
        width: 100%;
        height: auto;
    }
    .card figcaption {
        font-size: 0.85em;
    }

    img {
        width: 120px;
        height: auto;
    }

    /* Extra-info: stack chips full-width on narrow screens */
    .extra-info {
        gap: 6px;
        padding: 10px;
    }
    .extra-info span {
        flex: 1 1 100%;
        text-align: center;
    }


    video {
        width: 100%;
        height: auto;
    }

    form {
        padding: 20px;
    }

    input, textarea {
        margin: 10px 0;
    }

    button {
        width: 100%;
    }
}
.main-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    margin-left: 0;
    margin-top: 0;
}
.main-logo a {
    color: inherit;
    text-decoration: none;
}
.main-logo h1 {
    margin: 0;
    font-size: clamp(1.1rem, 2.4vw, 2rem);
    line-height: 1;
}

/* Mobile-specific adjustments for the logo/header */
@media (max-width: 768px) {
    .main-logo {
        flex-direction: column;
        gap: 6px;
        align-items: center;
    }
    .main-logo h1 {
        text-align: center;
        font-size: 1.4rem;
    }
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
    .slide-in-left, .slide-in-right, .fade-in, .fade-out, .loader-overlay .spinner, .spinner {
        animation: none !important;
        transition: none !important;
    }
}
.mobile-close {
    position: absolute;
    right: 14px;
    top: 8px;
    background: transparent;
    border: none;
    color: aliceblue;
    font-size: 1.5em;
    cursor: pointer;
    padding: 6px 10px;
}
.mobile-close:hover { background: rgba(255,255,255,0.04); }

/* Ensure mobile navigation close button stays pinned to the right of the mobile nav */
#mobile-nav .mobile-close {
    position: absolute;
    right: 12px;
    top: 10px;
    z-index: 1300;
}

/* ============================= */
/*       ABOUT SECTION - 2 COL   */
/* ============================= */
.about-container {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    padding: 2rem;
    max-width: 1600px;
    margin: 0 auto;
}

.about-container h2 {
    font-size: clamp(1.8em, 5vw, 2.5em);
    margin: 0 0 1.5rem 0;
    color: var(--primary-color);
    text-transform: capitalize;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.about-column {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.about-column:first-child {
    justify-content: center;
}

.about-column img {
    width: 100%;
    max-width: 380px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    object-fit: cover;
}

.about-column img:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 32px rgba(32, 157, 230, 0.5);
}

.about-column p {
    line-height: 1.85;
    text-align: left;
    color: var(--text-color);
    font-size: clamp(0.95em, 2vw, 1.1em);
    letter-spacing: 0.3px;
    word-spacing: 0.1em;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-left: 4px solid var(--primary-color);
    border-radius: 8px;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.about-column p:hover {
    background: rgba(255, 255, 255, 0.04);
    border-left-color: #00d4ff;
}

/* Tablet: adjust gap and layout */
@media (max-width: 1024px) {
    .about-container {
        padding: 1.5rem;
        gap: 2rem;
    }
    
    .about-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        align-items: center;
    }
    
    .about-column {
        padding: 0.5rem;
    }
    
    .about-column p {
        padding: 1.5rem;
    }
}

/* Mobile: single column, more compact */
@media (max-width: 768px) {
    .about-container {
        padding: 1rem;
        gap: 1.5rem;
    }
    
    .about-container h2 {
        margin-bottom: 1rem;
    }
    
    .about-content {
        gap: 1.5rem;
    }
    
    .about-column img {
        max-width: 100%;
        width: 100%;
    }
    
    .about-column p {
        padding: 1.25rem;
        font-size: 0.95em;
        line-height: 1.8;
    }
}

/* Small mobile: very compact */
@media (max-width: 480px) {
    .about-container {
        padding: 0.75rem;
        gap: 1rem;
        max-width: 100%;
        overflow-x: hidden;
    }
    
    .about-container h2 {
        font-size: 1.5em;
        margin-bottom: 0.75rem;
    }
    
    .about-column {
        padding: 0;
        overflow: hidden;
    }
    
    .about-column img {
        width: 100%;
        max-width: none;
    }
    
    .about-column p {
        padding: 1rem;
        font-size: 0.9em;
        line-height: 1.75;
        border-left-width: 3px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }
}

/* ============================= */
/*       CONTACT PAGE STYLE      */
/* ============================= */
.contact-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    min-height: calc(100vh - 300px);
}

.contact-header {
    text-align: center;
    margin-bottom: 1rem;
}

.contact-header h2 {
    font-size: 2.5rem;
    margin: 0 0 0.5rem 0;
    color: var(--text-color);
}

.contact-header p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.contact-content {
    display: flex;
    justify-content: center;
    width: 100%;
}

.contact-form-card {
    background: rgba(11, 35, 43, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 2.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(32, 157, 230, 0.2);
    width: 100%;
    max-width: 480px;
}

.contact-form {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 1.8rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    position: relative;
}

.form-label {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 0.5rem;
    transition: color 200ms ease;
}

.form-input,
.form-textarea {
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: var(--text-color);
    padding: 0.75rem 0 0.75rem 0.75rem;
    font-size: 1rem;
    font-family: inherit;
    transition: all 200ms ease;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.form-input:focus,
.form-textarea:focus {
    background: rgba(255, 255, 255, 0.08);
}

.form-input:focus ~ .form-underline,
.form-textarea:focus ~ .form-underline,
.form-input:hover ~ .form-underline,
.form-textarea:hover ~ .form-underline {
    transform: scaleX(1);
}

.form-underline {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary-color);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 300ms ease;
}

.submit-button {
    background: linear-gradient(135deg, var(--primary-color) 0%, #1a7dbf 100%);
    color: white;
    border: none;
    padding: 0.9rem 2rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 300ms ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(32, 157, 230, 0.3);
    margin-top: 1rem;
    width: 100%;
}

.submit-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(32, 157, 230, 0.5);
    background: linear-gradient(135deg, #1a7dbf 0%, var(--primary-color) 100%);
}

.submit-button:active:not(:disabled) {
    transform: translateY(0);
}

.submit-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.form-status {
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 300ms ease, min-height 300ms ease;
}

.form-status.show {
    opacity: 1;
    min-height: auto;
}

.success-message,
.error-message {
    padding: 1rem;
    border-radius: 8px;
    margin: 0 0 1rem 0;
    font-weight: 500;
}

.success-message {
    background: rgba(76, 175, 80, 0.15);
    color: #4caf50;
    border-left: 4px solid #4caf50;
}

.error-message {
    background: rgba(244, 67, 54, 0.15);
    color: #f44336;
    border-left: 4px solid #f44336;
}

.form-notice {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 1rem;
    margin-bottom: 0;
    text-align: center;
}

.submit-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(32, 157, 230, 0.3);
}

/* Contact Form Responsive Design */
@media (min-width: 768px) {
    .contact-form-card {
        max-width: 520px;
    }
}

@media (min-width: 1024px) {
    .contact-form-card {
        max-width: 580px;
    }
}

@media (max-width: 768px) {
    .contact-container {
        padding: 1.5rem;
        gap: 1.5rem;
    }
    
    .contact-header h2 {
        font-size: 1.8rem;
    }
    
    .contact-form-card {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .contact-container {
        padding: 1rem;
    }
    
    .contact-header h2 {
        font-size: 1.5rem;
    }
    
    .contact-header p {
        font-size: 0.95rem;
    }
    
    .contact-form-card {
        padding: 1.25rem;
        max-width: 100%;
    }
    
    .form-input,
    .form-textarea {
        padding: 0.6rem 0;
    }
    
    .submit-button {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
    }
}

/* ============================= */
/*      PORTFOLIO PAGE STYLE     */
/* ============================= */

.portfolio-section {
    padding: 2rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.portfolio-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.portfolio-section h2 {
    margin-top: 0;
    color: var(--text-color);
    font-size: 2em;
    text-align: center;
}

.portfolio-section h3 {
    color: var(--primary-color);
    margin: 3rem 0 2rem 0;
    font-size: 1.5em;
    text-align: center;
}

.portfolio-section h4 {
    color: var(--primary-color);
    margin: 0 0 0.5rem 0;
    font-size: 1.25em;
}

.portfolio-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 2rem 0;
    align-items: start;
}

.portfolio-2col-reverse {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 2rem 0;
    align-items: start;
}

.portfolio-2col-reverse > :first-child {
    order: 2;
}

.portfolio-2col-reverse > :last-child {
    order: 1;
}

.portfolio-text-block p {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin: 0 0 1rem 0;
}

.portfolio-text-block p:last-child {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
}

.portfolio-card-grid {
    display: grid;
    gap: 1rem;
}

.portfolio-card {
    background: linear-gradient(135deg, rgba(32, 157, 230, 0.15) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-left: 4px solid var(--primary-color);
    padding: 1.5rem;
    border-radius: 8px;
    backdrop-filter: blur(10px);
}

.portfolio-card.variant-1 {
    border-left-color: var(--primary-color);
    background: linear-gradient(135deg, rgba(32, 157, 230, 0.15) 0%, rgba(118, 75, 162, 0.1) 100%);
}

.portfolio-card.variant-2 {
    border-left-color: #f5576c;
    background: linear-gradient(135deg, rgba(240, 147, 251, 0.1) 0%, rgba(245, 87, 108, 0.08) 100%);
}

.portfolio-card.variant-2 h4 {
    color: #f5576c;
}

.portfolio-card.variant-3 {
    border-left-color: #00f2fe;
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.1) 0%, rgba(0, 242, 254, 0.08) 100%);
}

.portfolio-card.variant-3 h4 {
    color: #00f2fe;
}

.portfolio-card.variant-4 {
    border-left-color: #fa709a;
    background: linear-gradient(135deg, rgba(250, 112, 154, 0.1) 0%, rgba(254, 225, 64, 0.08) 100%);
}

.portfolio-card.variant-4 h4 {
    color: #fa709a;
}

.portfolio-card.variant-5 {
    border-left-color: #30cfd0;
    background: linear-gradient(135deg, rgba(48, 207, 208, 0.1) 0%, rgba(51, 8, 103, 0.08) 100%);
}

.portfolio-card.variant-5 h4 {
    color: #30cfd0;
}

.portfolio-card.variant-6 {
    border-left-color: #a8edea;
    background: linear-gradient(135deg, rgba(168, 237, 234, 0.1) 0%, rgba(254, 214, 227, 0.08) 100%);
}

.portfolio-card.variant-6 h4 {
    color: #a8edea;
}

.portfolio-card h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1em;
}

.portfolio-card p {
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    font-size: 0.95em;
}

.portfolio-intro-box {
    background: linear-gradient(135deg, rgba(32, 157, 230, 0.08) 0%, rgba(11, 35, 43, 0.4) 100%);
    border: 1px solid rgba(32, 157, 230, 0.2);
    padding: 2rem;
    border-radius: 12px;
    margin: 2rem 0;
    backdrop-filter: blur(10px);
}

.portfolio-intro-box p {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
    margin: 0 0 1rem 0;
}

.portfolio-intro-box p:last-child {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
}

.portfolio-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.portfolio-product-card {
    background: linear-gradient(135deg, rgba(32, 157, 230, 0.1) 0%, rgba(11, 35, 43, 0.3) 100%);
    border: 1px solid rgba(32, 157, 230, 0.3);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    backdrop-filter: blur(10px);
}

.portfolio-product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(32, 157, 230, 0.2);
}

.portfolio-product-card img {
    width: 100%;
    height: auto;
    max-height: 280px;
    object-fit: contain;
    display: block;
    background: linear-gradient(135deg, rgba(32, 157, 230, 0.15), rgba(11, 35, 43, 0.2));
    padding: 1rem;
    box-sizing: border-box;
}

.portfolio-product-content {
    padding: 1.5rem;
}

.portfolio-product-content h4 {
    color: var(--primary-color);
    margin: 0 0 0.5rem 0;
    font-size: 1.25em;
}

.portfolio-badge {
    display: inline-block;
    background: rgba(32, 157, 230, 0.2);
    color: var(--primary-color);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.85em;
    margin-bottom: 1rem;
    border: 1px solid rgba(32, 157, 230, 0.3);
}

.portfolio-product-content p {
    font-size: 0.95em;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

.portfolio-product-content ul {
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 1rem 0;
    padding-left: 1.5rem;
    line-height: 1.6;
}

.portfolio-tech-block {
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 8px;
    border-left: 3px solid var(--primary-color);
}

.portfolio-tech-block p {
    margin: 0;
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.7);
}

.portfolio-tech-block strong {
    color: rgba(255, 255, 255, 0.9);
}

.portfolio-philosophy-box {
    background: linear-gradient(135deg, rgba(32, 157, 230, 0.12) 0%, rgba(11, 35, 43, 0.35) 100%);
    border: 1px solid rgba(32, 157, 230, 0.25);
    border-radius: 12px;
    padding: 2rem;
    margin: 3rem 0;
    backdrop-filter: blur(10px);
}

.portfolio-philosophy-box h4 {
    color: var(--primary-color);
    margin-top: 0;
    font-size: 1.2em;
}

.portfolio-philosophy-box p {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
    margin: 0;
}

.portfolio-expertise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.portfolio-expertise-item {
    background: linear-gradient(135deg, rgba(32, 157, 230, 0.1) 0%, rgba(118, 75, 162, 0.08) 100%);
    border: 1px solid rgba(32, 157, 230, 0.2);
    padding: 1.5rem;
    border-radius: 10px;
    backdrop-filter: blur(10px);
}

.portfolio-expertise-item h4 {
    color: var(--primary-color);
    margin: 0 0 1rem 0;
    font-size: 1.05em;
}

.portfolio-expertise-item p {
    font-size: 0.95em;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    line-height: 1.6;
}

.portfolio-img-full {
    width: 100%;
    max-width: 100%;
    border-radius: 12px;
    margin-top: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Portfolio Responsive Design */
@media (max-width: 1024px) {
    .portfolio-2col,
    .portfolio-2col-reverse {
        grid-template-columns: 1fr;
    }
    
    .portfolio-2col-reverse > :first-child {
        order: 0;
    }
    
    .portfolio-2col-reverse > :last-child {
        order: 0;
    }
}

@media (max-width: 768px) {
    .portfolio-section {
        padding: 1.5rem 0;
    }
    
    .portfolio-container {
        padding: 0 1rem;
    }
    
    .portfolio-section h2 {
        font-size: 1.5em;
        margin: 1.5rem 0;
    }
    
    .portfolio-section h3 {
        font-size: 1.25em;
        margin: 1.5rem 0 1rem 0;
    }
    
    .portfolio-section h4 {
        font-size: 1em;
    }
    
    .portfolio-section p {
        font-size: 0.95em;
    }
    
    .portfolio-2col,
    .portfolio-2col-reverse {
        gap: 1.5rem;
    }
    
    .portfolio-product-grid {
        grid-template-columns: 1fr;
    }
    
    .portfolio-intro-box {
        padding: 1.5rem;
        margin: 1.5rem 0;
    }
    
    .portfolio-philosophy-box {
        padding: 1.5rem;
        margin: 1.5rem 0;
    }
    
    .portfolio-card {
        padding: 1rem;
    }
    
    .portfolio-expertise-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .portfolio-section {
        padding: 1rem 0;
    }
    
    .portfolio-container {
        padding: 0 0.75rem;
    }
    
    .portfolio-section h2 {
        font-size: 1.25em;
        margin: 1rem 0;
    }
    
    .portfolio-section h3 {
        font-size: 1.1em;
        margin: 1.5rem 0 1rem 0;
    }
    
    .portfolio-section h4 {
        font-size: 0.95em;
        margin: 0 0 0.25rem 0;
    }
    
    .portfolio-section p {
        font-size: 0.9em;
        line-height: 1.5;
    }
    
    .portfolio-2col,
    .portfolio-2col-reverse {
        gap: 1rem;
        margin: 1.5rem 0;
    }
    
    .portfolio-product-grid {
        gap: 1rem;
    }
    
    .portfolio-product-card img {
        max-height: 200px;
        padding: 0.75rem;
    }
    
    .portfolio-product-content {
        padding: 1rem;
    }
    
    .portfolio-intro-box,
    .portfolio-philosophy-box {
        padding: 1rem;
        margin: 1.5rem 0;
    }
    
    .portfolio-card {
        padding: 0.75rem;
    }
    
    .portfolio-expertise-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .portfolio-expertise-item {
        padding: 1rem;
    }
    
    .portfolio-img-full {
        max-height: 200px;
        margin-top: 1rem;
    }
    
    /* Disable hover effects on touch devices */
    @media (hover: none) {
        .portfolio-product-card {
            transform: none;
            box-shadow: none;
        }
    }
}

/* ============================= */
/*     NOTIFICATION POPUP       */
/* ============================= */
.notification-popup {
    position: fixed;
    top: 20px;
    right: 20px;
    max-width: 400px;
    padding: 16px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 2000;
    animation: slideInRight 300ms ease-out;
    font-weight: 500;
    font-size: 0.95em;
}

.notification-popup.success {
    background: linear-gradient(135deg, #4caf50, #45a049);
    color: #fff;
    border-left: 4px solid #2e7d32;
}

.notification-popup.error {
    background: linear-gradient(135deg, #f44336, #e53935);
    color: #fff;
    border-left: 4px solid #c62828;
}

.notification-popup.info {
    background: linear-gradient(135deg, #2196f3, #1976d2);
    color: #fff;
    border-left: 4px solid #0d47a1;
}

.notification-popup-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.notification-popup-icon {
    font-size: 1.3em;
    flex-shrink: 0;
}

.notification-popup-message {
    flex: 1;
    line-height: 1.4;
}

.notification-popup-close {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 1.2em;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 200ms ease;
}

.notification-popup-close:hover {
    background: rgba(0, 0, 0, 0.1);
}

.notification-popup.fade-out {
    animation: slideOutRight 300ms ease-in forwards;
}

@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

/* Responsive notifications */
@media (max-width: 480px) {
    .notification-popup {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
    
    @keyframes slideInRight {
        from {
            transform: translateY(-100px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    @keyframes slideOutRight {
        from {
            transform: translateY(0);
            opacity: 1;
        }
        to {
            transform: translateY(-100px);
            opacity: 0;
        }
    }
}

/* ============================= */
/*          END OF FILE         */