@charset "UTF-8";

/**********************************************/
body{ background: #F6F8FA; }
form{ 
    display: flex; flex-flow: row wrap; justify-content: space-between; width: 100%; max-width: 1065px; margin: 0 auto;  
}

main h2{ width: 100%; color: #232323; font-weight: 600;}

figure{ flex: 1; display: inline-block; padding: 0 10px; }
figcaption{ text-align: center; color: rgba(26, 26, 26, 0.7); font-weight: 700; }
figure img{ display: block; width: 100%; max-width: 130px; margin: 0 auto; margin-top: 15px;}
main p{ display: none; width: 100%; font-weight: 400; border-bottom: 1px solid #E7E7E7; }


main label, label > *{ width: 100%; }
main label{ font-weight: 500; color: rgba(26, 26, 26, 0.7); }
main label > *{ margin-top: 34px; padding: 18px; }
main label:first-of-type{ margin-top: 30px;}
main label > input{ height: 50px; margin-bottom: 58px;}
main label > textarea{
    margin-bottom: 68px; 
    border: 1px solid #C6C6C6; border-radius: 5px;
    box-shadow: 0px 2px 10px rgba(156, 156, 156, 0.25);
}

#btn_send{ 
    height: 50px; margin: 0 auto;
    background: #FFEBA4; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    font-weight: 600; font-size: 1rem; color: #232323;
}
main span{ opacity: 0; width: 100%; text-align: center; font-weight: 400; font-size: 16px; transition: .3s ease-in;}
main span.active{ opacity: 1; }
main span.blue:before{ content: 'Inquiry has been sent successfully'; color: #06B4FF; }
main span.red:before{ content: 'Please fill all the blanks'; color: rgba(255, 0, 0, 0.7); }

/**********************************************/
/* ========================== responsive */
@media screen and (min-width: 1025px){
    form{ padding: 48px 0 200px;}
    main h2{ margin-bottom: 20px; font-size: 1.875rem;}

    main p{ 
        margin: 20px 0 35px; padding: 30px 0 55px; border-top: 1px solid rgba(231, 231, 231, 0.2); font-size: 1.125rem; line-height: 2rem;
    }

    main label{ font-size: 1.125rem;}
    main label > textarea{ height: 305px; }

    #btn_send{ width: 440px; }

    main span{ margin-top: 20px; }
}
/* ========================== */
@media screen and (max-width: 1600px){
    form{ padding: 48px 50px 60px;}
}
@media screen and (max-width: 1024px){
    main h2{ font-size: 1.66rem;}

    main hr{ width: 100%; margin: 34px 0 40px; border: .5px solid #E7E7E7;}

    main p{ margin: 42px 0 60px; padding: 42px 0; border-top: 1px solid #E7E7E7; font-size: 1.5rem; line-height: 2.66rem; }
    main label{ font-size: 1.5rem;}

    main #btn_send{ width: 322px; }
    main span{ margin-top: 15px;}
}

@media screen and (max-width: 768px){
    figure{ width: 33.33%}
    figure img{ width: 100%;}
}
@media screen and (max-width: 560px){
    form{ padding: 48px 20px 60px;}

    #btn_send{ width: 100%; }
}
@media screen and (max-width: 320px){
    form{ padding: 48px 15px 60px;}
}