/*
  CONTACT PAGE STYLES
  Controls the appearance of the contact form including layout, spacing,
  colors, button behavior, and input styling.
*/
/* Apply Poppins font to the whole contact page */
body{
    font-family: 'Poppins', sans-serif;
}

/* Main form container box (dark blue background) */
.container{
    background-color:  rgb(10, 33, 60);
    border-radius: 10px;
    max-width: 700px;
    min-width: 500px;
    margin: 40px auto;
    padding: 20px;
}

/* Row containing two side-by-side input boxes (name + email) */
.form-row{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.form-row .col{
    flex: 1;
}

/* Center alignment for message box container */
.form-group{
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 600px;
}
/* Text input styling: padding, rounded edges, clean layout */
input{
    width: 100%;
    padding: 10px;
    margin: 8px;
    /* border: 1px solid red; */
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;

}

/* Large message box styling */
textarea{
    width: 100%;
    padding: 10px;
    margin: 8px;
    /* border: 1px solid red; */
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
}

/* Submit button styling (white by default, blue border) */
button{
    width: 100%;
    padding: 10px;
    background-color: white;
    font-size: 16px;
    border-radius: 8px;
    border: 5px solid rgb(10, 33, 60);
    margin: 8px;
    box-sizing: border-box;
    transition: all 0.2s ease-in;
   
}

/* Hover effect: button turns red with white text */
button:hover{
    background-color: red;
    color: white;
    transition: all 0.8s ease-in;     
}