/*
    ========================================
    --- 0. PORTFOLIO PAGE SCOPED STYLES (REFINED V2) ---
    ========================================
    */
    :root { /* Ensure fallback variables are available */
        --primary-color: #3a86ff;
        --text-dark: #1a202c;
        --text-medium: #2c3e50;
        --bg-white: #ffffff;
        --border-color: #e2e8f0;
    }
    .my-portfolio-wrapper { /* RENAMED WRAPPER */
        font-family: 'Poppins', sans-serif;
        background-color: #F5F7FA;
    }
    .my-portfolio-wrapper p {
        font-size: 15px;
        line-height: 1.8;
        color: var(--text-medium);
    }

    /* --- 1. ADVANCED STICKY NAVIGATION TABS --- */
    .my-portfolio-wrapper .portfolio-nav-tabs {
        position: sticky;
        top: 0;
        background-color: rgba(245, 247, 250, 0.8);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        padding: 15px 5%;
        border-bottom: 1px solid var(--border-color);
        z-index: 100;
        display: flex;
        justify-content: center;
        gap: 25px;
        flex-wrap: wrap;
    }
    .my-portfolio-wrapper .nav-tab-item {
        padding: 12px 5px;
        color: var(--text-medium);
        text-decoration: none;
        font-weight: 600;
        font-size: 1rem;
        background-color: transparent;
        position: relative;
        border: none;
        cursor: pointer;
        transition: color 0.3s ease;
    }
    .my-portfolio-wrapper .nav-tab-item::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: var(--primary-color);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .my-portfolio-wrapper .nav-tab-item:hover, .my-portfolio-wrapper .nav-tab-item:focus {
        color: var(--text-dark);
    }
    .my-portfolio-wrapper .nav-tab-item:hover::after, .my-portfolio-wrapper .nav-tab-item:focus::after {
        transform: scaleX(1);
    }
    
    /* --- 2. PORTFOLIO PROJECTS CONTAINER (REFINED) --- */
    .my-portfolio-wrapper .portfolio-projects-container { padding: 80px 5%; }
    .my-portfolio-wrapper .portfolio-project-block {
        max-width: 1200px;
        margin: 0 auto;
        padding-top: 80px;
        margin-top: -80px;
    }
    .my-portfolio-wrapper .portfolio-project-block:not(:last-child) { margin-bottom: 40px; }
    .my-portfolio-wrapper .project-card {
        background-image: linear-gradient(145deg, #FFFFFF, #FDFEFF);
        border: 1px solid var(--border-color);
        border-radius: 24px;
        padding: 40px;
        overflow: hidden;
        box-shadow: 0 4px 25px rgba(0,0,0,0.03);
        transition: box-shadow 0.3s ease;
    }
    .my-portfolio-wrapper .project-card:hover { box-shadow: 0 15px 45px rgba(0,0,0,0.07); }
    .my-portfolio-wrapper .project-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; }
    .my-portfolio-wrapper .portfolio-project-block:nth-child(even) .project-grid .project-text-column { order: -1; }
    
    .my-portfolio-wrapper .project-media-column .video-thumbnail-trigger {
        position: relative;
        cursor: pointer;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        transition: transform 0.3s ease;
    }
    .my-portfolio-wrapper .project-media-column .video-thumbnail-trigger:hover {
        transform: scale(1.03);
    }
    .my-portfolio-wrapper .project-media-column .video-thumbnail-trigger img {
        width: 100%;
        vertical-align: middle;
    }
    .my-portfolio-wrapper .play-button-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80px;
        height: 80px;
        background-color: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(5px);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.3s ease, transform 0.3s ease;
    }
    .my-portfolio-wrapper .video-thumbnail-trigger:hover .play-button-overlay {
        background-color: white;
        transform: translate(-50%, -50%) scale(1.1);
    }
    .my-portfolio-wrapper .play-button-overlay svg {
        width: 40px;
        height: 40px;
        color: var(--primary-color);
        margin-left: 5px; /* Optical alignment */
    }

    .my-portfolio-wrapper .project-text-column h3 { font-size: 2rem; font-weight: 700; color: var(--text-dark); margin: 0 0 15px 0; }
    .my-portfolio-wrapper .project-text-column .project-category-tag { display: inline-block; background-color: #e7f3ff; color: var(--primary-color); padding: 8px 15px; border-radius: 8px; font-weight: 600; margin-bottom: 25px; font-size: 14px; }
    .my-portfolio-wrapper .project-features-list { list-style: none; padding: 25px 0 0 0; margin-top: 25px; border-top: 1px solid var(--border-color); display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .my-portfolio-wrapper .project-features-list li { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; }
    .my-portfolio-wrapper .feature-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-image: linear-gradient(135deg, #e7f3ff, #f8f9fa); }
    .my-portfolio-wrapper .feature-icon svg { width: 20px; height: 20px; color: var(--primary-color); }
    
    /*
    ========================================
    --- 3. NEW VIDEO POPUP / LIGHTBOX STYLES ---
    ========================================
    */
    .my-portfolio-wrapper .video-popup-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(13, 29, 61, 0.85);
        backdrop-filter: blur(10px);
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    .my-portfolio-wrapper .video-popup-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    .my-portfolio-wrapper .video-popup-content {
        position: relative;
        width: 90%;
        max-width: 1100px;
        aspect-ratio: 16 / 9;
        transform: scale(0.8);
        transition: transform 0.3s ease;
    }
    .my-portfolio-wrapper .video-popup-overlay.active .video-popup-content {
        transform: scale(1);
    }
    .my-portfolio-wrapper .video-popup-content iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 12px;
        border: 2px solid rgba(255,255,255,0.2);
    }
    .my-portfolio-wrapper .video-popup-close {
        position: absolute;
        top: -45px;
        right: 0;
        color: white;
        font-size: 2.5rem;
        cursor: pointer;
        border: none;
        background: none;
    }

    /* --- CTA & RESPONSIVE --- */
    .my-portfolio-wrapper .cta-section { background-color: #0d1d3d; color: var(--bg-white); padding: 80px 5%; text-align: center; }
    .my-portfolio-wrapper .cta-container h2 { font-size: 2.8rem; line-height: 1.2; margin: 0 0 35px 0; color: white; }
    .my-portfolio-wrapper .cta-container .highlight { color: #4387f6; }
    .my-portfolio-wrapper .cta-button { display: inline-block; background-color: var(--primary-color); color: var(--bg-white); padding: 16px 45px; border-radius: 50px; text-decoration: none; font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; }
    .my-portfolio-wrapper .cta-button:hover { transform: translateY(-5px); }

    @media (max-width: 992px) {
        .my-portfolio-wrapper .project-grid { grid-template-columns: 1fr; gap: 40px; }
        .my-portfolio-wrapper .portfolio-project-block:nth-child(even) .project-grid .project-text-column { order: 0; }
        .my-portfolio-wrapper .project-text-column h3 { font-size: 1.8rem; }
        .my-portfolio-wrapper .project-features-list { grid-template-columns: 1fr; }
    }
    @media (max-width: 768px) {
        .my-portfolio-wrapper .nav-tab-item { font-size: 0.9rem; gap: 15px; }
        .my-portfolio-wrapper .portfolio-projects-container { padding: 40px 5%; }
        .my-portfolio-wrapper .portfolio-project-block { padding-top: 100px; margin-top: -100px; }
        .my-portfolio-wrapper .project-card { padding: 25px; }
    }
    
    .page-title-section {
    /* Sets the background color to a dark blue, matching your image. */
    background-color: #0A1F44; 
    
    /* Makes the section span the full width of the screen. */
    width: 100%;
    
    /* Sets a fixed height for the section as you requested. */
    height: 200px;
    
    /* Centers the content both horizontally and vertically. */
    display: flex;
    justify-content: center;
    align-items: center;
}

.page-title-content {
    /* Centers the title and underline div within the section. */
    text-align: center;
}

.page-title-text {
    /* Sets the font color for the title to a bright blue. */
    color: #4b89ff;
    font-size: 45px;
    
    
    /* Removes any default margin to ensure it's positioned correctly. */
    margin-top: 0;
    margin-bottom: 0;
    
    /* Adds some letter-spacing to match the look in the image. */
    letter-spacing: 5px;
}

.page-title-underline {
    /* Styles the container for the dots and line. */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

.dot {
    /* Styles the small dot elements. */
    height: 5px;
    width: 5px;
    background-color: #4b89ff;
    border-radius: 50%; /* Makes the dots circular. */
    margin: 0 2px; /* Adds space between the dots. */
}

.line {
    /* Styles the horizontal line. */
    height: 3px;
    width: 40px;
    background-color: #4b89ff;
    margin-left: 5px; /* Adds a bit of space between the dots and the line. */
}