.contactus-container {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3xl);
    background-color: var(--surface-surface, #ffffff);
    color: var(--surface-on-surface, #000000);
    font-family: 'Dubai', sans-serif;
    margin: 0 auto;
    max-width: 1536px;
    /* text-align: center; */
}

.map-container {
    /* flex: 1 1 50%; */
    /* max-width: 600px; */
    padding-bottom: var(--padding-3xl);
    /* height: 300px; */
    display: flex;
    gap: var(--gap-3xl);
}

.map-placeholder {
    width: 100%;
    height: 100%;
    background-color: #e0e0e0;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 16px;
    overflow: hidden;
    border-radius: 12px;
    max-height: 320px;
    flex: 1 1 50%;
    /* max-width: 600px; */
}

    .map-placeholder img {
        width: 100%;
        height: auto;
        /* display: block; */
        object-fit: cover;
    }

.contact-us-main {
    flex: 1 1 45%;
    /* min-width: 300px; */
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
}

.contact-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-title {
    font-size: var(--font-h6);
    line-height: var(--line-height-h6);
    font-weight: 400;
    margin: 0;
}

.contact-text {
    font-size: var(--font-body);
    line-height: var(--line-height-body);
    color: var(--surface-on-surface-variant, #40484F);
    margin: 0;
}

.social-icons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.icon {
    width: 24px;
    height: 24px;
    background-size: cover;
    border-radius: 4px;
}

@media (max-width: 1536px) {

    .map-placeholder {
        max-height: 300px;
    }
}

@media (max-width: 1280px) {
    .contactus-container {
        flex-direction: column;
        /* max-width: 600px; */
    }

    .map-container {
        max-width: 100%;
        flex-direction: column;
    }
}

@media (max-width: 767px) {
    .contact-us-sub {
        flex-wrap: wrap;
    }
}


/*
.facebook {
    background-color: #00677D;
    mask: url('facebook-icon.svg') no-repeat center;
    -webkit-mask: url('facebook-icon.svg') no-repeat center;
}

.google {
    background-image: url('google-icon.svg');
}

.apple {
    background-color: #000;
    mask: url('apple-icon.svg') no-repeat center;
    -webkit-mask: url('apple-icon.svg') no-repeat center;
}

.instagram {
    background-image: linear-gradient(0deg, #E09B3D, #C74C4D 30%, #C21975 60%, #7024C4);
    mask: url('instagram-icon.svg') no-repeat center;
    -webkit-mask: url('instagram-icon.svg') no-repeat center;
}*/


.contact-us-sub {
    margin-bottom: var(--gap-3xl);
    display: flex;
    gap: var(--gap-xl);
    flex: 1 0 100%;
}

.contact-us-card {
    flex: 1 1 50%;
    border: 1px solid var(--dda-outline);
    padding: var(--padding-lg);
    display: flex;
    flex-wrap: nowrap;
    gap: var(--gap-md);
    border-radius: 16px;
    align-items: center;
    justify-items: start;
}

.contact-us-card-icon-block {
    padding: var(--padding-sm);
    background-color: var(--dda-surface-container-low);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

    .contact-us-card-icon-block i.material-icons {
        color: var(--dda-primary);
    }

.contact-us-card-content-title {
    font-size: var(--font-body);
    font-weight: 400;
    line-height: var(--line-height-body);
}

.contact-us-card-content-value {
    font-size: var(--font-h6);
    font-weight: 400;
    line-height: var(--line-height-h6);
}


.contact-text strong {
    font-weight: 700;
}