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


body {

    font-family:
    Arial, Helvetica, sans-serif;

    background:#0f172a;
    color:white;

    line-height:1.6;
}



header {

    background:#020617; /*  */
    padding:20px;

}



nav {

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

}


.logo {

    color:#38bdf8; /*  */

}



nav ul {

    display:flex;
    list-style:none;
    gap:25px;

}



nav a {

    color:white;
    text-decoration:none;

}



nav a:hover {

    color:#38bdf8;

}



.hero {

    min-height:80vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:40px;

}



.hero h1 {

    font-size:4rem;

}



.hero h2 {

    color:#38bdf8;

    margin:20px;

}



.hero p {

    max-width:700px;

    margin:auto;

}



.button {

    display:inline-block;

    margin-top:30px;

    padding:12px 30px;

    background:#38bdf8;

    color:black;

    text-decoration:none;

    border-radius:8px;

}



.about {

    padding:50px;

    max-width:900px;

    margin:auto;

}



footer {

    text-align:center;

    padding:30px;

    background:#020617;

}



@media(max-width:700px){

nav {

flex-direction:column;

}


nav ul {

margin-top:20px;

}


.hero h1 {

font-size:2.5rem;

}

}


form {

    margin-top:30px;

    display:flex;

    flex-direction:column;

    gap:10px;

}


input,
textarea {

    padding:12px;

    border-radius:8px;

    border:none;

    font-size:1rem;

}


textarea {

    resize:vertical;

}


form button {

    border:none;

    cursor:pointer;

}