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

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:#f6f8fb;

    color:#1e293b;

    line-height:1.8;

}

a{
    text-decoration:none;
}

.container{

    width:90%;

    max-width:1300px;

    margin:auto;

}

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

nav{

    background:#001f4d;

    position:sticky;

    top:0;

    z-index:999;

    box-shadow:0 2px 10px rgba(0,0,0,.15);

}

.nav-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

}

.logo{

    color:white;

    font-size:28px;

    font-weight:700;

}

nav ul{

    display:flex;

    gap:30px;

    list-style:none;

}

nav ul li a{

    color:white;

    font-weight:500;

    transition:.3s;

}

nav ul li a:hover{

    color:#60a5fa;

}

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

.hero{

    background:white;

    padding:80px 0;

}

.hero-grid{

    display:grid;

    grid-template-columns:280px 1fr;

    gap:60px;

    align-items:center;

}

.profile-img{

    width:100%;

    border-radius:20px;

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

}

.hero-right h1{

    font-size:58px;

    font-weight:800;

    margin-bottom:10px;

}

.hero-right h2{

    color:#2563eb;

    margin-bottom:10px;

}

.hero-right p{

    color:#475569;

}

.research{

    margin-top:15px;

    font-size:18px;

    font-weight:500;

}

/* =========================
   Badges
========================= */
.profile-left {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.badges {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 999px;
  background: #eaf2ff;
  color: #4b1b6f;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

/* =========================
   Links
========================= */

.links{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:25px;

}

.links a{

    background:#2563eb;

    color:white;

    padding:10px 18px;

    border-radius:10px;

    transition:.3s;

}

.links a:hover{

    background:#1d4ed8;

    transform:translateY(-2px);

}

/* =========================
   Statistics
========================= */

.stats{

    padding:60px 0;

}

.stats-grid{

    display:grid;

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

    gap:20px;

}

.card{

    background:white;

    padding:30px;

    border-radius:20px;

    text-align:center;

    box-shadow:0 3px 15px rgba(0,0,0,.05);

}

.card h3{

    color:#2563eb;

    font-size:42px;

}

.card p{

    margin-top:10px;

    color:#64748b;

}

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

section{

    padding:80px 0;

}

section h2{

    font-size:38px;

    margin-bottom:40px;

    color:#0f172a;

}

/* =========================
   Timeline
========================= */

.timeline{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.timeline-item{

    background:white;

    border-left:5px solid #2563eb;

    padding:25px;

    border-radius:12px;

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

}

.timeline-item h3{

    margin-bottom:5px;

}

/* =========================
   Publications
========================= */

.pub{

    background:white;

    padding:25px;

    border-radius:15px;

    margin-bottom:20px;

    box-shadow:0 2px 12px rgba(0,0,0,.05);

    transition:.3s;

}

.pub:hover{

    transform:translateY(-4px);

}

.pub h3{

    font-size:19px;

    margin-bottom:8px;

}

.pub p{

    color:#475569;

}

/* IF badge */

.if{

    float:right;

    background:#ef4444;

    color:white;

    font-size:12px;

    font-weight:600;

    padding:6px 12px;

    border-radius:8px;

}

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

.research-grid{

    display:grid;

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

    gap:25px;

}

.research-card{

    background:white;

    padding:30px;

    border-radius:15px;

    box-shadow:0 2px 12px rgba(0,0,0,.05);

    transition:.3s;

}

.research-card:hover{

    transform:translateY(-5px);

}

.research-card h3{

    margin-bottom:10px;

    color:#2563eb;

}

/* =========================
   Service
========================= */

.service-grid{

    display:grid;

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

    gap:25px;

}

.service-card{

    background:white;

    padding:30px;

    border-radius:15px;

    box-shadow:0 2px 12px rgba(0,0,0,.05);

}

.service-card h3{

    margin-bottom:15px;

    color:#2563eb;

}

.service-card ul{

    padding-left:18px;

}

/* =========================
   Funding
========================= */

.project{

    background:white;

    padding:25px;

    border-radius:15px;

    margin-bottom:20px;

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

}

.project h3{

    color:#2563eb;

    margin-bottom:10px;

}

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

.skills-grid{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

}

.skills-grid span{

    background:#2563eb;

    color:white;

    padding:10px 18px;

    border-radius:999px;

    font-size:14px;

}

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

footer{

    background:#001f4d;

    color:white;

    text-align:center;

    padding:60px 0;

    margin-top:60px;

}

footer h3{

    margin-bottom:10px;

}

.footer-links{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:20px;

    margin:20px 0;

}

.footer-links a{

    color:white;

    transition:.3s;

}

.footer-links a:hover{

    color:#60a5fa;

}

.copyright{

    margin-top:20px;

    opacity:.7;

}

/* =========================
   Mobile
========================= */

@media(max-width:1000px){

    .hero-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .profile-img{

        width:260px;

        margin:auto;

        display:block;

    }

    .stats-grid{

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

    }

}

@media(max-width:768px){

    nav ul{

        display:none;

    }

    .hero-right h1{

        font-size:42px;

    }

    .stats-grid{

        grid-template-columns:1fr;

    }

    section h2{

        font-size:30px;

    }

}

@media(max-width:480px){

    .container{

        width:95%;

    }

    .hero-right h1{

        font-size:34px;

    }

    .links{

        justify-content:center;

    }

}