/* =========================================================
   INTELLIVEST — CONTACT PAGE
   File: assets/css/contact.css

   Global typography, colors, container and shared buttons
   are inherited from main.css wherever possible.
========================================================= */


/* =========================================================
   01. PAGE
========================================================= */

.contact-page {
    width: 100%;
    overflow: hidden;
}


/* =========================================================
   02. CONTACT MAIN SECTION
========================================================= */

.contact-main {
    background: #fff;
    padding-block: var(--section-padding);
}

.contact-main__grid {
    display: grid;
    grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr);
    align-items: start;
    gap: var(--space-xl);
}


/* =========================================================
   03. CONTACT LEFT COLUMN
========================================================= */

.contact-info-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}


/* Contact Information Card */

.contact-info-card {
    padding: var(--space-xl);
    background: #f4f7f9;
    border-radius: var(--radius-md);
    box-shadow:
        0 2px 3px rgba(7, 33, 56, 0.10),
        0 6px 14px rgba(7, 33, 56, 0.06);
}

.contact-info-card__title {
    margin: 0 0 var(--space-sm);
    color: var(--navy);
    font-size: var(--fs-h3);
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-heading);
}

.contact-info-card__text {
    margin: 0 0 var(--space-lg);
    color: var(--body-color);
    line-height: var(--lh-copy);
}


/* Contact Details */

.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-info-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    color: var(--body-color);
    line-height: 1.45;
}

.contact-info-list a {
    color: inherit;
    text-decoration: none;
}

.contact-info-list a:hover {
    color: var(--copper);
}


/* Contact Icons */

.contact-info-list svg,
.contact-info-list img,
.contact-info-list i {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    color: var(--navy);
    fill: currentColor;
}


/* Social Area */

.contact-info-socials {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid rgba(7, 33, 56, 0.12);
}

.contact-info-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--navy);
    text-decoration: none;
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.contact-info-socials a:hover {
    color: var(--copper);
    transform: translateY(-2px);
}

.contact-info-socials svg,
.contact-info-socials img {
    width: 22px;
    height: 22px;
}


/* =========================================================
   04. MAP
========================================================= */

.contact-map {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: #edf2f5;
}

.contact-map iframe {
    display: block;
    width: 100%;
    height: 335px;
    border: 0;
}

.contact-map img {
    display: block;
    width: 100%;
    height: 335px;
    object-fit: cover;
}


/* =========================================================
   05. FORM COLUMN / CARD
========================================================= */

.contact-form-column {
    min-width: 0;
}

.contact-form-card {
    padding: var(--space-xl);
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow:
        0 2px 3px rgba(7, 33, 56, 0.12),
        0 6px 16px rgba(7, 33, 56, 0.07);
}


/* =========================================================
   06. FORMIDABLE FORM
========================================================= */

.contact-form-card .frm_forms {
    width: 100%;
}

.contact-form-card .frm_form_fields,
.contact-form-card fieldset {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

.contact-form-card .frm_form_field {
    margin-bottom: var(--space-md);
}


/* Labels */

.contact-form-card .frm_primary_label,
.contact-form-card .frm_form_field > label {
    display: block;
    margin: 0 0 var(--space-xs);
    color: var(--navy);
    font-family: inherit;
    font-size: var(--fs-body);
    font-weight: var(--fw-extrabold);
    line-height: 1.35;
}


/* Inputs */

.contact-form-card input[type="text"],
.contact-form-card input[type="email"],
.contact-form-card input[type="tel"],
.contact-form-card input[type="number"],
.contact-form-card input[type="url"],
.contact-form-card input[type="password"],
.contact-form-card select,
.contact-form-card textarea {
    width: 100%;
    max-width: 100%;
    min-height: 42px;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid #dbe1e6;
    border-radius: var(--radius-sm);
    outline: none;
    background: #fff;
    color: var(--navy);
    font: inherit;
    box-shadow: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.contact-form-card textarea {
    min-height: 100px;
    resize: vertical;
}

.contact-form-card input:focus,
.contact-form-card select:focus,
.contact-form-card textarea:focus {
    border-color: var(--copper);
    box-shadow: 0 0 0 2px rgba(189, 113, 62, 0.10);
}


/* Formidable Description / Sub Labels */

.contact-form-card .frm_description,
.contact-form-card .frm_description p,
.contact-form-card .frm_opt_container,
.contact-form-card .frm_inline_box {
    color: var(--body-color);
    font-size: var(--fs-xs);
    line-height: 1.4;
}

.contact-form-card .frm_description {
    margin-top: var(--space-2xs);
}


/* =========================================================
   07. FIRST + LAST NAME
========================================================= */

/*
   Formidable normally creates its own grid for a Name field.
   These rules make the two inputs equal width.
*/

.contact-form-card .frm_combo_inputs_container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
}

.contact-form-card .frm_combo_inputs_container > * {
    min-width: 0;
}

.contact-form-card .frm_combo_inputs_container label {
    display: block;
    margin-top: var(--space-xs);
    color: var(--body-color);
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
}


/* =========================================================
   08. FORMIDABLE GRID
========================================================= */

.contact-form-card .frm_fields_container {
    column-gap: var(--space-sm);
}


/*
   Formidable may apply its own grid classes.
   Keep half-width fields aligned.
*/

.contact-form-card .frm_half {
    min-width: 0;
}


/* =========================================================
   09. FILE UPLOAD
========================================================= */

.contact-form-card .frm_dropzone {
    width: 100%;
    max-width: 100% !important;
    min-height: 100px;
    margin: 0;
    padding: 0 !important;
    border: 1px dashed #9baabd;
    border-radius: var(--radius-sm);
    background: #fff;
    text-align: center;
}

.contact-form-card .frm_dropzone .dz-message {
    margin: 0;
    color: var(--navy);
}

.contact-form-card .frm_dropzone .dz-message svg {
    width: 22px;
    height: 22px;
    margin-bottom: var(--space-xs);
}

.contact-form-card .frm_dropzone .frm_upload_text,
.contact-form-card .frm_dropzone .dz-message {
    font-size: var(--fs-xs);
    line-height: 1.45;
}

.contact-form-card .frm_dropzone .frm_small_text {
    display: block;
    margin-top: var(--space-2xs);
    color: #8c9bad;
    font-size: 11px;
}


/* =========================================================
   10. CHECKBOX / PRIVACY POLICY
========================================================= */

.contact-form-card .frm_checkbox {
    margin: 0;
}

.contact-form-card .frm_checkbox label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    color: var(--body-color);
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    line-height: 1.5;
    cursor: pointer;
}

