@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* Global Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    min-height: 100vh;
}
body {
    font-family: 'Share Tech Mono', monospace;
    font-weight: 400;
    font-size: 16px;
    color: grey;
    background-color: black;
    /* Background: Thin colored stripes on black */
    background: repeating-linear-gradient(45deg,
    black 0px, black 9px,
    rgba(12,0,0,0.9) 9px, rgba(12,0,0,0.9) 10px,
    black 10px, black 19px,
    rgba(12,3,0,0.9) 19px, rgba(12,3,0,0.9) 20px,
    black 20px, black 29px,
    rgba(12,12,0,0.9) 29px, rgba(12,12,0,0.9) 30px,
    black 30px, black 39px,
    rgba(0,12,0,0.9) 39px, rgba(0,12,0,0.9) 40px,
    black 40px, black 49px,
    rgba(0,0,12,0.9) 49px, rgba(0,0,12,0.9) 50px,
    black 50px, black 59px,
    rgba(3,0,12,0.9) 59px, rgba(3,0,12,0.9) 60px,
    black 60px, black 69px,
    rgba(12,0,12,0.9) 69px, rgba(12,0,12,0.9) 70px
    );
    background-attachment: fixed;
}
header {
    text-align: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #444;
}
header h1 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 2.5em;
    letter-spacing: 2px;
    color: lightgrey;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
}

/* Navigation Bar without Drop-downs */
nav {
    background: rgba(0, 0, 0, 0.5);
    padding: 10px 0;
}
nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
}
nav ul li {
    margin: 0 15px;
}
nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 10px 15px;
    font-weight: bold;
    cursor: pointer;
}
/* Content Section Styles */
.content-section {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 40px;
}

.content-section.active {
    display: block;
}
.content-section h2 {
    margin-bottom: 15px;
}
.content-section p {
    line-height: 1.6;
}
/* project Showcase (projects Section) */
.project-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 20px;
}

@media (min-width: 768px) {
    .project-list {
        grid-template-columns: repeat(2, 1fr);
    }
}


/*@media (min-width: 1200px) {*/
/*    .project-list {*/
/*        grid-template-columns: repeat(3, 1fr);*/
/*    }*/
/*}*/


.project {
    display: flex;
    flex-direction: column;
    height: 100%;
}


.project-card {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 20px;
    border: 1px solid rgba(0, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    padding: 20px;
    display: block; /* avoid stretching children vertically */
}




.project-subtitle {
    display: block;
    text-align: center;
}

.project-card h3 {
    position: relative;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.4em;
    color: lightgrey;
    text-shadow: 0 0 6px rgba(0, 255, 255, 0.4);
    margin-bottom: 20px;
    padding-bottom: 10px;
    text-align: center;
}

/* Glowing underline, no animation */
.project-card h3::after {
    content: '';
    display: block;
    width: 60%;
    height: 2px;
    margin: 8px auto 0 auto;
    background: grey;
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
}


.project-card h4,
.project-subtitle {
    font-family: 'Share Tech Mono', monospace;
    font-weight: 400;
    font-size: 0.9em;
    color: grey;
    text-align: center;
    margin-top: -10px;
    margin-bottom: 10px;
    text-shadow: 0 0 2px rgba(0, 255, 255, 0.2);
}


/* Paragraph styling */
.project-card p {
    font-family: 'Share Tech Mono', monospace;
    font-weight: 400;
    font-size: 0.95em;
    line-height: 1.6;
    color: grey;
    text-shadow: 0 0 3px rgba(0, 255, 255, 0.2);
}

.project-card hr {
    border: none;
    height: 1px;
    margin: 16px 0;
    background: linear-gradient(
            to right,
            rgba(0, 255, 255, 0),
            rgba(0, 255, 255, 0.6),
            rgba(0, 255, 255, 0)
    );
    box-shadow:
            0 0 6px rgba(0, 255, 255, 0.3),
            0 0 12px rgba(0, 255, 255, 0.2);
}

.project-card ul {
    list-style: none;
    padding-left: 0;
}

.project-card ul li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 0.5em;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.95em;
    line-height: 1.5;
    color: #ccffff;
}

.project-card ul li::before {
    content: '' !important;
    text-shadow: none !important;
}
/*.project-card ul li::before {*/
/*    content: '•';*/
/*    position: absolute;*/
/*    left: 0;*/
/*    color: #00ffff;*/
/*    text-shadow: 0 0 6px rgba(0, 255, 255, 0.5);*/
/*}*/

