body {
background-color: #fff;
}
.box_contact_page {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 60px 0;
}
.box_contact_page .left, .box_contact_page .right {
width: 45%;
}
.box_contact_page .left {
color: var(--blue);
}
.box_contact_page .left .title {
font-size: 100px;
font-family: "Sofia Sans Extra Condensed", sans-serif;
font-weight: 700;
text-transform: none;
line-height: 114px;
margin: 0;
}
.box_contact_page .left .text {
font-size: 18px;
color: var(--black);
line-height: 26px;
font-weight: 600;
}
.box_contact_page .left .text .underline {
text-decoration: underline;
}
.box_contact_page .left .text.mail {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 12px;
}
.box_contact_page .left .text .icon-mail {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.box_contact_page .left .text .icon-mail svg {
width: 15px;
color: var(--pink);
}
.box_contact_page .right form {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.box_contact_page .social_phone {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 30px;
margin: 25px 0 0;
}
.box_contact_page .social_phone .title_box {
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
margin: 0 0 20px;
}
.box_contact_page .social_phone .social-icons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 15px;
margin: 0;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.box_contact_page .social_phone svg {
width: 15px;
color: var(--pink);
-webkit-transition: 0.3s all ease-in-out;
-o-transition: 0.3s all ease-in-out;
transition: 0.3s all ease-in-out;
}
.box_contact_page .social_phone svg:hover {
opacity: .6;
}
.box_contact_page .social_phone .sep {
width: 1px;
height: 60px;
background-color: #d4d9dc;
margin: 0 10px;
}
.box_contact_page .social_phone .phone_contact .number {
font-size: 13px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
font-weight: 600;
}
.box_contact_page .social_phone .phone_contact .number .icon {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.box_contact_page .social_phone .phone_contact svg {
width: 12px;
}
.box_contact_page .right .input_form_contact {
border-radius: 8px;
padding: 12px;
font-size: 16px;
border: 2px solid #d4d9dc;
-webkit-transition: 0.3s all ease-in-out;
-o-transition: 0.3s all ease-in-out;
transition: 0.3s all ease-in-out;
width: 100%;
}
.box_contact_page .right .input_form_contact:focus {
border-color: var(--green);
}
.box_contact_page .right .input_form_contact.error {
border-color: red!important;
}
.box_input {
position: relative;
margin: 0 0 16px;
}
.box_contact_page .right .label_input {
position: absolute;
top: 14px;
left: 14px;
font-size: 16px;
color: var(--black);
font-weight: 500;
-webkit-transition: 0.3s all ease-in-out;
-o-transition: 0.3s all ease-in-out;
transition: 0.3s all ease-in-out;
z-index: 1;
background-color: #fff;
}
.box_contact_page .right .input_mesage {
height: 100px;
}
.box_contact_page .right .label_input.label_input_up {
top: -11px;
font-size: 12px;
background-color: var(--green);
border-radius: 30px;
color: #fff;
font-weight: 600;
padding: 3px 7px;
}
.box_contact_page .right .sendButtonContact {
text-align: center;
background-color: #25c61f;
font-size: 24px;
border: 0;
padding: 12px 5%;
color: #fff;
border-radius: 50px;
font-weight: 600;
margin: 0;
display: block;
-webkit-transition: 0.3s all ease-in-out;
-o-transition: 0.3s all ease-in-out;
transition: 0.3s all ease-in-out;
letter-spacing: 0.03em;
cursor: pointer;
}
.box_contact_page .right .sendButtonContact:hover { 
background-color: var(--green);
}
.box_contact_page .right .mandatory {
font-size: 10px;
color: #a8a8a8;
}
.statusFormContact {
text-align: center;
color: #f9f9f9;
font-size: 12px;
font-weight: 500;
margin: 0;
}
.statusFormContact .status_error{
margin: 0 0 15px;
display: block;
color: red;
}
@media only screen and (max-width:1500px){
.box_contact_page .left .title {
font-size: 85px;
line-height: 93px;
}
.box_contact_page .left .text {
font-size: 16px;
line-height: 25px;
}
.box_contact_page .right .sendButtonContact {
font-size: 22px;
}
}
@media only screen and (max-width:1300px){
.box_contact_page .left .title {
font-size: 71px;
line-height: 78px;
}
.box_contact_page .left .text {
font-size: 14px;
}
}
@media only screen and (max-width: 1100px) {
.box_contact_page .left .title {
font-size: 64px;
line-height: 72px;
}
}
@media only screen and (max-width: 1024px) {
.box_contact_page {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 40px;
}
.box_contact_page .left, .box_contact_page .right {
width: 100%;
}
.box_contact_page .social_phone {
margin: 30px 0 0;
}
}
@media only screen and (max-width:770px) {
.box_contact_page .right .sendButtonContact {
font-size: 20px;
}
.box_contact_page .right .label_input {
font-size: 14px;
}
}
@media only screen and (max-width:430px) {
.box_contact_page .left .title {
font-size: 56px;
line-height: 56px;
}
.box_contact_page .right .sendButtonContact {
font-size: 18px;
}
}
@media only screen and (max-width:380px) {
.box_contact_page .left .title {
font-size: 46px;
line-height: 51px;
}
.box_contact_page .social_phone .title_box {
font-size: 12px;
}
}
@media only screen and (max-width:350px) {
.box_contact_page .social_phone {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.box_contact_page .social_phone .sep {
display: none;
}
.box_contact_page .social_phone .title_box {
margin: 0 0 10px;
}
.box_contact_page .social_phone {
gap: 26px;
}
}