.contact-form-card input[type="checkbox"] {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin: 2px 0 0;
    accent-color: var(--copper);
}

.contact-form-card .frm_checkbox a {
    color: var(--copper);
    text-decoration: none;
}

.contact-form-card .frm_checkbox a:hover {
    text-decoration: underline;
}


/* =========================================================
   11. SUBMIT BUTTON
========================================================= */

.contact-form-card .frm_submit {
    margin-top: var(--space-md);
}

.contact-form-card .frm_submit button,
.contact-form-card .frm_submit input[type="submit"],
.contact-form-card button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin: 0;
    padding: 9px 24px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--copper);
    color: #fff;
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.contact-form-card .frm_submit button:hover,
.contact-form-card .frm_submit input[type="submit"]:hover,
.contact-form-card button[type="submit"]:hover {
    background: var(--copper-dark);
    transform: translateY(-1px);
}


/* =========================================================
   12. FORM VALIDATION
========================================================= */

.contact-form-card .frm_error {
    margin-top: var(--space-2xs);
    color: #b42318;
    font-size: var(--fs-xs);
}

.contact-form-card .frm_error_style {
    margin-bottom: var(--space-md);
    padding: var(--space-sm);
    border: 1px solid rgba(180, 35, 24, 0.20);
    border-radius: var(--radius-sm);
    background: rgba(180, 35, 24, 0.05);
    color: #b42318;
}

.contact-form-card .frm_message {
    margin-bottom: var(--space-md);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
}


/* =========================================================
   14. RTL / FARSI
========================================================= */

html[dir="rtl"] .contact-page {
    direction: rtl;
}

html[dir="rtl"] .contact-info-list li,
html[dir="rtl"] .contact-info-socials,
html[dir="rtl"] .contact-form-card .frm_checkbox label {
    direction: rtl;
}

html[dir="rtl"] .contact-info-card,
html[dir="rtl"] .contact-form-card,
html[dir="rtl"] .contact-form-card input,
html[dir="rtl"] .contact-form-card textarea,
html[dir="rtl"] .contact-form-card select {
    text-align: right;
}

html[dir="rtl"] .contact-form-card .frm_combo_inputs_container label {
    text-align: right;
}


/* =========================================================
   15. TABLET
========================================================= */

@media (max-width: 991px) {

    .contact-main__grid {
        grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
        gap: var(--space-lg);
    }

    .contact-info-card,
    .contact-form-card {
        padding: var(--space-lg);
    }

}


/* =========================================================
   16. MOBILE / SMALL TABLET
========================================================= */

@media (max-width: 767px) {

    .contact-main__grid {
        grid-template-columns: 1fr;
    }

    .contact-info-column {
        order: 1;
    }

    .contact-form-column {
        order: 2;
    }

    .contact-map iframe,
    .contact-map img {
        height: 300px;
    }

}


/* =========================================================
   17. MOBILE
========================================================= */

