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


:root {

    --bg: #f8f4ee;
    --white: #ffffff;
    --green: #7d9275;
    --green-dark: #5f7258;
    --brown: #756452;
    --text: #33332f;
    --soft: #ebe3d7;

}


body {

    background: var(--bg);

    color: var(--text);

    font-family: "Inter", Arial, sans-serif;

    line-height: 1.8;

}



header {

    padding: 35px 8%;

}



nav {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.logo {

    font-size: 24px;

    color: var(--brown);

    font-weight: 500;

}



.menu {

    display: flex;

    gap: 28px;

}



.menu a {

    text-decoration: none;

    color: var(--text);

    font-size: 15px;

    transition: .3s;

}



.menu a:hover {

    color: var(--green-dark);

}



.languages {

    font-size: 14px;

    color: var(--green-dark);

}






/* HERO */


.hero {

    min-height: 85vh;

    padding: 50px 8%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 70px;

}



.hero-text {

    max-width: 650px;

}



h1 {

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(55px, 7vw, 85px);

    font-weight: 600;

    line-height: 1;

    color: var(--brown);

}



.hero h2 {

    margin-top: 20px;

    font-size: 30px;

    font-weight: 400;

    color: var(--green-dark);

}



.hero p {

    margin-top: 30px;

    font-size: 19px;

    color: #555;

}



.button {

    display: inline-block;

    margin-top: 35px;

    padding: 15px 35px;

    background: var(--green-dark);

    color: white;

    border-radius: 40px;

    text-decoration: none;

    transition: .3s;

}



.button:hover {

    background: var(--brown);

}





.profile-photo {

    width: 360px;

    height: 460px;

    object-fit: cover;

    border-radius: 200px 200px 30px 30px;

    box-shadow: 0 15px 35px rgba(0,0,0,0.08);

}







/* SECTIONS */


section {

    padding: 90px 8%;

}



section h2 {


    font-family: "Cormorant Garamond", serif;


    font-size: 48px;


    font-weight: 600;


    color: var(--brown);


    margin-bottom: 30px;


}



section p {

    max-width: 850px;

    font-size: 18px;

    color: #555;

    margin-bottom: 20px;

}







/* SERVICES */


.cards {


    display: grid;

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

    gap: 30px;

    margin-top: 40px;

}



.cards div {


    background: var(--white);


    padding: 35px;


    border-radius: 25px;


    box-shadow: 0 15px 35px rgba(0,0,0,0.05);


}



.cards h3 {


    color: var(--green-dark);

    margin-bottom: 15px;

    font-size: 22px;

    font-weight: 500;


}







footer {


    text-align:center;


    padding:40px;


    color:#888;


}







@media(max-width:900px){


nav {

    flex-direction: column;

    gap:20px;

}


.menu {

    flex-wrap:wrap;

    justify-content:center;

}


.hero {


    flex-direction:column;

    text-align:center;


}



.photo-placeholder {


    width:280px;

    height:360px;


}



.cards {


    grid-template-columns:1fr;


}


section {

    padding:60px 7%;

}



}
.contact-cards {

    display:grid;

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

    gap:30px;

    margin-top:40px;

}



.contact-card {

    background:white;

    padding:35px;

    border-radius:25px;

    box-shadow:0 15px 35px rgba(0,0,0,0.05);

}



.contact-card h3 {

    font-size:22px;

    color:var(--green-dark);

    margin-bottom:15px;

}



.contact-card p {

    font-size:17px;

    margin-bottom:20px;

}



.contact-card a {

    color:var(--brown);

    text-decoration:none;

    font-weight:500;

}



.contact-card a:hover {

    color:var(--green-dark);

}



@media(max-width:900px){

.contact-cards {

    grid-template-columns:1fr;

}

}
.languages a {
    text-decoration: none;
    color: var(--green-dark);
}

.languages a:hover {
    color: var(--brown);
}