/* =====================================
   Global Settings
===================================== */


* {

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

    margin: 0;

    padding: 0;

    font-family:
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    color: #222;

    background: #ffffff;

    line-height: 1.7;

}





/* =====================================
   Navigation
===================================== */


header {

    position: sticky;

    top: 0;

    z-index: 100;

    background: rgba(255,255,255,0.95);

    border-bottom: 1px solid #e5e5e5;

}



nav {

    max-width: 1200px;

    margin: auto;

    padding: 18px 40px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.logo {

    font-size: 24px;

    font-weight: 600;

    letter-spacing: 0.5px;

}



nav ul {

    list-style: none;

    display: flex;

    gap: 30px;

    margin: 0;

    padding: 0;

}



nav a {

    text-decoration: none;

    color: #333;

    font-size: 15px;

}



nav a:hover {

    color: #0057b8;

}





/* =====================================
   Hero Section
===================================== */


.hero {

    max-width: 1200px;

    margin: auto;

    padding: 100px 40px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 60px;

}



.hero-text {

    max-width: 650px;

}



.hero h1 {

    font-size: 56px;

    font-weight: 700;

    margin-bottom: 10px;

    letter-spacing: -1px;

}



.hero h2 {

    font-size: 28px;

    font-weight: 400;

    color: #555;

    margin-top: 0;

}



.hero p {

    font-size: 18px;

    color: #444;

}





.hero-image img {

    width: 240px;

    height: 240px;

    object-fit: cover;

    border-radius: 50%;

    border: 1px solid #ddd;

}







/* =====================================
   Button
===================================== */


.button {

    display: inline-block;

    margin-top: 25px;

    padding: 12px 28px;

    background: #222;

    color: white;

    text-decoration: none;

    border-radius: 6px;

    transition: 0.2s;

}



.button:hover {

    background: #0057b8;

}







/* =====================================
   Section Layout
===================================== */


section {

    max-width: 1100px;

    margin: auto;

    padding: 70px 40px;

}



section h2 {

    font-size: 34px;

    margin-bottom: 40px;

    font-weight: 600;

    border-bottom: 2px solid #222;

    display: inline-block;

}





section p {

    font-size: 17px;

    color: #444;

}







/* =====================================
   Research Cards
===================================== */


.cards {

    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 25px;

}



.card {

    border: 1px solid #ddd;

    padding: 25px;

    border-radius: 8px;

    transition: 0.25s;

}



.card:hover {

    transform: translateY(-5px);

    border-color: #888;

}



.card h3 {

    margin-top: 0;

    font-size: 22px;

}







/* =====================================
   Projects
===================================== */


.project {

    margin-bottom: 70px;

}



.project h3 {

    font-size: 26px;

}



.project img {

    width: 100%;

    max-width: 850px;

    margin: 20px 0;

    border-radius: 8px;

    border: 1px solid #ddd;

}





.project a {

    color: #0057b8;

    text-decoration: none;

    font-weight: 500;

}



.project a:hover {

    text-decoration: underline;

}








/* =====================================
   Experience
===================================== */


.experience {

    border-left: 3px solid #222;

    padding-left: 30px;

}



.experience ul {

    font-size: 17px;

}







/* =====================================
   Gallery
===================================== */


.gallery {

    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 25px;

}



.gallery img {

    width:100%;

    border-radius:8px;

    border:1px solid #ddd;

}





.gallery p {

    text-align:center;

}








/* =====================================
   Skills
===================================== */


.skills span {


    display:inline-block;

    padding:8px 18px;

    margin:6px;

    border:1px solid #bbb;

    border-radius:20px;

    font-size:15px;

    background:#fafafa;

}








/* =====================================
   Education / Reports
===================================== */


section h3 {

    font-size:24px;

    margin-bottom:8px;

}



.report {

    border-left:3px solid #0057b8;

    padding-left:25px;

}







/* =====================================
   Contact
===================================== */


#contact a {

    color:#0057b8;

    text-decoration:none;

}



#contact a:hover {

    text-decoration:underline;

}







/* =====================================
   Footer
===================================== */


footer {

    text-align:center;

    padding:40px;

    border-top:1px solid #ddd;

    color:#666;

    font-size:14px;

}


/* =====================================
   Compact Project Gallery
===================================== */


.project-gallery {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 15px;

    margin-top: 20px;

}



.project-gallery figure {

    margin: 0;

    text-align: center;

}



.project-gallery img {

    width: 100%;

    height: 170px;

    object-fit: contain;

    border: 1px solid #ddd;

    border-radius: 6px;

}



.project-gallery figcaption {

    margin-top: 6px;

    font-size: 13px;

    color: #555;

}





@media(max-width:900px){

    .project-gallery {

        grid-template-columns:1fr;

    }


    .project-gallery img {

        height:auto;

    }

}

/* =====================================
   2x2 Project Gallery
===================================== */


.project-gallery-2x2 {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

    margin-top: 20px;

}



.project-gallery-2x2 figure {

    margin: 0;

    text-align: center;

}



.project-gallery-2x2 img {

    width: 100%;

    height: 220px;

    object-fit: contain;

    border: 1px solid #ddd;

    border-radius: 6px;

}



.project-gallery-2x2 figcaption {

    margin-top: 8px;

    font-size: 13px;

    color: #555;

}





@media(max-width:900px){

    .project-gallery-2x2 {

        grid-template-columns:1fr;

    }


    .project-gallery-2x2 img {

        height:auto;

    }

}



/* =====================================
   Responsive Design
===================================== */


@media(max-width:900px){


    nav {

        flex-direction:column;

        gap:15px;

    }



    nav ul {

        flex-wrap:wrap;

        justify-content:center;

    }



    .hero {

        flex-direction:column-reverse;

        text-align:center;

    }



    .hero h1 {

        font-size:42px;

    }



    .cards {

        grid-template-columns:1fr;

    }



    .gallery {

        grid-template-columns:1fr;

    }


}