/* Global Resets & Fonts */
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }   
    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        min-height: 100%;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        scroll-behavior: smooth;
        overflow-x: hidden;
    }
    body {
        position: relative;
    }
    .homepage-content {
        font-family: 'Helvetica Neue', sans-serif;
        line-height: 1.6;
        background-color: #f9f9f9;
        color: #222;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    a {
        text-decoration: none;
        color: black;
    }
    a:hover {
        text-decoration: underline;
        color: black;
    }
    img {
        max-width: 100%;
    }
    




    /* Navigation Bar */
    header {
        position: sticky;
        top: 0;
        z-index: 1000;
        background-color: white;
        width: 100%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }      

    .navbar {
        background-color: #fff;
        padding: 1rem 2rem;
      }
      
    .nav-list {
        list-style: none;
        display: flex;
        justify-content: space-between;
        max-width: 1000px;
        margin: 0 auto;
        flex-wrap: wrap;
    }
    .nav-list li a {
        font-weight: light;
        padding: 0.5rem 1rem;
        font-family: 'Helvetica Neue', sans-serif;
        color: black;
    }
    




    /* Intro Section */
    .intro-section {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        padding: 3rem 1rem;
        max-width: 1200px;
        margin: auto;
        gap: 3rem;
        text-align: justify;
    }

    .intro-photo {
        max-width: 300px;
        width: 100%;
    }

    .intro-text {
        max-width: 600px;
        width: 100%;
    }

    .intro-text h1 {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }

    .intro-text p {
        font-size: 1.2rem;
        color: #444;
    }

    .wave {
        display: inline-block;
        transform-origin: 70% 70%;
        cursor: pointer;
    }
    /* Waving animation */
    @keyframes wave-hand {
        0% { transform: rotate(0deg); }
        10% { transform: rotate(14deg); }
        20% { transform: rotate(-8deg); }
        30% { transform: rotate(14deg); }
        40% { transform: rotate(-4deg); }
        50% { transform: rotate(10deg); }
        60% { transform: rotate(0deg); }
        100% { transform: rotate(0deg); }
    }
    
    /* Trigger animation when .animate is added */
    .wave.animate {
        animation: wave-hand 1.5s ease;
    }
    
    /* Highlight Section */
    .highlight-section {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 2rem;
        padding: 3rem 2rem;
        max-width: 1200px;
        margin: auto;
        flex-wrap: wrap;
    }
    .highlight-card {
        background-color: white;
        padding: 1.5rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        text-align: center;
        transition: transform 0.2s ease;              
    }
    .highlight-card:hover {
        transform: translateY(-5px);
    }
    .highlight-card h3 {
        margin-bottom: 1rem;
    }
    .highlight-card a {
        display: inline-block;
        margin-top: 1rem;
        font-weight: bold;
        color: black;
        transition: all 0.3s ease;
    }
    
    /* Footer */
    footer {
        background-color: #f1f1f1;
        padding: 2rem;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #f1f1f1;
        text-align: center;
        font-weight: light;
        font-family: 'Helvetica Neue', sans-serif;
        z-index: 1000;
    }
  
    .footer-container {
        display: flex; /* ← this is the important change */
        justify-content: space-evenly;
        align-items: center;
        flex-wrap: wrap;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 2rem;
    }

    .footer-left,
    .footer-center,
    .footer-right {
        flex: 1 1 300px;
        text-align: center; /* optional: makes all text centered */
    }

    .footer-center {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.3em 0.5em;
    }

    .social-row {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.5em 0.5em;
    }

    .icon-link img {
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        object-fit: cover;
        transition: transform 0.2s ease;
    }
      
    .icon-link img:hover {
        transform: scale(1.1);
    }

    .contact a {
        color: black;
    }

    a, a:visited, a:hover, a:active {
        color: black;
    }





    /* About Me Page Styles */
    .aboutpage-content {
        font-family: 'Helvetica Neue', sans-serif;
        line-height: 1.6;
        background-color: #f9f9f9;
        color: #222;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .about-intro {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        flex: 1;
        height: auto;
        width: 100%;
        padding: 2rem 1rem;
        gap: 2rem;
    }

    .about-heading {
        position: relative;
        display: inline-block;
        padding: 0 1.5rem;
        font-size: 4rem;
        font-weight: bold;
        color: rgb(10,10,101);
    }
        
    .about-heading::before,
    .about-heading::after {
        content: "";
        position: absolute;
        top: 50%;
        height: 2px;
        background-color: rgb(10,10,101);
        transform: translateY(-50%);
    }
        
    .about-heading::before {
        width: 345px;
        left: 0;
        transform: translate(-100%, -50%);
    }
        
    .about-heading::after {
        width: 345px;
        left: 100%;
        transform: translate(0, -50%);
    }
      

    .about-intro-main {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: stretch;
        padding: 1rem;
        gap: 2rem;
    }

    .left-about-img,
    .right-about-img {
        width: 325px; /* or whatever size you want */
        aspect-ratio: 3 / 4;
        flex-shrink: 0; /* so they don't collapse on small screens */
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 2em;
        margin-right: 2em;
    }

    .left-about-img img,
    .right-about-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .about-intro-text {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: column;
        font-size: 2rem;
        font-weight: bold;
        text-align: center;
        color: rgb(10, 10, 101);
    }
    
    .about-intro-text img {
        max-width: 150px;
        width: auto;
        height: auto;
    }

    .arrow {
        font-weight: bold;
        display: inline-block;
        transition: transform 0.05s ease;
    }
    

    .about-rows {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 2rem 1rem;
    }

    .first-about-row,
    .second-about-row,
    .third-about-row {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex: 1;
    }

    .first-about-row img,
    .second-about-row img,
    .third-about-row img {
        aspect-ratio: 3 / 4;
        max-width: 200px;
        object-fit: contain;
        width: auto;
        height: auto;
        object-fit: cover;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .first-about-row p,
    .second-about-row p,
    .third-about-row p {
        max-width: 200px;
        font-size: 1.3rem;
        line-height: 1.4;
        text-align: left;
        flex-shrink: 1;
    }




    /* Projects Page Styles */
    .resume-thumb {
        width: 100px;
        height: auto;
        cursor: pointer;
        border: 1px solid #ccc;
        border-radius: 5px;
        transition: transform 0.2s ease;
        margin-left: 1rem;
    }
    
    .resume-thumb:hover {
        transform: scale(1.05);
    }
    
    .resume-modal {
        display: none;
        position: fixed;
        z-index: 1000;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background-color: rgba(0, 0, 0, 0.85);
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .resume-modal.show {
        display: flex;
        opacity: 1;
    }
    
    .resume-full {
        max-width: 90%;
        max-height: 90%;
        border-radius: 10px;
        box-shadow: 0 0 12px #000;
        transform: scale(0.85);
        transition: transform 0.3s ease;
    }

    .resume-modal.show .resume-full {
        transform: scale(1);
    }
    
    .project-header-git {
        width: 85px;
        height: auto;
        cursor: pointer;
    }

    .project-header-git:hover {
        transform: scale(1.05);
    }
    
    .projectspage-content {
        font-family: 'Helvetica Neue', sans-serif;
        line-height: 1.6;
        background-color: #f9f9f9;
        color: #222;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .projects {
        display: flex;
        flex-direction: column;
        gap: 2em;
        margin-bottom: 2em;
    }

    .project {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: row;
        gap: 2em;
    }

    .projects-header {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: row;
        font-size: 2rem;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .project-text {
        display: flex;
        max-height: 450px;
        width: auto;
        justify-content: space-evenly;
        flex-direction: column;
        padding: 10px;
    }

    .project-title {
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        font-size: 2.3rem;
    }

    .project-description {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: row;
        font-size: 1.15rem;
        margin: 2rem;
        padding: 2rem;
        gap: 5rem
    }

    .technologies {
        min-width: 30%;
    }

    .project-info {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: row;
        font-size: 1rem;
        font-style: italic;
    }

    .codeButton {
        border-radius: 8px;
        padding: 5px;
        font-size: 1.2rem;
        font-family: 'Courier New', Courier, monospace;
        font-weight: bold;
        background-color: white;
    }

    .schoolButton {
        border-radius: 8px;
        padding: 5px;
        font-size: 1.2rem;
        font-family: 'Courier New', Courier, monospace;
        font-weight: bold;
        background-color: white;
    }

    .project-photos {
        display: flex;
        align-items: center;
        aspect-ratio: 1 / 1;
        max-width: 450px;
        width: 100%;
        margin-right: 10px;
        border-radius: 10px;
        flex-shrink: 1;
    }

    .slider {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    

    .slide {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 100%;
        object-fit: cover;
        object-position: center;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
        border-radius: 10px;
        pointer-events: none;
    }
    

    .slide.active {
        opacity: 1;
        z-index: 1;
        pointer-events: auto;
        cursor: pointer;
    }

    .nav-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.5rem;
        background-color: rgba(0, 0, 0, 0.4);
        color: white;
        border: none;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        padding: 0;
        cursor: pointer;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
    }    

    .prev {
        left: 10px;
    }

    .next {
        right: 10px;
    }

    .dot-container {
        position: absolute;
        bottom: 10px;
        width: 100%;
        text-align: center;
        z-index: 2;
    }

    .dot {
        height: 10px;
        width: 10px;
        margin: 0 4px;
        background-color: rgba(255, 255, 255, 0.7);
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.3s;
        cursor: pointer;
    }

    .dot.active {
        background-color: white;
        border-color: #9c9c9c;
    }

    .slider-full {
        max-width: 90%;
        max-height: 90%;
        border-radius: 10px;
        box-shadow: 0 0 12px #000;
        transform: scale(0.85);
        transition: transform 0.3s ease;
        object-fit: contain;
        background-color: white;
    }
    
    .resume-modal.show .slider-full {
        transform: scale(1);
    }

    .school-modal {
        display: none;
        position: fixed;
        z-index: 1000;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6); /* semi-transparent overlay */
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: opacity 0.3s ease;
        font-family: 'Helvetica Neue', sans-serif;
    }
    
    .school-modal.show {
        display: flex;
        opacity: 1;
    }
    
    .school-modal-box {
        background-color: white;
        padding: 2rem;
        border-radius: 10px;
        max-width: 400px;
        text-align: center;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
        font-size: 1.1rem;
        line-height: 1.5;
        color: #333;
    }
    
    .school-close {
        margin-top: 1rem;
        padding: 0.5rem 1rem;
        font-size: 1rem;
        background-color: #eee;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
    
    .school-close:hover {
        background-color: #ddd;
    }
    



    /* Gallery Page Styles */
    .gallerypage-content {
        font-family: 'Helvetica Neue', sans-serif;
        line-height: 1.6;
        background-color: #f9f9f9;
        color: #222;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .gallery-header {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2.5em;
        height: 100vh;
    }

    .gallery-photos {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: column;
        gap: 2em;
        margin-bottom: 2em;
    }

    .galleryrow {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: row;
        width: 100vw;
        padding: 0 2em;
        box-sizing: border-box;
        gap: 2em;
    }

    .gallery-item {
        position: relative;
        display: inline-block;
        overflow: hidden;
    }

    .gallery-item img {
        display: block;
        width: 100%;
        height: auto;
        transition: opacity 0.4s ease;
    }

    .galleryPic {
        max-width: 300px;
        height: auto;
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    .gallery-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7); /* full black overlay with transparency */
        opacity: 0;
        transition: opacity 0.4s ease;
        z-index: 1; /* sits on top of the image */
    }
    
    .gallery-caption {
        position: absolute;
        max-width: 80%;
        width: fit-content;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 10px 15px;
        color: white;
        font-size: 1.2rem;
        text-align: center;
        opacity: 0;
        transition: opacity 0.4s ease;
        z-index: 2; /* sits on top of the overlay */
        pointer-events: none;
    }
    
    .gallery-item:hover .gallery-overlay {
        opacity: 1; /* fade in full black overlay */
    }
    
    .gallery-item:hover .gallery-caption {
        opacity: 1; /* fade in caption */
    }

    .gallery-item.active .gallery-overlay { 
        opacity: 1;
    }

    .gallery-item.active .gallery-caption { 
        opacity: 1;
    }



    /* Vision Page Styles */
    .visionpage-content {
        font-family: 'Helvetica Neue', sans-serif;
        line-height: 1.6;
        background-color: #f9f9f9;
        color: #222;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: relative;
    }

    .vision-header {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2em;
        color: #444;
    }

    .timeline {
        position: fixed;
        top: 11vh;
        left: 13vw;
        height: 85vh;
        width: 2px;
        background-color: #aaa;
        z-index: 100;
        transition: position 0.3s ease;
    }

    .timeline.stuck {
        position: absolute;
        top: auto;
        bottom: 50px;
    }

    .timeline-ball {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
        width: 16px;
        height: 16px;
        background-color: #6299c0;
        border-radius: 50%;
        transition: top 0.3s ease;
        z-index: 101;
    }

    .timeline-dates {
        position: absolute;
        top: 0;
        left: 35px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;        
    }
    
    
    .timeline-date {
        opacity: 0.2;
        color: #6299c0;
        transition: opacity 0.5s ease;
    }
    .timeline-date.active {
        opacity: 1;
        color: #6299c0;
        font-size: 1.5em;

    }
    
    
    .vision-events {
        display: flex;
        justify-content: space-evenly;
        align-items: flex-end;
        flex-direction: column;
        max-width: 75%;
        margin-left: auto;
        padding: 2em;
    }

    .vision-item {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: row;
        margin: 2em;
        gap: 2em;
    }

    .vision-item p {
        font-size: 2em;
        color: #444;
    }

    .vision-item img {
        aspect-ratio: 1 / 1;
        max-width: 400px;
        height: auto;
        width: 100%;
        object-fit: cover;
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.4);
    }

    .vision-section-title {
        font-size: 2em;
        font-weight: bold;
        text-align: center;
        width: 100%;
        position: relative;
        padding: 0.5em 0;
        color: #444;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .vision-section-title::before,
    .vision-section-title::after {
        content: "";
        flex: 1;
        height: 1.5px;
        background-color: #666;
    }
    
    .vision-section-title::before {
        margin-right: 1em;
    }
    
    .vision-section-title::after {
        margin-left: 1em;
    }

    /* Mobile Sizing */

    @media (max-width: 768px) {
        .intro-section {
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 1rem; /* reduce padding so things fit */
            gap: 1rem; /* smaller gap on mobile */
        }
    
        .intro-photo {
            max-width: 300px;
            width: 80%;
            height: auto;
        }
    
        .intro-text {
            box-sizing: border-box;
            max-width: 90vw;
            width: 90vw;
            padding: 0 1rem;
            text-align: left;
            overflow-wrap: break-word;
        }
    
        .intro-text h1 {
            font-size: 2rem;
        }
    
        .intro-text p {
            font-size: 1rem;
        }
    
        .highlight-section {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            gap: 1rem;
            padding: 1rem;
        }
        
        .highlight-card {
            box-sizing: border-box;
            max-width: 40vw;
            width: 100%;
            padding: 1rem;
            margin: 0 auto;
            text-align: center;
            overflow-wrap: break-word;
        }
        
        .highlight-card * {
            max-width: 100%;
            overflow-wrap: break-word;
            word-wrap: break-word;
            word-break: break-word;
            white-space: normal;
        }        
    }

    @media (max-width: 768px) {
        .about-intro {
            gap: 1em;
        }
        
        .about-row-img {
            max-width: 100px !important;
            width: 100% !important;
            height: auto !important;
            aspect-ratio: 3/4 !important;
            object-fit: cover;
            margin-left: 0.5em;
            margin-right: 0.5em;
        }
    
        .about-intro-text img {
            max-width: 80px;
            height: auto;
        }

        .left-about-img,
        .right-about-img {
            width: 30vw;
            aspect-ratio: 3 / 4;
            margin-left: 0em;
            margin-right: 0em;
        }

        .left-about-img img,
        .right-about-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    
        .about-heading {
            font-size: 2.5rem;
        }
    
        .about-intro-text {
            font-size: 1rem;
        }
    
        .first-about-row p,
        .second-about-row p,
        .third-about-row p {
            font-size: 0.8rem;
            line-height: 1.3;
            gap: 1em;
        }
    
        .nav-list li a {
            font-size: 0.75rem;
            padding: 0.3rem 0.5rem;
        }
    
        .navbar img {
            max-width: 25px;
            height: auto;
        }

        .about-rows {
            margin-left: 0.5em;
            margin-right: 0.5em;
        }

        .first-about-row,
        .second-about-row,
        .third-about-row {
            flex-wrap: wrap; /* allow wrapping */
            justify-content: center; /* center content */
            gap: 1rem; /* spacing between pairs */
        }

        .first-about-row > *,
        .second-about-row > *,
        .third-about-row > * {
            flex: 0 1 45%; /* each pair takes about half the row */
            box-sizing: border-box;
        }
    }
    

    @media (max-width: 768px) {
        /* Projects header */
        .projects-header {
            font-size: 1.5rem;
        }
    
        /* Project container - stack vertically */
        .project {
            flex-direction: column;
            align-items: center;
            gap: 1rem;
        }
    
        /* Project photos - allow them to stay bigger */
        .project-photos {
            max-width: 90vw;
            width: 90vw;
            aspect-ratio: 1/1;
            margin-top: 2em;
        }
    
        /* Project text - make sure it scales cleanly */
        .project-text {
            max-width: 90vw;
            width: 90vw;
            padding: 1rem;
            font-size: 1rem;
        }
    
        /* Project title - shrink a bit */
        .project-title {
            font-size: 1.8rem;
            text-align: center;
        }
    
        /* Project description - stack better */
        .project-description {
            flex-direction: column;
            align-items: center;
            gap: 1rem;
            padding: 1rem;
        }
    
        /* Project info */
        .project-info {
            flex-direction: column;
            align-items: center;
            font-size: 0.9rem;
        }
    
        /* Buttons - keep readable */
        .codeButton,
        .schoolButton {
            font-size: 1rem;
            padding: 0.5rem;
        }
    }
    
    @media (max-width: 768px) {
        /* Vision header (optional - shrink if you want) */
        .vision-header {
            font-size: 1.3em;
        }
    
        /* Vision item - stack vertically */
        .vision-item {
            flex-direction: column;
            justify-content: center;
            align-items: flex-end;
            gap: 1rem;
            text-align: center;
        }
    
        /* Vision item paragraph */
        .vision-item p {
            font-size: 1.2em;
            padding: 0 1rem;
        }
    
        /* Vision item image */
        .vision-item img {
            max-width: 40vw;
            width: 40vw;
            height: auto;
        }
    
        /* Timeline dates - shrink text if needed */
        .timeline-date {
            font-size: 1em;
        }
    }


    @media (max-width: 768px) {
        .gallery-header {
            font-size: 1.8em;
        }

        .gallery-caption {
            font-size: 0.6rem;
            padding: 8px 12px;
            width: 90%;
            max-width: 90%;
            word-wrap: normal;
            white-space: normal;
        }
    }

    .project-photos.has-video {
        padding: 12px;
      }
      
      .project-video {
        max-width: 820px;
        margin: 12px auto 0;
        width: 100%;
      }
      
      .project-video iframe {
        width: 100%;
        aspect-ratio: 16 / 9;   /* keeps proportions */
        border: 0;
        border-radius: 14px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.12);
        display: block;
      }
      
      /* Responsive tweaks */
      @media (max-width: 1100px) {
        .project-video { max-width: 720px; }
      }
      
      @media (max-width: 900px) {
        .project-video { max-width: 640px; }
      }
      
      @media (max-width: 700px) {
        .project-photos.has-video { padding: 8px; }
        .project-video { max-width: 100%; margin-top: 8px; }
        .project-video iframe { border-radius: 12px; }
      }
      
      @media (max-width: 480px) {
        .project-video { margin-top: 6px; }
        .project-video iframe { border-radius: 10px; }
      }