/* =========================================================
   CONTACT PAGE
========================================================= */

.contact-info-section {

    padding:
        var(--space-2xl) 0;

    background:
        var(--color-background);

}

/* =========================================================
   CONTACT INFO CARD
========================================================= */

.contact-info-card {

    height: 100%;

    display: flex;

    align-items: center;

    gap:
        var(--space-md);

    padding:
        var(--space-lg);

    border:
        1px solid rgba(16, 42, 67, 0.07);

    border-radius:
        var(--radius-lg);

    background:
        var(--color-white);

    box-shadow:
        var(--shadow-sm);

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal);

}

.contact-info-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        var(--shadow-md);

}

.contact-info-icon {

    width: 54px;

    height: 54px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius:
        15px;

    background:
        rgba(244, 119, 33, 0.09);

    color:
        var(--color-secondary);

    font-size:
        18px;

}

.contact-info-card span {

    display: block;

    margin-bottom: 3px;

    color:
        var(--color-text-light);

    font-size:
        var(--fs-xs);

}

.contact-info-card h3 {

    margin:
        0 0 4px;

    color:
        var(--color-primary);

    font-size:
        var(--fs-sm);

    font-weight:
        var(--fw-bold);

    word-break:
        break-word;

}

.contact-info-card p {

    margin: 0;

    color:
        var(--color-text-light);

    font-size:
        11px;

}

/* =========================================================
   MAIN CONTACT SECTION
========================================================= */

.contact-main-section {

    padding:
        var(--space-3xl) 0;

    background:
        var(--color-white);

}

.contact-intro {

    padding-top:
        var(--space-md);

}

.contact-intro-text {

    max-width:
        570px;

    margin-bottom:
        var(--space-md);

    color:
        var(--color-text-light);

    font-size:
        var(--fs-sm);

    line-height:
        1.8;

}

/* =========================================================
   TRUST LIST
========================================================= */

.contact-trust-list {

    margin-top:
        var(--space-xl);

    display:
        flex;

    flex-direction:
        column;

    gap:
        var(--space-md);

}

.contact-trust-item {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

}

.contact-trust-icon {

    color:
        var(--color-secondary);

    font-size:
        17px;

    line-height:
        1.5;

}

.contact-trust-item strong {

    display:
        block;

    margin-bottom:
        3px;

    color:
        var(--color-primary);

    font-size:
        var(--fs-xs);

    font-weight:
        var(--fw-bold);

}

.contact-trust-item span {

    display:
        block;

    color:
        var(--color-text-light);

    font-size:
        11px;

    line-height:
        1.6;

}

/* =========================================================
   FORM CARD
========================================================= */

.contact-form-card {

    height:
        100%;

    padding:
        var(--space-xl);

    border:
        1px solid rgba(16, 42, 67, 0.07);

    border-radius:
        var(--radius-xl);

    background:
        var(--color-white);

    box-shadow:
        var(--shadow-lg);

}

.contact-form-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        var(--space-md);

    margin-bottom:
        var(--space-xl);

    padding-bottom:
        var(--space-lg);

    border-bottom:
        1px solid rgba(16, 42, 67, 0.07);

}

.contact-form-header span {

    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--color-secondary);

    font-size:
        var(--fs-xs);

    font-weight:
        var(--fw-bold);

    letter-spacing:
        0.08em;

}

.contact-form-header h3 {

    margin: 0;

    color:
        var(--color-primary);

    font-family:
        var(--font-heading);

    font-size:
        var(--fs-xl);

}

.contact-form-header-icon {

    width:
        52px;

    height:
        52px;

    flex-shrink: 0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        15px;

    background:
        var(--color-primary);

    color:
        var(--color-white);

    font-size:
        17px;

}

/* =========================================================
   FORM LABEL
========================================================= */

.contact-form label {

    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--color-primary);

    font-size:
        var(--fs-xs);

    font-weight:
        var(--fw-semibold);

}

.contact-form label span {

    color:
        var(--color-secondary);

}

/* =========================================================
   INPUT
========================================================= */

.contact-input {

    position:
        relative;

}

.contact-input>i {

    position:
        absolute;

    left:
        15px;

    top:
        50%;

    transform:
        translateY(-50%);

    z-index:
        2;

    color:
        var(--color-secondary);

    font-size:
        13px;

}

.contact-input input,
.contact-input select {

    width:
        100%;

    height:
        50px;

    padding:
        0 15px 0 42px;

    border:
        1px solid rgba(16, 42, 67, 0.12);

    border-radius:
        var(--radius-md);

    outline:
        none;

    background:
        #fafbfc;

    color:
        var(--color-text);

    font-family:
        var(--font-body);

    font-size:
        var(--fs-xs);

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast);

}

.contact-input input:focus,
.contact-input select:focus {

    border-color:
        var(--color-secondary);

    background:
        var(--color-white);

    box-shadow:
        0 0 0 3px rgba(244, 119, 33, 0.08);

}

