:root {

    --primary-color: black;
    --secondary-color: navy;
    --button-color: black;
    --button-hover: #DC143C;

    --text-color: #222;
    --border-color: #dcdcdc;

}

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

body{

    font-family: Arial, Helvetica, sans-serif;
    background: var(--secondary-color);
    color: var(--text-color);

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

    min-height:100vh;
    padding:20px;
}

.container{

    width:100%;
    max-width:500px;

    background:white;

    padding:25px;

    border-radius:18px;

    box-shadow:0 5px 25px rgba(0,0,0,0.08);
}

.profile-section{

    text-align:center;
    margin-bottom:30px;
}

.profile-image{

    width:120px;
    height:120px;

    border-radius:50%;
    object-fit:cover;

    border:3px solid var(--primary-color);

    margin-bottom:15px;
}

h1{

    color:var(--primary-color);
    margin-bottom:8px;
}

h2{

    color:var(--primary-color);
    margin-bottom:15px;
}

.contact-form{

    display:flex;
    flex-direction:column;
}

label{

    margin-bottom:8px;
    margin-top:18px;
    font-weight:600;
}

input,
select{

    width:100%;

    padding:14px;

    border:1px solid var(--border-color);

    border-radius:10px;

    font-size:16px;
}

button{

    margin-top:25px;

    padding:15px;

    border:none;

    border-radius:10px;

    background:var(--button-color);

    color:white;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    transition:0.3s;
}

button:hover{

    background:var(--button-hover);
}

@media (max-width:768px){

    .container{

        max-width:100%;
    }

    .profile-image{

        width:110px;
        height:110px;
    }
}