/*
*
* This sheet contains the
* contact page styles
*
*/
/* Contact Form Styles */

#contact-form-section {
    background: #fff;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    /* border: 1px solid rgba(212, 175, 55, 0.3); gold accent */
    border: 1px solid rgba(0, 17, 255, 0.3);
    transition: all 0.3s ease-in-out;
}

#contact-form-section:hover {
    box-shadow: 0 12px 36px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

/* Heading */
#contact-form-section h2.contact_heading {
    font-size: 32px;
    margin-bottom: 25px;
    /*font-family: 'GraphikMedium';*/
font-family: "NotoSans", sans-serif;
font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #1a1a1a;
    border-bottom: 2px solid #d4af37;
    display: inline-block;
    padding-bottom: 8px;
}

/* Input fields */
#contact-form-section .form-group {
    margin-bottom: 20px;
    position: relative;
}

#contact-form-section label {
    font-size: 14px;
    font-weight: 600;
    color: #444;
    display: block;
    margin-bottom: 6px;
}

#contact-form-section input,
#contact-form-section textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #f6f3f2;
    border-radius: 10px;
    font-size: 15px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background: #E8EAEF;
}

#contact-form-section input:focus,
#contact-form-section textarea:focus {
    border-color: darkblue; /* gold */
    
    outline: none;
    box-shadow: 0 0 8px rgba(212,175,55,0.4);
    background: #fff;
}

/* Button */
#contact-form-section button {
    /* background: linear-gradient(135deg, #d4af37, #b8860b); */
   background: linear-gradient(135deg, darkblue, darkblue);
    color: #fff;
    padding: 14px 28px;
    border: none;
    border-radius: 30px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

#contact-form-section button:hover {
    /* background: linear-gradient(135deg, #b8860b, #d4af37); */
    background: linear-gradient(135deg, rgb(4, 4, 203), rgb(18, 18, 132));
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(53, 113, 244, 0.447);
}

/* reCAPTCHA */
.g-recaptcha {
    margin-top: 20px;
}

/* #page * {
  outline: 1px solid blue;
} */


/* h1 tag */
h2.contact_heading,
h1 {
    /* font-family: 'GraphikMedium'; */
    font-family: "NotoSans", sans-serif;
font-weight: 700;
    font-size: 36px;
    line-height: 46px;
    color: #303843;
}

.contact {
    /*font-family: 'GraphikMedium';*/
font-family: "NotoSans", sans-serif;
font-weight: 700;
    color: #1652A3 !important;
}

@media only screen and (max-width:767px) {
    h2.contact_heading,
    h1 {
        font-size: 28px;
        line-height: 34px;
    }
    #contact-form-section {
        padding: 30px 5px 20px;
    }
}


/* h2 tag */

h2,
h3 {
    /*font-family: 'GraphikMedium';*/
font-family: "NotoSans", sans-serif;
font-weight: 700;
    font-size: 16px;
    line-height: 26px;
    color: #3D3E46;
}

@media only screen and (max-width:767px) {
    h2 {
        font-size: 15px;
        line-height: 24px;
    }
    h3 {
        font-size: 14px;
        line-height: 24px;
    }
}


/* address */

.address {
    margin-top: 25px;
    font-size: 14px;
    line-height: 24px;
    color: #3D3E46;
}

.address .tel {
    display: block;
    margin-top: 20px;
}

@media only screen and (max-width:767px) {
    .address {
        display: flex;
        flex-direction: column;
        margin-top: 30px;
        font-size: 15px;
        line-height: 24px;
    }
}


/* Head Office Section */

#head-office-section {
    background-color: #E8EAEF;
}

@media only screen and (min-width:768px) {
    #head-office-section {
        position: relative;
        height: 540px;
        padding: 65px 0;
    }
}


/* Head Office Section h2 tag */

#head-office-section h2,
#head-office-section h3 {
    margin-top: 40px;
}


/* Head Office Address */

.head-office-contact {
    padding-top: 50px;
}

@media only screen and (max-width:767px) {
    .head-office-contact {
        padding-bottom: 50px;
    }
}


/* Head Office Image */

@media only screen and (min-width:768px) {
    .head-office-image {
        position: absolute;
        top: 65px;
        right: calc(50vw - 600px - 15px);
        width: 670px;
        height: 410px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .head-office-image {
        right: 15px;
    }
}

@media only screen and (max-width:767px) {
    .head-office-image {
        width: 100vw;
        height: 61vw;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
}


/* Global Offices Section */

#global-offices-section {
    padding: 70px 0 100px;
}

@media only screen and (max-width:767px) {
    #global-offices-section {
        padding: 70px 0 40px;
    }
}

@media only screen and (min-width:768px) {
    #global-offices-section .global-office-contacts .grid__col:nth-child(3n+1) {
        clear: left;
    }
    #global-offices-section .global-office-contacts .grid__col:not(:nth-child(3n+1)) {
        margin-left: calc(100%/12);
    }
}

.global-office-contact {
    margin-top: 60px;
    padding-bottom: 10px;
}

@media only screen and (max-width:767px) {
    #global-offices-section .global-office-contacts {
        padding: 20px 0 0;
    }
    .global-office-contact {
        cursor: pointer;
        margin-top: 0;
        padding: 30px 0;
        border-top: 1px solid rgba(157, 165, 175, 0.30);
    }
    #global-offices-section .global-office-contacts .grid__col:first-child .global-office-contact {
        border-top: 0;
    }
}


/* Visit Website Link */

.global-office-contact .component__visit-website-link {
    margin-top: 25px;
}

@media only screen and (max-width:767px) {
    .global-office-contact .component__visit-website-link {
        margin-top: 30px;
        padding-bottom: 20px;
    }
}


/* Contact Heading */

@media only screen and (min-width:768px) {
    .global-office-contact .contact-heading {
        padding-right: 36px;
    }
}

@media only screen and (max-width:767px) {
    .global-office-contact .contact-heading {
        position: relative;
        padding-right: 45px;
    }
    .global-office-contact .contact-heading::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        right: 5px;
        width: 8px;
        height: 15px;
        background-image: url('../../assets/vectors/icons/icon_rightarrow_blue.svg');
        background-size: 8px 15px;
        background-position: center;
        background-repeat: no-repeat;
        transform: rotate(90deg);
    }
    .global-office-contact.show .contact-heading::after {
        transform: rotate(270deg);
    }
    .global-office-contact .address,
    .global-office-contact .component__visit-website-link {
        display: none;
    }
    .global-office-contact.show .address,
    .global-office-contact.show .component__visit-website-link {
        display: flex;
    }
}