/* -------------- application.css ------------------- */


.section-page {
    font-family: 'Futura','Inter','Avenir','Helvetica Neue',Arial,sans-serif;
    color: black;
    line-height: 1.6;
    background-color: #f5f6fa;
}
.section-page .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
}



.section-page .hero {
     background: linear-gradient(135deg, #008080, #1e9292);
    color: white; 
    padding: 80px 0; 
    text-align: center; 
    margin-bottom: 40px; 
 
}
.section-page .hero.user-info {
    background: linear-gradient(135deg,#008080, #1e9292);
   
}



.section-page .hero h1 {
    font-family: 'Source Serif Pro','Playfair Display',serif;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 20px;
}
.section-page .hero p {
    font-size: 1.2rem;
    opacity: .95;
    max-width: 800px;
    margin: 0 auto; 
}

/* Form card */
form#assessment-form {
    max-width: 700px;
    margin: 2rem auto;
    padding: 2rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* Headers  */
form fieldset legend,
form label[for] {
    font-family: 'Source Serif Pro','Playfair Display',serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: #222;
    margin-top: 1.5rem;
    margin-bottom: .5rem;
    display: block;
    border-left: 4px solid  #008080; 
    padding-left: .5rem;
}

/* Checkbox styling  */
fieldset label {
    font-family: 'Inter','Helvetica Neue',Arial,sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: #444;
    display: block;
    margin: .45rem 0;
}
fieldset input { margin-right: .5rem; }

/* Inputs */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
textarea {
    width: 100%;
    padding: .8rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
    transition: border .2s, box-shadow .2s;
    resize: none;
    box-sizing: border-box;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus {
    border-color: #6c63ff;
    box-shadow: 0 0 6px rgba(108,99,255,.3);
    outline: none;
}


.note { font-size: .95rem; color: #666; }
.required { color: #d93025; font-weight: 700; margin-left: .2rem; }

/* Button */
.submit-btn {
    display: inline-block;
    margin-top: 1.5rem;
    padding: .8rem 1.25rem;
    background:  #008080;
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, transform .1s ease;
}
.submit-btn:hover { 
    background: rgba(0, 128, 128, 0.5);
    transform: translateY(-2px); 
}

/* error  */
.form-error { color: #b00020; font-weight: 600; margin: 8px 0 16px; }
fieldset { border: 0; margin: 1.25rem 0; padding: 0; }