*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Segoe UI',Arial,sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{
    background:linear-gradient(135deg,#f5ff9d,#a3d94f,#6b8e23);
    color:#222;
    transition:.5s;
}

body.dark{
    background:linear-gradient(135deg,#1d2f12,#355e1d,#1f2e0d);
    color:#fff;
}

header{
    position:sticky;
    top:0;
    z-index:100;

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

    padding:18px 8%;

    background:rgba(255,255,255,.35);
    backdrop-filter:blur(12px);
}

.logo{
    display:flex;
    align-items:center;
    text-decoration:none;
    cursor:pointer;
    transition:.3s;
}

.logo:hover{
    transform:scale(1.05);
}

.logo img{
    width:65px;
    height:65px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid white;
}

nav{
    display:flex;
    align-items:center;
    gap:20px;
}


nav a{
    text-decoration:none;
    color:#222;
    font-weight:bold;
    transition:.3s;
}


body.dark nav a{
    color:white;
}


nav a:hover{
    color:#4b6f18;
}

button{
    padding:10px 18px;
    border:none;
    border-radius:25px;
    background:#556b2f;
    color:white;
    cursor:pointer;
    font-weight:bold;
    transition:.3s;
}


button:hover{
    transform:scale(1.05);
    background:#6b8e23;
}

.hero{

    min-height:100vh;

    display:flex;

    justify-content:space-evenly;

    align-items:center;

    gap:60px;

    padding:60px 8%;

    flex-wrap:wrap;

}


.intro{
    flex:1;
    max-width:550px;
}


.intro h1{
    font-size:52px;
    margin-bottom:15px;
}


.intro h3{
    color:#4b6f18;
    margin-bottom:20px;
}


body.dark .intro h3{
    color:#d9ff66;
}


.intro p{
    line-height:1.8;
}

.profile{
    flex:1;
    display:flex;
    justify-content:center;
}


.profile img{

    width:340px;

    height:340px;

    border-radius:50%;

    object-fit:cover;

    border:8px solid white;

    box-shadow:0 10px 25px rgba(0,0,0,.3);

}

.box{

    min-height:100vh;

    width:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:80px 10%;

}

.about-card{

    width:800px;

    max-width:90%;

    padding:40px;

    border-radius:25px;

    background:white;

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

    text-align:center;

    line-height:1.7;

    font-size:18px;

}

body.dark .about-card{

    background:rgba(255,255,255,.15);

    color:white;

}

#extraAbout{

    margin-top:20px;

}

.hidden{

    display:none;

}

#moreAbout{

    margin-top:20px;

    padding:12px 30px;

    border:none;

    border-radius:25px;

    background:#556b2f;

    color:white;

    cursor:pointer;

    font-weight:bold;

}


#moreAbout:hover{

    background:#6b8e23;

}

.cards{

    width:100%;

    max-width:900px;

    display:grid;

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

    gap:25px;

    margin-top:35px;

}


.card{

    background:rgba(255,255,255,.75);

    padding:30px;

    border-radius:20px;

    font-size:20px;

    font-weight:bold;

    transition:.3s;

}


.card p{

    font-size:15px;

    font-weight:normal;

}


.card:hover{

    transform:translateY(-10px);

}


body.dark .card{

    background:rgba(73,107,21,.85);

    color:white;

}

.gallery{

    display:flex;

    gap:30px; 

    width:90%;

    max-width:1000px;

    overflow-x:auto;

    padding:20px;

}


.gallery img{

    width:280px;

    height:220px;

    object-fit:cover;

    border-radius:20px;

    flex-shrink:0;

    box-shadow:0 10px 20px rgba(0,0,0,.25);

    transition:.3s;

}


.gallery img:hover{

    transform:scale(1.05);

}

.image-viewer{

    display:none;

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.8);

    justify-content:center;

    align-items:center;

    z-index:999;

}


.image-viewer.show{

    display:flex;

}


.image-viewer img{

    max-width:90%;

    max-height:90%;

    border-radius:20px;

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

}

.contact-card{

    background:rgba(255,255,255,.75);

    padding:40px;

    width:450px;

    max-width:90%;

    border-radius:25px;

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

}

section{
    scroll-margin-top:100px;
}


.contact-card form{

    display:flex;

    flex-direction:column;

    gap:15px;

}


.contact-card input,
.contact-card textarea{

    padding:12px;

    border-radius:10px;

    border:none;

    outline:none;

    font-size:16px;

}


.contact-card textarea{

    height:120px;

    resize:none;

}


body.dark .contact-card{

    background:rgba(255,255,255,.12);

    color:white;

}


footer{

    width:100%;

    background:#556b2f;

    color:white;

    text-align:center;

    padding:35px;

}



.social{

    display:flex;

    justify-content:center;

    gap:30px;

}


.social a{

    width:50px;

    height:50px;

    border-radius:50%;

    background:white;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.3s;

}


.social img{

    width:30px;

    height:30px;

}


.social a:hover{

    transform:scale(1.15);

}