/* ==========================================================
   CONTACT FORM CARD
========================================================== */

.contact-form-card{

    background:#fff;

    width:520px;

    border-radius:24px;

    padding:24px 28px;

    box-shadow:
        0 40px 80px rgba(0,0,0,.20);

    box-sizing:border-box;

}


/* ==========================================================
   HEADER
========================================================== */

.contact-form-header h3{

    margin:0;

    color:#202F78;

    font-family:Manrope,sans-serif;

    font-size:18px;

    font-weight:700;

    line-height:1.2;

}


.contact-form-header p{

    margin:6px 0 22px;

    color:#70768A;

    font-size:14px;

    line-height:1.5;

}



/* ==========================================================
   FORM LAYOUT
========================================================== */


.contact-form{

    display:flex;

    flex-direction:column;

    gap:14px;

}



.contact-form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:16px;

}



/* ==========================================================
   FIELDS
========================================================== */


.contact-field{

    display:flex;

    flex-direction:column;

}


.contact-field label,
.contact-radio legend{

    margin-bottom:8px;

    color:#202F78;

    font-size:14px;

    font-weight:600;

    font-family:Manrope,sans-serif;

}



.contact-field input,
.contact-field select,
.contact-field textarea{


    width:100%;

    height:48px;

    box-sizing:border-box;


    padding:0 16px;


    border-radius:14px;


    border:1px solid #D8DCE8;


    background:#fff;


    color:#202F78;


    font-family:Manrope,sans-serif;


    font-size:15px;


    outline:none;


    transition:.25s;

}



.contact-field textarea{


    height:auto;

    min-height:95px;

    resize:none;

    padding:14px 16px;

    line-height:1.5;

}



/* Select */

.contact-field select{

    appearance:none;

    -webkit-appearance:none;

    -moz-appearance:none;


    cursor:pointer;


    padding-right:45px;


    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20'%3E%3Cpath fill='%23202F78' d='M5 7l5 6 5-6z'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 15px center;

}



/* Focus */

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus{


    border-color:#F7941D;


    box-shadow:
        0 0 0 3px rgba(247,148,29,.15);

}



/* ==========================================================
   RADIO
========================================================== */


.contact-radio{

    border:0;

    padding:0;

    margin:4px 0 0;

}



.contact-radio legend{

    margin-bottom:12px;

}



.contact-radio label{


    color:#202F78;

    font-size:15px;

    margin-right:22px;


    display:inline-flex;

    align-items:center;

    gap:8px;

}



.contact-radio input{

    accent-color:#F7941D;

}



/* ==========================================================
   BUTTON
========================================================== */


.contact-submit{


    width:100%;


    height:52px;


    border:0;


    border-radius:999px;


    background:#F7941D;


    color:#202F78;


    font-family:Manrope,sans-serif;


    font-size:16px;


    font-weight:700;


    cursor:pointer;


    transition:.25s;

}



.contact-submit:hover{

    background:#ef8d16;

}



/* ==========================================================
   FOOT NOTE
========================================================== */


.contact-form-note{


    margin:18px 0 0;


    text-align:center;


    color:#7B8095;


    font-size:13px;


    line-height:1.5;

}



/* ==========================================================
   MOBILE
========================================================== */


@media(max-width:768px){


    .contact-form-card{

        width:100%;

        padding:20px;

        border-radius:20px;

    }


    .contact-form-row{

        grid-template-columns:1fr;

        gap:14px;

    }

    .contact-field input,
    .contact-field select{
        height:44px;
        font-size:14px;
        padding:0 14px;
    }

    .contact-field textarea{
        min-height:80px;
        font-size:14px;
        padding:12px 14px;
    }

    .contact-form-header h3{
        font-size:17px;
    }

    .contact-form-header p{
        font-size:13px;
        margin:4px 0 18px;
    }

    .contact-radio label{
        font-size:14px;
        margin-right:16px;
        display:flex;
        align-items:center;
        gap:6px;
    }

    .contact-radio{
        margin:2px 0 0;
    }

    .contact-radio legend{
        font-size:13px;
        margin-bottom:10px;
    }

    .contact-submit{
        height:48px;
        font-size:15px;
    }

    .contact-form-note{
        font-size:12px;
        margin:16px 0 0;
    }

}


@media(max-width:480px){

    .contact-form-card{
        padding:16px;
        border-radius:18px;
        width:100%;
    }

    .contact-form{
        gap:12px;
    }

    .contact-form-row{
        gap:12px;
    }

    .contact-field label,
    .contact-radio legend{
        font-size:13px;
        margin-bottom:6px;
    }

    .contact-field input,
    .contact-field select{
        height:40px;
        font-size:13px;
        padding:0 12px;
        border-radius:12px;
    }

    .contact-field textarea{
        min-height:70px;
        font-size:13px;
        padding:10px 12px;
        border-radius:12px;
    }

    .contact-field select{
        padding-right:38px;
        background-position:right 12px center;
    }

    .contact-form-header h3{
        font-size:16px;
    }

    .contact-form-header p{
        font-size:12px;
        margin:4px 0 14px;
    }

    .contact-radio label{
        font-size:13px;
        margin-right:12px;
        gap:5px;
    }

    .contact-radio legend{
        font-size:12px;
        margin-bottom:8px;
    }

    .contact-radio{
        margin:0;
    }

    .contact-submit{
        height:44px;
        font-size:14px;
        border-radius:999px;
    }

    .contact-form-note{
        font-size:11px;
        margin:14px 0 0;
    }

    .contact-field input:focus,
    .contact-field select:focus,
    .contact-field textarea:focus{
        box-shadow:0 0 0 3px rgba(247,148,29,.12);
    }

}