.mdc_container { display: flex; align-items: center; } .mdc_container a { color: #3a4cf2; } .mdc_left_block { width: 65%; display: flex; align-items: flex-start; } .mdc_left_block .control-label.mdc_label { font-weight: bold; color: black; padding: 7px 5px; } .mdc_left_block .mdc_outline_button { padding: 10px 25px; border-radius: 15px; box-shadow: none; border: 1px solid #3a4cf2; background-color: white; color: #3a4cf2; } .mdc_left_block .mdc_outline_button:hover, .mdc_left_block .mdc_outline_button:focus { color: white; background-color: #3a4cf2; } .form-group.mdc_form_group { margin: 0; } .mdc_right_block { width: 35%; display: flex; flex-direction: column; border: 1px solid #bdc3c7; box-shadow: 5px 3px 6px #ecf0f1; border-radius: 10px; padding: 20px; } .mdc_title { font-size: 20px; color: black; margin: 0; } .mdc_text { margin: 10px 0; color: black; } .mdc_right_block .mdc_button { text-decoration: none; background-color: #3a4cf2; border: 1px solid #3a4cf2; color: white; padding: 15px 25px; border-radius: 25px; width: 60%; text-align: center; } .mdc_right_block .mdc_button:focus, .mdc_right_block .mdc_button:hover { text-decoration: none; background-color: white; color: #3a4cf2; } .mdc_button_position { position: relative; top: -4px; } @media screen and (max-width: 768px) { .mdc_container { flex-direction: column; } .mdc_left_block, .mdc_right_block { width: 100%; } .mdc_left_block { flex-direction: column; align-items: initial; } .mdc_right_block { margin-top: 20px; } .mdc_title { font-size: 18px; } .mdc_text { text-align: justify; } .mdc_right_block .mdc_button { width: 100%; } } @media screen and (min-width: 1025px) and (max-width: 1200px) { .mdc_button_position { top: 0; } }