@media (max-width: 575px) {

    .contact-info-card,
    .contact-form-card {
        padding: var(--space-md);
    }

    .contact-form-card .frm_combo_inputs_container {
        grid-template-columns: 1fr;
    }

    .contact-map iframe,
    .contact-map img {
        height: 260px;
    }
}


/* =========================================================
   18. VERY SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

    .contact-info-card,
    .contact-form-card {
        padding-inline: var(--space-sm);
    }

    .contact-map iframe,
    .contact-map img {
        height: 240px;
    }

}
/* =========================================================
   19. FIGMA CONTACT REFINEMENTS
========================================================= */
.contact-sidebar{display:flex;flex-direction:column;gap:20px;min-width:0}
.contact-info-card{padding:40px;background:#f5f8fb;border-radius:7px;box-shadow:0 4px 4px rgba(0,0,0,.25)}
.contact-info-card h2{margin:0 0 12px;color:var(--navy,#072138);font-size:var(--fs-h3,24px);font-weight:var(--fw-extrabold,800);line-height:var(--lh-heading,1.18)}
.contact-info-card__intro{margin:0 0 28px;color:var(--body-color,#4c4f52);line-height:var(--lh-copy,1.65)}
.contact-info-card__details{display:flex;flex-direction:column;gap:18px}
.contact-info-item{display:flex;align-items:flex-start;gap:12px;color:var(--body-color,#4c4f52);line-height:1.4;text-decoration:none}
a.contact-info-item:hover{color:var(--copper,#bd713e)}
.contact-info-item__icon{display:inline-flex;flex:0 0 20px;align-items:center;justify-content:center;width:20px;height:20px;margin-top:1px;color:var(--navy,#072138)}
.contact-info-item__icon svg{display:block;width:20px;height:20px;fill:currentColor}
.contact-info-item--address>span:last-child{max-width:300px}
.contact-info-card__divider{width:100%;height:1px;margin:22px 0 18px;background:rgba(7,33,56,.14)}
.contact-socials{display:flex;align-items:center;gap:14px}
.contact-socials a{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;color:var(--navy,#072138);text-decoration:none;transition:color .2s ease,transform .2s ease}
.contact-socials a:hover{color:var(--copper,#bd713e);transform:translateY(-1px)}
.contact-socials svg{display:block;width:21px;height:21px;fill:currentColor}
.contact-map{border-radius:7px;box-shadow:none}
.contact-map iframe,.contact-map img{height:355px}
.contact-form-card{padding:40px;border-radius:7px;box-shadow:0 4px 4px rgba(0,0,0,.25)}
.contact-form-card .frm_forms .frm_submit button,
.contact-form-card .frm_forms .frm_submit input[type="submit"],
.contact-form-card .frm_forms button[type="submit"],
.contact-form-card .frm_forms input[type="submit"]{width:auto!important;min-width:96px!important;min-height:40px!important;padding:10px 24px!important;border:1px solid var(--copper,#bd713e)!important;border-radius:4px!important;background:var(--copper,#bd713e)!important;color:#fff!important;font-family:inherit!important;font-size:12px!important;font-weight:500!important;line-height:1!important;text-shadow:none!important;box-shadow:none!important;margin:0}
/* .frm_style_formidable-style.with_frm_style .form-field{margin:0!important} */
.with_frm_style .frm_form_fields > fieldset{padding:0;}
.frm_style_formidable-style.with_frm_style .form-field{margin-bottom: 15px;}
.with_frm_style .frm_top_container .frm_primary_label, .with_frm_style .frm_hidden_container .frm_primary_label, .with_frm_style .frm_pos_top{margin: 0;}
div#frm_field_6_container{margin: 0;}
.contact-form-card .frm_forms .frm_submit button:hover,
.contact-form-card .frm_forms .frm_submit input[type="submit"]:hover,
.contact-form-card .frm_forms button[type="submit"]:hover,
.contact-form-card .frm_forms input[type="submit"]:hover{border-color:var(--copper-dark,#9a5328)!important;background:var(--copper-dark,#9a5328)!important;color:#fff!important}
html[dir="rtl"] .contact-info-item,html[dir="rtl"] .contact-socials{direction:rtl}
html[dir="rtl"] .contact-info-item--address>span:last-child{text-align:right}
@media(max-width:991px){.contact-info-card,.contact-form-card{padding:32px}.contact-map iframe,.contact-map img{height:320px}}
@media(max-width:767px){.contact-sidebar{gap:20px}.contact-info-card,.contact-form-card{padding:28px}.contact-map iframe,.contact-map img{height:300px}}
@media(max-width:575px){.contact-info-card,.contact-form-card{padding:24px}.contact-info-card__details{gap:14px}.contact-map iframe,.contact-map img{height:260px}}



/* =========================================================
   PRIVACY POLICY LINK
========================================================= */

.contact-privacy-link {
    color: var(--secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

.contact-privacy-link:hover {
    color: var(--secondary-dark);
}

.contact-privacy-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}