*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth
}

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&family=Space+Grotesk:wght@600;700&family=Space+Mono&display=swap');

:root {
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'Space Mono', monospace;
}


body{
    background-color: #1558C9;
    color: #ffff;
    font-family: var(--font-mono);
}
.nav-bar{
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: sticky;
    top: 0;
    backdrop-filter: blur(20px);
    z-index: 999;
}
.name-logo{
    width: 60px;
}
.nav-links{
    display: flex;
    gap: 50px;
}
.nav-links a{
    text-decoration: none;
    color: #ffff;

}
.nav-bar button{
    background-color: transparent;
    border: 1px solid #ffff;
    color: #FFFFFF;
    outline: none;
    padding:3px 20px 3px 20px;
    border-radius: 20px;
}
.first-page{
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.first-page h1{
    color: #ffff;
    font-size: 100px;
    font-weight: bolder;
    font-family: var(--font-heading);
}
.heading:hover{
    color: #D4FF24;
}



.first-page p{
    position: absolute;
    bottom: 30%;
    color: #D4FF24;
}
#hero-section{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 20px;
    align-items: center;
    width: 100vw;
    height: 100vh;
}
.image-section{
    width: 400px;
    height: 400px;
    margin-left: 60px;
}
.hero-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 15px;
    outline: 5px solid #D4FF24;
}
.hero-img:hover{
    
}
.hero-content{
    padding: 50px;
}
.hero-content p{
    margin-top: 20px;
    text-align: left;
    line-height: 25px;
}
.hero-content h1{
    color: black;
    font-weight: bolder;
}
.hero-content span{
    color: #D4FF24;
    font-weight: bolder;
}












#project-section{
    display: flex;
   
    width: 100vw;
    height: 100vh;
}
#child-1{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.cards{
    height: 350px;
    display: grid;
    align-items: center;
    justify-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    padding: 15px;
}
#project-section h1{
    text-align: center;
    margin-top: 15px;
    margin-bottom: 45px;
    font-size: 40px;
    color: #FFFFFF;
    font-weight: bold;
}
.card-section{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 25px;
}
.images{
    width: 250px;
    height: 250px;
}
.image-1{
    background-image: url("/images/project-1");
    background-size: cover;
    background-position: center;
}
.project-details{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.image-2{
    background-image: url("/images/project-2");
    background-size: cover;
    background-position: center;
}
.image-3{
    background-image: url("/images/project-3");
    background-size: cover;
    background-position: center;
}
.image-4{
    background-image: url("/images/project-4");
    background-size: cover;
    background-position: center;
}
.project-details a{
    text-decoration: none;
    color: #FFFFFF;
    font-size: larger;
}











.github-section {
    padding: 80px 5%;
    background: var(--color-primary);
    color: white;
}

.github-section h2 {
    font-family: var(--font-heading);
    font-size: 36px;
    margin-bottom: 30px;
}

.github-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 15px;
    padding: 30px;
    overflow-x: auto;
}

.github-chart {
    display: block;
    width: 100%;
    min-width: 650px;
    height: auto;
    filter: brightness(1.1);
}

.github-card a {
    display: inline-block;
    margin-top: 20px;
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 600;
}












#contact-section{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    align-items: center;
    justify-items: center;
    width: 100vw;
    height: 100vh;
}
.contact-details h1{
    font-size: 50px;
    margin-bottom: 23px;
}
.contact-details span{
    color: #D4FF24;
}
.p1{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 23px;
}
.p2{
    font-size: 17px;
    margin-bottom: 23px;
}
.icons{
    width: 45px;
    padding: 5px;
}
.input-section{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10px;
}
.span-input{
    grid-column: 1 / span 2;
    padding-bottom: 50px;
}
.inputs{
    background-color: transparent;
    color: #FFFFFF;
    border: 1px solid #ffff;
    border-radius: 10px;
    outline: none;
    padding: 7px;
    height: 50px;
}
.inputs::placeholder{
    color: #FFFFFF;
}
.input-section button{
    grid-column: 1 / span 2;
    padding: 7px;
    outline: none;
    border-radius: 10px;
    border: none;
    background-color: #D4FF24;
    font-weight: bold;
    height: 50px;
}
.contact-box h1{
    margin-bottom: 30px;
}
.contact-box span{
    color: #D4FF24;
    font-size: 35px;
    margin-right: 5px;
    vertical-align: top;
}













/* RESPONSIVE CSS: Mobile layouts (640px and below). */
@media (max-width: 640px) {
    /* Wrap the navigation links onto their own centered row on narrow screens. */
    .nav-bar {
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
        padding: 10px 16px;
    }
    .name-logo {
        width: 46px;
    }
    .nav-links {
        order: 3;
        flex: 0 0 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: clamp(10px, 3vw, 18px);
    }
    .nav-links a {
        font-size: 14px;
        white-space: nowrap;
    }
    .nav-bar button {
        padding: 5px 14px;
    }

    /* Fit the first-page title and caption to a small screen without clipping. */
    .first-page {
        width: 100%;
        height: 82svh;
        min-height: 430px;
        padding: 24px 16px;
    }
    .first-page h1 {
        font-size: clamp(42px, 12vw, 72px);
        line-height: 1.05;
        text-align: center;
    }
    .first-page p {
        width: calc(100% - 32px);
        bottom: 22%;
        font-size: clamp(12px, 3.5vw, 15px);
        line-height: 1.6;
        text-align: center;
    }

    /* Stack the About portrait above its copy and remove the fixed desktop sizing. */
    #hero-section {
        width: 100%;
        height: auto;
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        padding: 52px 20px;
    }
    .image-section {
        width: min(80vw, 300px);
        height: auto;
        aspect-ratio: 1;
        margin: 0 auto;
    }
    .hero-content {
        padding: 0;
    }
    .hero-content h1 {
        font-size: clamp(34px, 9vw, 44px);
    }
    .hero-content p {
        line-height: 1.7;
    }

    /* Use one project card per row and let the project section expand vertically. */
    #project-section,
    #child-1 {
        width: 100%;
        height: auto;
        min-height: 0;
    }
    #child-1 {
        padding: 48px 20px;
    }
    #project-section h1 {
        font-size: clamp(32px, 9vw, 40px);
        margin-bottom: 28px;
    }
    .card-section {
        width: 100%;
        max-width: 380px;
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }
    .cards {
        width: 100%;
        min-height: 0;
        height: auto;
        padding: 15px;
    }
    .images {
        width: min(100%, 280px);
        height: auto;
        aspect-ratio: 1;
    }

    /* Keep the contribution chart readable and confine horizontal scrolling to its card. */
    .github-section {
        padding: 48px 16px;
    }
    .github-section h2 {
        font-size: clamp(26px, 7vw, 32px);
        margin-bottom: 20px;
    }
    .github-card {
        max-width: 100%;
        padding: 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .github-chart {
        min-width: 650px;
        max-width: none;
    }

    /* Stack contact details and make every form field fit the available width. */
    #contact-section {
        width: 100%;
        height: auto;
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
        padding: 52px 20px;
    }
    .contact-details,
    .contact-box {
        width: 100%;
        min-width: 0;
    }
    .contact-details h1 {
        font-size: clamp(38px, 10vw, 48px);
    }
    .p2 {
        line-height: 1.6;
    }
    .input-section {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
    .inputs {
        width: 100%;
        min-width: 0;
    }
    .span-input,
    .input-section button {
        grid-column: 1;
    }
    .contact-box h1 {
        font-size: clamp(25px, 7vw, 32px);
    }
    .contact-box span {
        font-size: 30px;
    }
}