/*.project-card ul li::before {*/
/*    content: '⭘'; !* other options: '◆' '◉' '⟡' '✧' *!*/
/*    position: absolute;*/
/*    left: 0;*/
/*    color: #00ffff;*/
/*    font-size: 1em;*/
/*    text-shadow:*/
/*            0 0 4px rgba(0, 255, 255, 0.4),*/
/*            0 0 10px rgba(0, 255, 255, 0.2);*/
/*}*/

.project-card a {
    color: #00ffff; /* neon cyan */
    text-decoration: none;
    font-weight: bold;
    position: relative;
    transition: color 0.3s ease;
}

.project-card a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: #00ffff;
    box-shadow: 0 0 6px rgba(0, 255, 255, 0.6);
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0;
}

.project-card a:hover {
    color: #66ffff;
}

.project-card a:hover::after {
    transform: scaleX(1);
    opacity: 1;
}



.project:nth-child(5n+1) .project-card {
    border-color: rgba(0, 255, 255, 0.3);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
    color: #ccffff;
}
.project:nth-child(5n+2) .project-card {
    border-color: rgba(255, 0, 255, 0.3);
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.4);
    color: #ffccff;
}
.project:nth-child(5n+3) .project-card {
    border-color: rgba(0, 255, 100, 0.3);
    box-shadow: 0 0 20px rgba(0, 255, 100, 0.4);
    color: #ccffdd;
}
.project:nth-child(5n+4) .project-card {
    border-color: rgba(255, 255, 0, 0.3);
    box-shadow: 0 0 20px rgba(255, 255, 0, 0.4);
    color: #ffffcc;
}
.project:nth-child(5n) .project-card {
    border-color: rgba(255, 100, 0, 0.3);
    box-shadow: 0 0 20px rgba(255, 100, 0, 0.4);
    color: #ffddcc;
}

@keyframes neonPulse {
    0%, 100% {
        box-shadow:
                0 0 15px rgba(0, 255, 255, 0.3),
                0 0 30px rgba(0, 255, 255, 0.15),
                inset 0 0 10px rgba(0, 255, 255, 0.1);
    }
    50% {
        box-shadow:
                0 0 25px rgba(0, 255, 255, 0.5),
                0 0 50px rgba(0, 255, 255, 0.25),
                inset 0 0 15px rgba(0, 255, 255, 0.2);
    }
}



/* Carousel Styles (Sliding Animation) */
.carousel {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 10px;
}

.carousel-inner {
    display: flex;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.carousel-slide {
    flex: 0 0 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


.carousel-slide img,
.carousel-slide video {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

.media-wrapper {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-wrapper video,
.media-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 20px;
}


/* Carousel Navigation Buttons */
.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 255, 255, 0.4);
    color: #00ffff;
    font-size: 2rem;
    padding: 8px 14px;
    border-radius: 12px;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 0 12px rgba(0, 255, 255, 0.2);
    transition: all 0.2s ease-in-out;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.carousel-button:hover {
    background: rgba(0, 255, 255, 0.1);
    box-shadow: 0 0 18px rgba(0, 255, 255, 0.5);
    color: #ccffff;
    transform: translateY(-50%) scale(1.1);
}


.carousel-button.prev {
    left: 10px;
}
.carousel-button.next {
    right: 10px;
}
/* Embedded Video Container */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 10px;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* Responsive Styles */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
    }
    nav ul li {
        margin: 5px 0;
    }
    .project .project-card {
        width: 100%;
    }
    .project:nth-child(odd) .project-card,
    .project:nth-child(even) .project-card {
        margin: 0 auto;
    }
}
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 20;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(0, 0, 0, 0.8);
}
.modal-content {
    margin: 5% auto;
    display: block;
    max-width: 80%;
    max-height: 80%;
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: red;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    text-shadow:
            -1px -1px 0 #fff,
            1px -1px 0 #fff,
            -1px  1px 0 #fff,
            1px  1px 0 #fff;
}

/* Global link styling */
a {
    color: #00ffff; /* neon cyan */
    text-decoration: none;
    font-weight: bold;
    text-shadow: 0 0 6px rgba(0, 255, 255, 0.6);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

a:hover {
    color: #66ffff;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
}

#contact ul {
    list-style: none;
    padding-left: 0;
    text-align: center;
}

#contact ul li {
    margin: 6px 0;
}

.content-section h2 {
    text-align: center;
}

.content-section p {
    text-align: center;
    margin-bottom: 15px;
}