/* ==========================
   CSS VARIABLES
========================== */

:root{
    --primary:#2563eb;
    --secondary:#0f172a;
    --light:#f8fafc;
    --white:#ffffff;
    --gray:#64748b;
    --text:#1e293b;
    --shadow:0 10px 25px rgba(0,0,0,.12);
    --radius:12px;
}

/* ==========================
   RESET
========================== */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Roboto",sans-serif;
    background:var(--light);
    color:var(--text);
    line-height:1.7;
}

/* ==========================
   NAVBAR
========================== */

nav{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:20px 8%;

    background:var(--secondary);

    position:sticky;
    top:0;
    z-index:999;
}

nav .left a{
    text-decoration:none;
    color:white;
    font-size:28px;
    font-weight:700;
}

nav .right a{
    text-decoration:none;
    color:white;

    display:flex;
    align-items:center;
    gap:8px;

    background:var(--primary);

    padding:10px 20px;

    border-radius:50px;

    transition:.3s;
}

nav .right a:hover{
    background:#1d4ed8;
    transform:translateY(-3px);
}

/* ==========================
   HERO
========================== */

.hero-section{
    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:60px;

    padding:80px 8%;

    min-height:90vh;
}

.hero-section .text{
    flex:1;

    animation:slideLeft 1s ease;
}

.hero-section h2{
    font-size:48px;
    margin-bottom:20px;
}

.hero-section p{
    text-align:justify;
    color:var(--gray);
    margin-bottom:30px;
}

.links{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
}

.links a{
    text-decoration:none;
    color:white;

    background:var(--primary);

    padding:12px 22px;

    border-radius:8px;

    transition:.3s;
}

.links a:hover{
    background:#1d4ed8;
    transform:translateY(-5px);
}

.headshot{
    flex:1;
    display:flex;
    justify-content:center;

    animation:fadeIn 1.4s ease;
}

.headshot img{
    width:340px;
    height:340px;

    object-fit:cover;

    border-radius:50%;

    border:6px solid var(--primary);

    box-shadow:var(--shadow);

    transition:.4s;
}

.headshot img:hover{
    transform:scale(1.05);
}

/* ==========================
   SECTIONS
========================== */

section{
    padding:80px 8%;
}

section h2{
    text-align:center;
    font-size:38px;
    margin-bottom:40px;
}

/* ==========================
   SKILLS
========================== */

.skills-section{
    background:white;
}

.skills-section .text{
    max-width:850px;
    margin:auto;

    text-align:center;

    color:var(--gray);
}

/* ==========================
   ACHIEVEMENT
========================== */

.achievement-section{
    background:#eef4ff;
}

.achievement-card{
    max-width:1000px;

    margin:auto;

    background:white;

    display:flex;
    align-items:center;

    gap:40px;

    padding:30px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:.3s;
}

.achievement-card:hover{
    transform:translateY(-8px);
}

.person-details{
    text-align:center;
}

.person-details img{
    width:240px;

    border-radius:10px;
}

.person-details h3{
    margin-top:15px;
}

.achievement-card .text{
    color:var(--gray);
    text-align:justify;
}

/* ==========================
   CONTACT
========================== */

.contact-section{
    background:white;
}

.group{
    display:flex;
    gap:50px;
    align-items:flex-start;
}

.group .text{
    flex:1;

    font-size:20px;
}

form{
    flex:1;

    display:flex;
    flex-direction:column;
}

label{
    margin-top:15px;
    margin-bottom:8px;

    font-weight:500;
}

input,
textarea{

    padding:14px;

    border:1px solid #ccc;

    border-radius:8px;

    font-size:16px;

    outline:none;

    transition:.3s;

}

input:focus,
textarea:focus{

    border-color:var(--primary);

    box-shadow:0 0 8px rgba(37,99,235,.25);

}

button{

    margin-top:20px;

    padding:15px;

    border:none;

    border-radius:8px;

    background:var(--primary);

    color:white;

    font-size:17px;

    cursor:pointer;

    transition:.3s;

}

button:hover{

    background:#1d4ed8;

    transform:translateY(-3px);

}

/* ==========================
   ANIMATIONS
========================== */

@keyframes slideLeft{

from{
    opacity:0;
    transform:translateX(-50px);
}

to{
    opacity:1;
    transform:translateX(0);
}

}

@keyframes fadeIn{

from{
    opacity:0;
    transform:translateY(40px);
}

to{
    opacity:1;
    transform:translateY(0);
}

}

/* ==========================
   RESPONSIVE TABLET
========================== */

@media(max-width:900px){

.hero-section{

    flex-direction:column-reverse;

    text-align:center;

}

.hero-section p{

    text-align:center;

}

.links{

    justify-content:center;

}

.achievement-card{

    flex-direction:column;

}

.achievement-card .text{

    text-align:center;

}

.group{

    flex-direction:column;

}

}

/* ==========================
   RESPONSIVE MOBILE
========================== */

@media(max-width:600px){

nav{

    padding:18px 20px;

}

.hero-section{

    padding:50px 20px;

}

section{

    padding:60px 20px;

}

.hero-section h2{

    font-size:34px;

}

section h2{

    font-size:30px;

}

.headshot img{

    width:230px;

    height:230px;

}

.links{

    flex-direction:column;

}

.links a{

    width:100%;

    text-align:center;

}

.person-details img{

    width:180px;

}

}