.branch-form-container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin-top: 50px;
    padding: 0;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);

    .contact-us-detail {
        flex: 1 1 280px;
        padding: 35px 30px;
        color: #fff;
        background: linear-gradient( 145deg, var(--app-primary) 0%, var(--app-secondary) 100% );

        h3 {
            position: relative;
            margin: 0 0 32px;
            padding-bottom: 18px;
            font-size: 2rem;
            font-weight: 700;
            line-height: 1.5;

            &::after {
                position: absolute;
                right: 0;
                bottom: 0;
                width: 55px;
                height: 3px;
                background: rgba(255, 255, 255, 0.8);
                border-radius: 5px;
                content: '';
            }
        }

        .contact-info {
            display: flex;
            flex-direction: column;
            gap: 20px;
            direction: rtl;
            text-align: right;

            p {
                display: flex;
                align-items: center;
                gap: 12px;
                margin: 0;
                font-size: 14px;
                line-height: 2;
                overflow-wrap: anywhere;
            }

            i {
                display: inline-flex;
                flex: 0 0 38px;
                align-items: center;
                justify-content: center;
                width: 38px;
                height: 38px;
                margin-top: 2px;
                color: #fff;
                background: rgba(255, 255, 255, 0.15);
                border: 1px solid rgba(255, 255, 255, 0.15);
                border-radius: 10px;
                font-size: 16px;
                transition: background 0.2s ease;
            }

            p:hover i {
                background: rgba(255, 255, 255, 0.25);
            }

            a {
                color: #fff;
                text-decoration: none;
                direction: ltr;
                unicode-bidi: isolate;
                transition: opacity 0.2s ease;

                &:hover {
                    opacity: 0.75;
                    text-decoration: underline;
                }
            }
        }
    }

    .contact-us-form {
        flex: 2 1 450px;
        min-width: 0;
        padding: 40px;
        background: #fff;

        .page-title {
            position: relative;
            margin: 0 0 32px;
            padding-bottom: 18px;
            text-align: center;
            font-size: 3rem;
            font-weight: 700;
            line-height: 1.5;

            &::after {
                position: absolute;
                right: 0;
                bottom: 0;
                width: 55px;
                height: 3px;
                background: rgba(255, 255, 255, 0.8);
                border-radius: 5px;
                content: '';
            }
        }

        .form-container {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0 18px;
            align-items: start;

            .custom-input {
                min-width: 0;
                width: 100%;
            }

            .custom-text-area {
                grid-column: 1 / -1;
                min-width: 0;
                width: 100%;
            }
        }
    }
}

@media (max-width: 767.98px) {
    .branch-form-container {
        margin-top: -40px;
        border-radius: 12px;

        .contact-us-detail {
            flex-basis: 100%;
            padding: 25px 22px;

            .page-title {
                margin-bottom: 24px;
                font-size: 1.7rem;
            }

            .contact-info {
                gap: 16px;

                p {
                    font-size: 13px;
                }
            }
        }

        .contact-us-form {
            flex-basis: 100%;
            padding: 25px 20px;

            .form-container {
                display: grid;
                grid-template-columns: repeat(1, minmax(0, 1fr));
                gap: 0 18px;
                align-items: start;
            }
        }
    }
}