/* footer section start */

.footer-main {
    padding: 34px 25px 0 25px;
    background: #000000;
    overflow: hidden;
}

.footer-top-left h6,
.footer-top-right-left-content h6 {
    font-size: 21px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0;
    color: #ffffff;
    margin-bottom: 16px;
}

.footer-top-left p,
.footer-top-right-left-content p {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: normal;
    color: #ffffff;
}
.text-capital{
    text-transform: uppercase;
}
.footer-top-left {
    background: #191919;
    color: #ffffff;
    padding: 22px;
    border-radius: 7px;
    height: 255px;
    max-width: calc(50% - 9px);
    flex: 1;
    /* height is temporory till developement */
}

.footer-top-main {
    display: flex;
    align-items: center;
    gap: 18px;
    height: 255px;
}

.footer-top-right {
    flex: 1;
}

.footer-top-right-right video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 7px;

}

.footer-top-right-right {
    flex: 1;
    height: 100%;
    position: relative;
    border-radius: 7px;
}

.footer-top-right-left img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 7px;
    z-index: 1;
}

.footer-top-right-left {
    flex: 3;
    position: relative;
    height: 100%;
    border-radius: 7px;
}

.footer-top-right {
    display: flex;
    align-items: center;
    gap: 21px;
    height: 100%;
}

.footer-top-right-left-content {
    position: absolute;
    top: 22px;
    left: 22px;
    z-index: 2;
}

.footer-middle-left,
.footer-middle-right {
    flex: 1;
    width: calc(50% - 9px);
}

.footer-middle-main {
    padding: 55px 0 144px 0;
    color: #ffffff;
    display: flex;
    align-items: flex-start;
    gap: 18px;

}

.footer-middle-left p {
    margin-bottom: 10px;
}

.footer-middle-left-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 60px;
    max-width: 500px;
}

.footer-middle-main * {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0;
}

p.ftr-country-label {
    margin-bottom: 5px;
    text-transform: uppercase;
}
.footer-middle-right p.ftr-country-addr > *,
.footer-middle-right p.ftr-country-addr  {
    line-height: 1.2 !important;
}
a.footer-main-email {
    font-size: 28px;
    text-decoration: underline;
}

.footer-middle-left-inner a {
    text-decoration: underline;
}

.footer-middle-right {
    display: flex;
    align-items: stretch !important;
    justify-content: flex-start;
    gap: 120px;
}
.footer-social-liks li a span{
    padding-left: 0 !important;
}
.footer-social-liks li a{
  display: flex;
  align-items: center;
  gap: 14px;
}
.footer-address {
    max-width: 125px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.footer-address .clock-block {
    margin-top: auto;
    padding-top: 24px;
}

.footer-bottom-main-inner p,
.footer-legal a {
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0;
}
.footer-bottom-main-inner p{
    text-transform: uppercase;
}

.footer-bottom-main-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ffffff;
}

.footer-bottom-main svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.footer-bottom-main-inner .footer-legal a:not(:last-child) {
    position: relative;
}

.footer-bottom-main-inner .footer-legal a:not(:last-child)::after {
    position: absolute;
    top: 0px;
    right: -11px;
    content: "•";
    color: #ffffff;
    font-size: 12px;

}

.footer-top-right-left-content h6 {
    margin-bottom: 10px;
}

.footer-bottom-main-inner .footer-legal {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-left: auto;
    gap: 18px;
}

.footer-mox-logo {
    position: relative;
    bottom: -6px;
}

.footer-mox-logo img {
    width: 100%;
    object-fit: cover;
}

a.footer-main-email:hover,
.footer-middle-left-inner a:hover {
    text-decoration: none;
}

.footer-bottom-main-inner .footer-legal a:hover {
    text-decoration: underline;
}
.footer-top-left p{
    font-size: 12px;
}
.footer-main span.brackets {
    letter-spacing: -1.8px;
}
@media(max-width: 1366px){
    .footer-middle-left {
    max-width: calc(45% - 9px);
}
}
@media (max-width:992px){
    .footer-middle-left-inner > div {
        width: calc(100% / 4 - 10px);
    }
    .footer-middle-left-inner {
        justify-content: inherit;
        gap: 10px;
    }
    .footer-address{
        width: calc(100% / 4 - 10px);
        max-width: 100%;
    }
}

@media(max-width:767px){
    .footer-bottom-main-inner {
        margin: 0 0 10px;
    }
    .footer-top-left h6 {
    margin-bottom: 11px;
}

.footer-middle-left-inner {
    margin-top: 44px;
}

.footer-middle-left-inner > div > p:first-child {
    margin-bottom: 1px;
}

.footer-middle-main {
    padding: 100px 0 39px;
}

}

@media (max-width:640px){
    .footer-middle-left-inner > div {
        width: calc(100% / 2 - 10px);
    }
    .footer-middle-left-inner {
        justify-content: inherit;
        gap: 10px;
    }
    /* #M02-footer: grid (not flex-wrap) so every cell is equal height across
       rows. With flex-wrap, align-items: stretch only equalises items on the
       same row, leaving clocks misaligned across rows. grid-auto-rows: 1fr
       fixes every row to the same height; .clock-block { margin-top: auto }
       (from line 174) then pins each clock to the bottom of its equal-height
       cell so all clocks line up horizontally. */
    .footer-middle-right{
        /* #FB-06: !important required to beat responsive.css line 21's
           `.footer-middle-right { display: flex; … }` which is inside
           @media (max-width: 1499px) — that query matches at every viewport
           narrower than 1499px including this one, and because responsive.css
           loads AFTER footer.css the flex rule was winning the source-order
           tie. Result: layout fell back to flex with space-between + wrap,
           which pushed SOCIAL hard to the right of its row (justified to the
           end) while LA on the row above was pinned to a different right
           position because of different content widths — visible drift. */
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-auto-rows: 1fr;
        gap: 10px;
    }
    .footer-address{
        width: auto;
        max-width: 100%;
    }
    /* #FB-06: social occupies a single grid cell so it sits in the same
       column as the address above it (visual alignment requirement from the
       April 2026 feedback doc — social was previously full-row via
       `grid-column: 1 / -1`, which broke the column rhythm). !important to
       beat any cached/legacy rule that placed it elsewhere. justify-self:
       start anchors the cell content to the cell's left edge so (SOCIAL)
       lines up x-for-x with (LA) above it. */
    .footer-middle-right > .footer-social-liks {
        grid-column: auto !important;
        justify-self: start !important;
    }
    /* #FB-06: zero the <ul>'s browser-default padding-inline-start (~40px)
       so the social icon list aligns left-flush with the (SOCIAL) label
       above AND with the address text in the LA cell to its column-mate.
       Without this, the icons sit ~40px right of where addresses do. */
    .footer-middle-right > .footer-social-liks ul {
        padding: 0 !important;
        margin: 0 !important;
        list-style: none;
    }
    .footer-middle-left{
        max-width: 100% !important;
    }
}