﻿/* Footer RTL/LTR Support */
.Footer_ {
    direction: inherit;
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: inline-flex
}


[dir="rtl"] .Footer .footer-Info {
    flex-direction: row-reverse;
}

.footer-text {
    text-align: inherit;
}

[dir="rtl"] .footer-text {
    text-align: right;
}

[dir="ltr"] .footer-text {
    text-align: left;
}

/* Section padding - Responsive */
.footer-padding {
    padding-left: 156px;
    padding-right: 156px;
}

/* Tablet */
@@media (max-width: 1024px) {
    .footer-padding {
        padding-left: 80px;
        padding-right: 80px;
    }
}

/* Mobile */
@@media (max-width: 768px) {
    .footer-padding {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Small Mobile */
@@media (max-width: 480px) {
    .footer-padding {
        padding-left: 16px;
        padding-right: 16px;
    }
}

.image-360 {
    width: 69px;
    height: 48px;
    aspect-ratio: 23/16;
    border-radius: 8px;
    background: url(<path-to-image>) lightgray -86.692px -87.111px / 320.513% 462.963% no-repeat;
}

.text-360 {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-align: right;
    position: relative;
    z-index: 2;
}

/* Footer Info Container Responsive */
.footer-Info {
    width: 100%;
    /* max-width: 1128px; */
}

/* Fix Location container overflow */
.Location {
    max-width: 100%;
    overflow: hidden;
}

[dir="rtl"] .Location {
    justify-content: flex-start !important;
}

[dir="ltr"] .Location {
    justify-content: flex-start !important;
}

/* Web & Tablet - Fix alignment for Contact Us and Links sections */
@@media (min-width: 769px) {
    /* Only change container alignment, keep nested items as they are */
    .footer-Info > .Contact_Us {
        align-items: flex-start !important;
    }
    /* Ensure Contact_Us sections don't overflow */
    .footer-Info > .Contact_Us {
        max-width: 100%;
        min-width: 0;
    }
    /* Align Mail, Call, Location items properly for LTR/RTL */
    [dir="ltr"] .Mail,
    [dir="ltr"] .Call,
    [dir="ltr"] .Location {
        justify-content: flex-start !important;
        flex-direction: row !important;
        direction: ltr !important;
    }

    [dir="rtl"] .Mail,
    [dir="rtl"] .Call,
    [dir="rtl"] .Location {
        justify-content: flex-start !important;
    }
    /* Fix text alignment for LTR/RTL */
    [dir="ltr"] .Mail > div:last-child,
    [dir="ltr"] .Call > div:last-child,
    [dir="ltr"] .Location > div:last-child {
        text-align: left !important;
    }

    [dir="rtl"] .Mail > div:last-child,
    [dir="rtl"] .Call > div:last-child,
    [dir="rtl"] .Location > div:last-child {
        text-align: right !important;
    }
    /* Align Info_ container items to start */
    [dir="ltr"] .Contact_Us .Info_ {
        align-items: flex-start !important;
    }

    [dir="rtl"] .Contact_Us .Info_ {
        align-items: flex-start !important;
    }
}

/* Tablet - Adjust spacing and sizing */
@@media (max-width: 1024px) {
    .footer-Info {
        gap: 32px;
        flex-wrap: wrap;
    }

    .FollowUs, .Contact_Us {
        flex: 1 1 45%;
        min-width: 250px;
    }

    .text-360 span {
        font-size: 20px !important;
    }

    .Info_ {
        align-self: auto !important;
    }
}

/* Mobile - Stack all vertically */
@@media (max-width: 768px) {
    .footer-Info {
        flex-direction: column !important;
        align-items: center !important;
        gap: 40px;
    }

    .FollowUs, .Contact_Us {
        width: 100%;
        align-items: center;
        text-align: center;
        max-width: 100%;
        min-width: 0;
    }

    .footer-text {
        text-align: center !important;
    }

    .text-360 {
        text-align: center !important;
    }

        .text-360 span {
            font-size: 18px !important;
        }

    .SocialMedia {
        justify-content: center;
    }

    .image-360 {
        margin: 0 auto;
    }

    .image-360-2 {
        margin: 0 auto;
    }

    .Licenses {
        flex-direction: column !important;
        gap: 20px;
    }

    .Info_ {
        align-self: auto !important;
        max-width: 100%;
        width: 100%;
        align-items: center !important;
    }
    /* Center Mail, Call, and Location items in mobile */
    .Mail, .Call, .Location {
        justify-content: center !important;
        align-self: center !important;
        width: auto !important;
        max-width: 100%;
    }
    /* Ensure English (LTR) icons before text in mobile */
    [dir="ltr"] .Mail,
    [dir="ltr"] .Call,
    [dir="ltr"] .Location {
        flex-direction: row !important;
        direction: ltr !important;
    }

    .Mail > div:last-child,
    .Call > div:last-child,
    .Location > div:last-child {
        text-align: center !important;
        flex: 0 1 auto !important;
    }

    .Location {
        width: auto !important;
        max-width: 100%;
    }
}

/* Small Mobile - Smaller text and icons */
@@media (max-width: 480px) {
    .text-360 span {
        font-size: 16px !important;
    }

    .footer-text {
        font-size: 14px !important;
    }

    .Contact_Us .footer-text[style*="24px"] {
        font-size: 20px !important;
    }

    .FollowUs .footer-text[style*="24px"] {
        font-size: 20px !important;
    }

    .image-360 {
        width: 55px;
        height: 38px;
    }

    .Licenses > div {
        width: 100% !important;
        max-width: 200px;
    }

    .Info_ {
        align-self: auto !important;
    }
}

.image-360-2 {
    width: 120px;
    height: 96px;
    /*   aspect-ratio: 35/24; */
    background: url(<path-to-image>) lightgray -13.121px -22.715px / 134.394% 194.645% no-repeat;
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    display: flex;
    object-fit: contain;
    background-color: #6a5c8b;
}

.foooter-style {
    align-self: stretch;
    padding-top: 65px;
    padding-bottom: 64px;
    background: var(--Primary-500, #6A5D8B);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
    display: flex
}
