/*---------------------------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------*/

@media (max-width: 430px) {
    .container-ctct-outer {display:flex; flex-direction:column; gap:50px; padding: 50px 10px 100px 10px; align-items: center; }
    .container-contact-details { height:auto; order:2;}
    .container-contact-form { height:auto; order:3;}
    .container-contact-form-row { display:flex; flex-direction:column;}
    .container-contact-contacted {order: 1;}
    .container-contact-method {flex-direction: column;gap: 25px; align-items:center; padding: 10px 0px 10px 0px;}
    .contact-image {width:66%; height:auto;}
    .input_s1 {width:300px;}
    .td_input_l { padding: 7px 0px 0px 0px; }
    .td_input_r { padding: 0px 0px 0px 0px; }
    .td_error { padding: 0px 0px 0px 0px; }
    .td_input_submit { padding: 7px 0px 0px 0px; }
    .td_input_spam_text { padding: 7px 0px 0px 0px; }
    .td_input_spam_box { padding: 7px 0px 0px 0px;}
}

@media (min-width:431px) {
    .container-ctct-outer {display:flex; flex-direction:column; gap:100px; padding: 50px 10px 100px 10px; justify-content: center;}
    .container-contact-details { height:auto; width:431px;order:2;}
    .container-contact-form { height:auto; width:431px; order:3; }
    .container-contact-form-row { display:flex; flex-direction:column;}
    .container-contact-contacted {order:1;}
    .container-contact-method {flex-direction: column;gap: 25px; align-items:center; padding: 20px 0px 40px 0px; justify-content:center;}
    .contact-image {width:70%; height:auto;}
    .input_s1 {width:350px;}
    .td_input_l { padding: 15px 20px 0px 20px; }
    .td_input_r { padding: 0px 20px 0px 20px; }
    .td_error { padding: 0px 20px 0px 25px; }
    .td_input_submit { padding: 25px 20px 20px 20px; }
    .td_input_spam_text { padding: 25px 20px 0px 25px; }
    .td_input_spam_box { padding: 5px 20px 0px 20px;}
}

@media (min-width:1000px){
    .container-ctct-outer {display:flex; flex-direction:row; gap:100px; padding: 50px 0px 100px 0px; justify-content: center; }
    .container-contact-method {flex-direction: row; gap: 30px; justify-content:center;}
}


@media (min-width:1200px) {
    .container-contact-details { height:880px; min-width:450px; order:1;}
    .container-contact-form { height:880px; width:auto;order:2;}
    .container-contact-form-row { display:flex; flex-direction:row;}
    .container-contact-contacted {order: 3;}
    .contact-image {width:80%; height:auto;}
    .input_s1 {width:400px;}
    .td_input_l { padding: 15px 20px 0px 20px; }
    .td_input_r { padding: 15px 20px 0px 20px; }
    .td_error {}
    .td_input_submit { padding: 25px 20px 20px 20px; }
    .td_input_spam_text { padding: 25px 20px 0px 25px; }
    .td_input_spam_box { padding: 5px 20px 0px 20px;}
}

/*---------------------------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------*/

.heading-dark {}
.heading-light {color: rgb(230,231,232);}

.contact-image {
    width:50px;
    height:auto;
}

.container-contact-promo {
    padding: 75px 0px 20px 0px;
    text-align: center;
}

.container-contact-outer {
    margin: auto;
}

.container-contact-details {
    background-image: url(../images/contact_background.png);
    background-color: rgb(2,112,135);
    background-repeat: no-repeat;
    background-size: cover;
    border: hidden;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    padding: 50px 20px 50px 20px;
}

.container-contact-details-row {
    align-content: center;
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    gap: 25px;
    padding-bottom: 20px;
    width: 100%;
}

.container_contact_details_row_p, .container_contact_details_row_p:hover {
    color: rgb(230,231,232);
}

.container-contact-form {
    background-color: rgb(230,231,232);
    background-repeat: no-repeat;
    background-size: cover;
    border: hidden;
    border-radius: 10px;
    display:flex;
    flex-direction: column;
    padding: 50px 20px 50px 20px;
}

.container-contact-form-row {

}

.container_contacted_main {
    min-height: 600px;
    padding: 20px 0px 0px 0px;
    display:flex;
    align-items:center;
    align-content:center;
    justify-content:center;
}

.container-contact-method {
    display: flex;
}

.container-contact-method-child {

}


.column-left {
    align-items: center;
    justify-content: center;
}

.column-right {
    justify-content: center;
}

.input_s1 {
    height:40px;
}

.input_validation_error {
    color: red;
}

.td_input_l, .td_input_r {
    color: var(--colour-normaltext);
    font-family: CustomFontSourceSans3Medium;
    font-weight: 500;
    font-size: 1.125em;
    width:185px;
}

.td_input_submit {
}

.td_input_spam_text {
}

.td_input_spam_box {
}

.td_error {
    color: red;
}

.contact-method-box-01, .contact-method-box-02, .contact-method-box-03, .contact-method-box-04 {
    border-radius: 12px;
    border: 1px solid rgb(60,60,60);
    min-height: 180px;
    padding: 10px 10px 10px 10px;
    text-align: center;
    width: 230px;
    transition:0.2s;
}

.contact-method-box-01, .contact-method-box-04 {
    background: rgb(14,113,137);
    color: rgb(245,245,245);
}

.contact-method-box-01:hover {
    background: rgba(0, 73, 97,1);
    color: rgb(255,255,255);
}

.contact-method-box-02 {
    background: rgba(177, 224, 230, 1);
    color: rgba(60,60,60,1);
}

.contact-method-box-02:hover {
    background: rgb(17,158,201);
}

.contact-method-box-03 {
    background: #25d366;
    color: rgb(40,40,40);
}

.contact-method-box-03:hover {
    background: #58f699;
}

.contact-link:hover {
    text-decoration:none;
}