* {
    box-sizing: border-box;
}


body {

    font-family: Inter, Arial, sans-serif;

    margin: 0;

    color: #222;

    background: #f7f8fa;

}



nav {

    padding: 25px 10%;

    background: white;

}



nav a {

    text-decoration: none;

    color: #2563eb;

}



.project-hero {


    /* min-height:60vh; */


    display: flex;

    align-items: center;

    gap: 50px;


    padding: 40px 10%;


    background: white;


}



.project-hero img {


    width: 45%;

    border-radius: 20px;

}



.project-hero h1 {


    font-size: 4rem;

    margin: 0;


}



section {


    max-width: 1000px;

    margin: auto;

    padding: 10px 10px;


}



.cards {


    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(250px, 1fr));


    gap: 25px;

}



.card {


    background: white;

    padding: 30px;

    border-radius: 15px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .05);


}



.figure {


    width: 100%;

    border-radius: 15px;

}



footer {


    text-align: center;

    padding: 40px;

    background: white;


}



.image-box {

    margin: 40px 0;

    background: white;

    border-radius: 15px;

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

}


.image-box img {

    display: block;

    width: 100%;

    height: auto;

}


.image-box figcaption {

    padding: 15px 20px;

    font-size: 0.95rem;

    color: #555;

    background: #fafafa;

    border-top: 1px solid #eee;

    text-align: center;

}

.video-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 30px;
}

.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 15px;
}

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

@media (max-width: 768px) {
    .video-grid {
        grid-template-columns: 1fr;
    }
}

#pcd-viewer {

    width: 50%;
    height: 400px;

    background: #111;

    border-radius: 15px;

    overflow: hidden;

}