/* <editor-fold desc="Contact Categories"> */
.ContactCategories { display:flex; justify-content:center; align-items:stretch; gap:40px; flex-wrap:wrap; margin:0 auto 30px auto; width:100%; max-width:800px; padding-top:20px; }
.ContactCategories a { color:inherit; text-decoration:none; flex:1 1 220px; max-width:270px; min-width:220px; display:block; }
.ContactCategories .Category { display:flex; flex-direction:column; align-items:center; width:100%; min-height:230px; padding:12px; border-radius:12px; background:#fafafa; margin:0; box-shadow:0 2px 8px rgba(50,70,120,0.05); transition:box-shadow 0.2s; cursor:pointer; }
.ContactCategories .Category:hover { box-shadow:0 4px 12px rgba(50,70,150,0.12); }
.ContactCategories .Category .Title { font-size:20px; font-weight:bold; text-align:center; color:#3F81CB; padding-top:8px; }
.ContactCategories .Category .Icon { text-align:center; width:100%; }
.ContactCategories .Category .Icon img { width:100px; max-width:100%; height:auto; }
.ContactCategories .Category .Description { font-size:14px; padding-top:8px; color:#ADADAD; text-align:center; flex-grow:1; }
@media (max-width:700px) {
    .ContactCategories { flex-direction:column; gap:16px; max-width:350px; padding-left:0; padding-right:0; }
    .ContactCategories a { max-width:100%; min-width:0; flex:1 1 100%; }
}
/* </editor-fold> */

/* <editor-fold desc="Other Contact"> */
.OtherContact { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; width:100%; max-width:500px; margin:0 auto 20px auto; }
.OtherContact .OtherContactOption { flex:1 1 180px; min-width:120px; max-width:220px; text-align:center; padding:10px 4px; }
.OtherContact .OtherContactOptionImage img { width:70px; max-width:100%; height:auto; }
.OtherContact .OtherContactOption .OtherContactOptionTitle { color:#3F81CC; font-weight:bold; margin:8px 0 2px 0; }
.OtherContact .OtherContactOptionDescription { font-size:15px; color:#222; }
/* </editor-fold> */

/* <editor-fold desc="Google Map"> */
.ContactGoogleMap { width:100%; margin:0 auto; }
.map-responsive { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:10px; box-shadow:0 2px 8px rgba(50,70,120,0.13); margin-bottom:12px; }
.map-responsive iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:0; min-height:320px; }
/* </editor-fold> */

/* <editor-fold desc="Contact Form Styles"> */
.ContactForm {
    margin: 0 auto;
    max-width: 540px;
    padding: 16px 0 40px 0;
}
.ContactForm form {
    width: 90%;
    margin: 0 auto;
}
.ContactForm .FormTitle {
    font-family: Noto Sans, Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    margin: 20px 0 6px 0;
    color: #004B7F;
}
.ContactForm input[type="text"],
.ContactForm input[type="email"],
.ContactForm input[type="password"],
.ContactForm textarea {
    display: block;
    width: 100% !important;
    background-color: red;
    max-width: 340px;
    min-width: 140px;
    box-sizing: border-box;
    font-family: Noto Sans, Arial, sans-serif;
    font-size: 16px;
    padding: 10px 11px;
    border: 1px solid #c3d0e2;
    border-radius: 8px;
    margin-bottom: 10px;
    background: #fff;
    color: #232526;
    transition: border 0.17s;
}
.ContactForm input[type="text"]:focus,
.ContactForm input[type="email"]:focus,
.ContactForm input[type="password"]:focus,
.ContactForm textarea:focus {
    border-color: #ffcb21;
    outline: none;
}
.ContactForm textarea {
    min-height: 120px;
    resize: vertical;
}

.ContactForm img[alt="Verification code"] {
    margin: 12px 0 8px 0;
    max-width: 220px;
    border-radius: 5px;
    box-shadow: 0 3px 13px 0 #7772;
}
.ContactForm .FormError {
    color: #c9242b;
    font-size: 13px;
    margin-left: 8px;
    vertical-align: middle;
}

.ContactForm > *:not(:last-child) {
    margin-bottom: 12px;
}

/* Mobile optimization */
@media (max-width: 700px) {
    .ContactForm {
        padding: 10px 0 32px 0;
        max-width: 98vw;
    }
    .ContactForm input[type="text"],
    .ContactForm input[type="email"],
    .ContactForm input[type="password"],
    .ContactForm textarea {

        max-width: 100%;
        min-width: 0;
        font-size: 15px;
        padding: 10px 8px;
    }
}
@media (max-width: 460px) {
    .ContactForm {
        padding-left: 0;
        padding-right: 0;
    }
    .ContactForm .FormTitle { font-size: 15px; }
}
/* </editor-fold> */