.contact-input input::placeholder {

    color:
        #9aa6b2;

}

/* =========================================================
   TEXTAREA
========================================================= */

.contact-textarea {

    position:
        relative;

}

.contact-textarea>i {

    position:
        absolute;

    left:
        15px;

    top:
        17px;

    color:
        var(--color-secondary);

    font-size:
        13px;

}

.contact-textarea textarea {

    width:
        100%;

    padding:
        14px 15px 14px 42px;

    resize:
        vertical;

    min-height:
        125px;

    border:
        1px solid rgba(16, 42, 67, 0.12);

    border-radius:
        var(--radius-md);

    outline:
        none;

    background:
        #fafbfc;

    color:
        var(--color-text);

    font-family:
        var(--font-body);

    font-size:
        var(--fs-xs);

    line-height:
        1.6;

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast);

}

.contact-textarea textarea:focus {

    border-color:
        var(--color-secondary);

    background:
        var(--color-white);

    box-shadow:
        0 0 0 3px rgba(244, 119, 33, 0.08);

}

.contact-textarea textarea::placeholder {

    color:
        #9aa6b2;

}

/* =========================================================
   SUBMIT BUTTON
========================================================= */

.contact-submit-btn {

    width:
        100%;

    min-height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    margin-top:
        var(--space-sm);

    border:
        0;

    border-radius:
        var(--radius-md);

    background:
        var(--color-secondary);

    color:
        var(--color-white);

    font-family:
        var(--font-body);

    font-size:
        var(--fs-sm);

    font-weight:
        var(--fw-bold);

    cursor:
        pointer;

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast);

}

.contact-submit-btn:hover {

    transform:
        translateY(-2px);

    background:
        #df6415;

    box-shadow:
        var(--shadow-md);

}

.contact-submit-btn i {

    transition:
        transform var(--transition-fast);

}

.contact-submit-btn:hover i {

    transform:
        translateX(4px);

}

/* =========================================================
   MAP SECTION
========================================================= */

.contact-map-section {

    padding:
        0 0 var(--space-3xl);

    background:
        var(--color-white);

}

.contact-map-card {

    min-height:
        330px;

    display:
        grid;

    grid-template-columns:
        0.8fr 1.2fr;

    overflow:
        hidden;

    border-radius:
        var(--radius-xl);

    background:
        var(--color-primary);

    box-shadow:
        var(--shadow-lg);

}

.contact-map-content {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        var(--space-2xl);

}

.contact-map-content .section-title {

    color:
        var(--color-white);

}

.contact-map-content p {

    max-width:
        480px;

    margin:
        0 0 var(--space-lg);

    color:
        rgba(255, 255, 255, 0.65);

    font-size:
        var(--fs-sm);

    line-height:
        1.7;

}

.contact-direction-btn {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    align-self:
        flex-start;

    padding:
        11px 17px;

    border-radius:
        var(--radius-md);

    background:
        var(--color-secondary);

    color:
        var(--color-white);

    font-size:
        var(--fs-xs);

    font-weight:
        var(--fw-semibold);

    transition:
        transform var(--transition-fast),
        background var(--transition-fast);

}

.contact-direction-btn:hover {

    transform:
        translateY(-2px);

    background:
        #df6415;

    color:
        var(--color-white);

}

/* =========================================================
   MAP PLACEHOLDER
========================================================= */

.contact-map-placeholder {

    min-height:
        330px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    background:
        linear-gradient(135deg,
            #edf1f4,
            #dfe6eb);

    color:
        var(--color-primary);

    text-align:
        center;

}

.map-placeholder-icon {

    width:
        65px;

    height:
        65px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        var(--space-md);

    border-radius:
        50%;

    background:
        var(--color-secondary);

    color:
        var(--color-white);

    font-size:
        22px;

    box-shadow:
        0 10px 25px rgba(244, 119, 33, 0.25);

}

.contact-map-placeholder strong {

    margin-bottom:
        5px;

    font-family:
        var(--font-heading);

    font-size:
        var(--fs-lg);

}

.contact-map-placeholder span {

    color:
        var(--color-text-light);

    font-size:
        var(--fs-xs);

}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .contact-main-section {

        padding:
            var(--space-2xl) 0;

    }

    .contact-intro {

        padding-top:
            0;

    }

    .contact-map-card {

        grid-template-columns:
            1fr;

    }

}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .contact-info-section {

        padding:
            var(--space-xl) 0;

    }

    .contact-main-section {

        padding:
            var(--space-2xl) 0;

    }

    .contact-form-card {

        padding:
            var(--space-lg);

        border-radius:
            var(--radius-lg);

    }

    .contact-form-header h3 {

        font-size:
            var(--fs-lg);

    }

    .contact-form-header-icon {

        width:
            45px;

        height:
            45px;

        font-size:
            15px;

    }

    .contact-map-content {

        padding:
            var(--space-xl);

    }

    .contact-map-placeholder {

        min-height:
            260px;

    }

}