/* =========================================================
   AJM GLOBAL TRADING LLC
   CORPORATE HEADER CSS
========================================================= */


/* =========================================================
   01. BRAND VARIABLES
========================================================= */

:root {
    --ajm-navy: #173d65;
    --ajm-deep: #07101d;
    --ajm-navy-light: #17283d;
    --ajm-blue: #243b53;
    --ajm-steel: #536a7e;
    --ajm-silver: #aeb8c2;
    --ajm-silver-light: #dfe4e8;
    --ajm-text: #1c2835;
    --ajm-text-light: #52606d;
    --ajm-muted: #7b8793;
    --ajm-border: #e3e7eb;
    --ajm-border-light: #edf0f2;
    --ajm-white: #ffffff;
    --ajm-offwhite: #f7f8f9;
    --ajm-transition: all 0.25s ease;
}


/* =========================================================
   02. GLOBAL RESET
========================================================= */

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Inter", sans-serif;
    color: var(--ajm-text);
    background: #ffffff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

button {
    font-family: inherit;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}


/* =========================================================
   03. HEADER
========================================================= */

.ajm-header {
    position: relative;
    width: 100%;
    background: var(--ajm-white);
    z-index: 1000;
}


/* =========================================================
   04. TOP BAR
========================================================= */

.ajm-topbar {
    width: 100%;
    height: 38px;
    background: var(--ajm-deep);
    color: rgba(255, 255, 255, 0.56);
    font-size: 10px;
    letter-spacing: 0.05px;
}

.ajm-topbar .container {
    height: 100%;
}

.ajm-topbar-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}


/* =========================================================
   TOP LEFT
========================================================= */

.ajm-top-left {
    display: flex;
    align-items: center;
    gap: 15px;
    white-space: nowrap;
}

.ajm-company-name {
    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

.ajm-top-message {
    color: rgba(255, 255, 255, 0.42);
    font-size: 9px;
    font-weight: 400;
}


/* =========================================================
   TOP RIGHT
========================================================= */

.ajm-top-right {
    display: flex;
    align-items: center;
    gap: 13px;
    white-space: nowrap;
}

.ajm-top-right a {
    color: rgba(255, 255, 255, 0.63);
    font-size: 9px;
    font-weight: 500;
    transition: color 0.2s ease;
}

.ajm-top-right a:hover {
    color: #ffffff;
}

.ajm-top-right i {
    margin-right: 5px;
    color: #aab5bf;
    font-size: 9px;
}

.ajm-top-divider {
    width: 1px;
    height: 11px;
    background: rgba(255, 255, 255, 0.12);
}


/* =========================================================
   05. MAIN HEADER
========================================================= */

.ajm-main-header {
    position: relative;
    width: 100%;
    height: 100px;
    background: #ffffff;
    border-bottom: 1px solid rgba(10, 20, 37, 0.07);
}

.ajm-main-nav {
    position: relative;
    height: 100px;
    display: flex;
    align-items: center;
    width: 100%;
}


/* =========================================================
   06. LOGO
========================================================= */

.ajm-logo {
    width: 215px;
    flex: 0 0 215px;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.ajm-logo img {
    width: 145px;
    height: auto;
    display: block;
}


/* =========================================================
   07. DESKTOP NAVIGATION
========================================================= */

.ajm-navigation {
    height: 100%;
    display: flex;
    align-items: center;
    margin-left: 38px;
}

.ajm-menu {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ajm-menu>li {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.ajm-menu>li>a {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    color: #3a4755;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.1px;
    white-space: nowrap;
    transition:
        color 0.25s ease,
        background 0.25s ease;
}


/* =========================================================
   NAV HOVER LINE
========================================================= */

.ajm-menu>li>a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 3px;
    background: var(--ajm-navy);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
}

.ajm-menu>li>a:hover,
.ajm-menu>li>a.active {
    color: var(--ajm-navy);
}

.ajm-menu>li>a:hover::after,
.ajm-menu>li>a.active::after {
    transform: scaleX(1);
}


/* =========================================================
   DROPDOWN ARROW
========================================================= */

.ajm-menu-link i {
    color: #7d8994;
    font-size: 8px;
    transition: transform 0.25s ease;
}

.ajm-dropdown-item:hover .ajm-menu-link i {
    transform: rotate(180deg);
}


/* =========================================================
   08. MEGA MENU
========================================================= */

.ajm-mega-menu {
    position: absolute;
    top: 100px;
    left: 0;
    width: 880px;
    background: #ffffff;
    border: 1px solid rgba(10, 20, 37, 0.09);
    border-top: 3px solid var(--ajm-navy);
    box-shadow:
        0 25px 70px rgba(8, 17, 31, 0.15);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px);
    transition:
        opacity 0.22s ease,
        transform 0.22s ease,
        visibility 0.22s ease;
}

.ajm-dropdown-item:hover .ajm-mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}


/* =========================================================
   09. MEGA HEADER
========================================================= */

.ajm-mega-top {
    min-height: 103px;
    padding: 24px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    border-bottom: 1px solid var(--ajm-border);
}

.ajm-mega-top>div {
    min-width: 0;
}

.ajm-mega-top span {
    display: block;
    margin-bottom: 7px;
    color: var(--ajm-steel);
    font-family: "Montserrat", sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;
}

.ajm-mega-top h3 {
    margin: 0 0 6px;
    color: var(--ajm-navy);
    font-family: "Montserrat", sans-serif;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.15;
}

.ajm-mega-top p {
    max-width: 600px;
    margin: 0;
    color: var(--ajm-muted);
    font-size: 10px;
    line-height: 1.6;
}


/* =========================================================
   VIEW ALL BUTTON
========================================================= */

.ajm-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    color: var(--ajm-navy);
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.ajm-view-all:hover {
    color: var(--ajm-steel);
}

.ajm-view-all i {
    font-size: 11px;
    transition: transform 0.2s ease;
}

.ajm-view-all:hover i {
    transform: translate(2px, -2px);
}


/* =========================================================
   LOCATION MEGA MENU
   Uses the existing AJM mega-menu design
========================================================= */

.ajm-location-mega-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    padding: 14px 16px 18px;

    gap: 4px;

}


/* LOCATION ITEM */

.ajm-location-mega-item {

    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 64px;

    padding: 10px 14px;

    text-decoration: none;

    background: #ffffff;

    border: 1px solid transparent;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;

}


/* NUMBER */

.ajm-location-number {

    width: 32px;

    height: 32px;

    flex: 0 0 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #b98a35;

    font-family: "Montserrat", sans-serif;

    font-size: 9px;

    font-weight: 700;

    background: #faf8f2;

    border: 1px solid rgba(214,168,79,0.35);

}


/* CONTENT */

.ajm-location-mega-item > div {

    min-width: 0;

}


.ajm-location-mega-item strong {

    display: block;

    margin-bottom: 4px;

    color: #17384f;

    font-family: "Montserrat", sans-serif;

    font-size: 11px;

    font-weight: 700;

    line-height: 1.3;

}


.ajm-location-mega-item small {

    display: block;

    color: #8a969f;

    font-size: 9px;

    line-height: 1.4;

}


/* ARROW */

.ajm-location-mega-item > i {

    margin-left: auto;

    color: #aab3ba;

    font-size: 12px;

    opacity: 0;

    transform: translateX(-4px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        color 0.2s ease;

}


/* HOVER */

.ajm-location-mega-item:hover {

    background: #f7f9fa;

    border-color: rgba(214,168,79,0.22);

    transform: translateX(3px);

}


.ajm-location-mega-item:hover strong {

    color: #c08e2d;

}


.ajm-location-mega-item:hover > i {

    opacity: 1;

    transform: translateX(0);

    color: #d6a84f;

}

/* =========================================================
   MOBILE LOCATION MEGA MENU
========================================================= */

@media (max-width: 991.98px) {

    /* Dropdown parent */
    .ajm-dropdown-item {
        display: block;
        width: 100%;
    }


    /* Location menu hidden by default */
    .ajm-dropdown-item .ajm-mega-menu {
        position: static;

        width: 100%;
        max-width: none;

        margin: 0;

        border-top: 1px solid rgba(10, 20, 37, 0.08);
        border-left: 0;
        border-right: 0;

        box-shadow: none;

        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transform: none;

        display: none;
    }


    /* OPEN STATE */
    .ajm-dropdown-item.mobile-open > .ajm-mega-menu {
        display: block;
    }


    /* Top part */
    .ajm-mega-top {

        display: block;

        padding: 20px;

    }


    .ajm-mega-top h3 {

        font-size: 19px;

    }


    .ajm-mega-top p {

        max-width: none;

        font-size: 11px;

    }


    /* View all */
    .ajm-mega-top .ajm-view-all {

        margin-top: 15px;

    }


    /* Locations */
    .ajm-location-mega-grid {

        grid-template-columns: 1fr;

        padding: 10px;

    }


    .ajm-location-mega-item {

        min-height: 58px;

        padding: 10px 12px;

    }


    /* Always show arrow on mobile */
    .ajm-location-mega-item > i {

        opacity: 1;

        transform: none;

    }


    /* Disable hover movement on touch */
    .ajm-location-mega-item:hover {

        transform: none;

    }


    /* Location link */
    .ajm-dropdown-item > .ajm-menu-link {

        cursor: pointer;

    }


    /* Rotate dropdown arrow */
    .ajm-dropdown-item.mobile-open
    > .ajm-menu-link
    > i {

        transform: rotate(180deg);

    }

}

/* =========================================================
   MOBILE LOCATION DROPDOWN
   MEGA-MENU STYLE
========================================================= */

.ajm-mobile-location-dropdown {
    position: relative;
    width: 100%;
}


/* =========================================================
   LOCATION TOGGLE
========================================================= */

.ajm-mobile-location-dropdown
.ajm-mobile-dropdown-toggle {

    width: 100%;

    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 22px;

    background: #ffffff;

    border: 0;

    color: var(--ajm-navy);

    font-family: "Montserrat", sans-serif;

    font-size: 14px;

    font-weight: 600;

    text-align: left;

    cursor: pointer;
}


.ajm-mobile-location-dropdown
.ajm-mobile-dropdown-toggle i {

    color: var(--ajm-steel);

    font-size: 17px;

    transition:
        transform 0.3s ease,
        color 0.3s ease;
}


/* OPEN TOGGLE */

.ajm-mobile-location-dropdown.active
.ajm-mobile-dropdown-toggle {

    color: var(--ajm-navy);

}


.ajm-mobile-location-dropdown.active
.ajm-mobile-dropdown-toggle i {

    color: #c7973d;

    transform: rotate(180deg);

}


/* =========================================================
   DROPDOWN PANEL
========================================================= */

.ajm-mobile-location-menu {

    display: none;

    position: relative;

    margin: 0 16px 16px;

    background: #ffffff;

    border: 1px solid
        rgba(10, 20, 37, 0.10);

    border-top: 3px solid
        var(--ajm-navy);

    box-shadow:
        0 18px 45px
        rgba(8, 17, 31, 0.13);

    overflow: hidden;

}


/* OPEN */

.ajm-mobile-location-dropdown.active
.ajm-mobile-location-menu {

    display: block;

    animation:
        ajmMobileLocationOpen
        0.28s ease both;

}


@keyframes ajmMobileLocationOpen {

    from {

        opacity: 0;

        transform:
            translateY(-8px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   MENU HEADER
========================================================= */

.ajm-mobile-location-head {

    min-height: 78px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 17px 18px;

    background:
        linear-gradient(
            135deg,
            #f7f9fb 0%,
            #ffffff 100%
        );

    border-bottom: 1px solid
        rgba(10, 20, 37, 0.08);

}


.ajm-mobile-location-head span:first-child {

    display: block;

    margin-bottom: 5px;

    color: #c7973d;

    font-family: "Montserrat", sans-serif;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.8px;

}


.ajm-mobile-location-head strong {

    display: block;

    color: var(--ajm-navy);

    font-family: "Montserrat", sans-serif;

    font-size: 14px;

    line-height: 1.2;

}


.ajm-mobile-location-count {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    color: #c7973d;

    border: 1px solid
        rgba(199, 151, 61, 0.35);

    font-family: "Montserrat", sans-serif;

    font-size: 11px;

    font-weight: 700;

}


/* =========================================================
   LOCATION ITEMS
========================================================= */

.ajm-mobile-location-menu > a {

    position: relative;

    min-height: 66px;

    display: grid;

    grid-template-columns: 34px 1fr 20px;

    align-items: center;

    gap: 12px;

    padding: 10px 17px;

    color: var(--ajm-navy);

    text-decoration: none;

    background: #ffffff;

    border-bottom: 1px solid
        rgba(10, 20, 37, 0.07);

    transition:
        background 0.25s ease,
        padding-left 0.25s ease;
}


.ajm-mobile-location-menu > a:last-child {

    border-bottom: 0;

}


/* =========================================================
   NUMBER
========================================================= */

.ajm-mobile-location-menu
.location-number {

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #c7973d;

    background: #f8f9fa;

    border: 1px solid
        rgba(199, 151, 61, 0.28);

    font-family: "Montserrat", sans-serif;

    font-size: 8px;

    font-weight: 700;

}


/* =========================================================
   TEXT
========================================================= */

.ajm-mobile-location-menu
a div {

    min-width: 0;

}


.ajm-mobile-location-menu
a strong {

    display: block;

    color: #173b59;

    font-family: "Montserrat", sans-serif;

    font-size: 11px;

    font-weight: 700;

    line-height: 1.3;

}


.ajm-mobile-location-menu
a small {

    display: block;

    margin-top: 4px;

    color: #8995a0;

    font-family: "Inter", sans-serif;

    font-size: 8px;

    font-weight: 500;

    line-height: 1.3;

}


/* =========================================================
   ARROW
========================================================= */

.ajm-mobile-location-menu
a > i {

    color: #9aa5ae;

    font-size: 11px;

    transition:
        color 0.2s ease,
        transform 0.2s ease;

}


.ajm-mobile-location-menu
a:hover {

    background: #f7f9fb;

    padding-left: 21px;

}


.ajm-mobile-location-menu
a:hover > i {

    color: #c7973d;

    transform:
        translate(2px, -2px);

}


/* =========================================================
   GOLD HOVER LINE
========================================================= */

.ajm-mobile-location-menu > a::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 3px;

    height: 100%;

    background: #c7973d;

    transform: scaleY(0);

    transform-origin: center;

    transition:
        transform 0.25s ease;

}


.ajm-mobile-location-menu > a:hover::before {

    transform: scaleY(1);

}


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

@media (min-width: 992px) {

    .ajm-mobile-location-dropdown {

        display: none !important;

    }

}


@media (max-width: 575px) {

    .ajm-mobile-location-menu {

        margin-left: 12px;

        margin-right: 12px;

    }

    .ajm-mobile-location-head {

        padding-left: 15px;

        padding-right: 15px;

    }

    .ajm-mobile-location-menu > a {

        grid-template-columns:
            32px 1fr 18px;

        gap: 10px;

        padding-left: 14px;

        padding-right: 14px;

    }

    .ajm-mobile-location-menu
    a strong {

        font-size: 10px;

    }

}


/* =========================================================
   10. MATERIAL GRID
========================================================= */

.ajm-material-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #ffffff;
    padding: 8px 0;
}


/* =========================================================
   MATERIAL GROUP
========================================================= */

.ajm-material-group {
    min-height: 160px;
    padding: 16px 23px;
    border-right: 1px solid var(--ajm-border);
    border-bottom: 1px solid var(--ajm-border);
}

.ajm-material-group:nth-child(4n) {
    border-right: 0;
}

.ajm-material-group:nth-child(n+5) {
    border-bottom: 0;
}


/* =========================================================
   GROUP TITLE
========================================================= */

.ajm-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.ajm-group-line {
    width: 17px;
    height: 2px;
    flex-shrink: 0;
    background: var(--ajm-steel);
}

.ajm-group-title span:last-child {
    color: #7c8995;
    font-family: "Montserrat", sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.3px;
}


/* =========================================================
   MATERIAL LINKS
========================================================= */

.ajm-material-group>a {
    position: relative;
    min-height: 29px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 14px;
    color: #394754;
    font-size: 11px;
    font-weight: 500;
    transition:
        color 0.2s ease,
        padding-left 0.2s ease;
}

.ajm-material-group>a::after {
    content: "→";
    position: absolute;
    right: 0;
    color: var(--ajm-steel);
    opacity: 0;
    transform: translateX(-4px);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.ajm-material-group>a:hover {
    padding-left: 4px;
    color: var(--ajm-navy);
}

.ajm-material-group>a:hover::after {
    opacity: 1;
    transform: translateX(0);
}


/* =========================================================
   11. MEGA MENU BOTTOM
========================================================= */

.ajm-mega-bottom {
    min-height: 53px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 0 30px;
    background: #f6f7f8;
    border-top: 1px solid var(--ajm-border);
}

.ajm-mega-note {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #788592;
    font-size: 9px;
    font-weight: 500;
}

.ajm-mega-note i {
    color: var(--ajm-steel);
    font-size: 13px;
}

.ajm-all-materials-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ajm-navy);
    font-family: "Montserrat", sans-serif;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}

.ajm-all-materials-link:hover {
    color: var(--ajm-steel);
}

.ajm-all-materials-link i {
    font-size: 10px;
    transition: transform 0.2s ease;
}

.ajm-all-materials-link:hover i {
    transform: translateX(3px);
}


/* =========================================================
   12. RIGHT HEADER ACTIONS
========================================================= */

.ajm-header-actions {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-left: auto;
}


/* =========================================================
   PHONE
========================================================= */

.ajm-call {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ajm-navy);
    white-space: nowrap;
}

.ajm-call-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dce1e5;
    border-radius: 50%;
    color: var(--ajm-blue);
    font-size: 13px;
    transition: var(--ajm-transition);
}

.ajm-call:hover .ajm-call-icon {
    color: #ffffff;
    background: var(--ajm-navy);
    border-color: var(--ajm-navy);
}

.ajm-call-content {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.ajm-call-content small {
    display: block;
    margin-bottom: 4px;
    color: #8a969f;
    font-family: "Montserrat", sans-serif;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 1.3px;
}

.ajm-call-content strong {
    display: block;
    color: var(--ajm-navy);
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 700;
}


/* =========================================================
   13. QUOTE BUTTON
========================================================= */

.ajm-quote {
    height: 48px;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 0 8px 0 19px;
    color: #ffffff;
    background: var(--ajm-navy);
    border: 1px solid var(--ajm-navy);
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.ajm-quote:hover {
    background: var(--ajm-blue);
    border-color: var(--ajm-blue);
    color: #ffffff;
    transform: translateY(-1px);
}

.ajm-quote i {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.10);
    font-size: 11px;
}


/* =========================================================
   14. MOBILE TOGGLE
========================================================= */
/* =========================================================
   AJM MOBILE MENU BUTTON
========================================================= */

/* =========================================================
   AJM PROFESSIONAL MOBILE MENU ICON
========================================================= */

.ajm-mobile-toggle {
    position: relative;
    width: 42px;
    height: 42px;
    margin-left: auto;
    padding: 0;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    border: 0;
    outline: none;
    cursor: pointer;
}


/* Three lines */

.ajm-mobile-toggle span {
    display: block;
    height: 2px;
    background: var(--ajm-navy);
    border-radius: 2px;
    transition:
        width 0.25s ease,
        transform 0.25s ease,
        opacity 0.2s ease;
}


/* Slightly different lengths = more refined */

.ajm-mobile-toggle span:nth-child(1) {
    width: 22px;
    margin-left: 4px;
}

.ajm-mobile-toggle span:nth-child(2) {
    width: 17px;
    margin-left: 9px;
}

.ajm-mobile-toggle span:nth-child(3) {
    width: 22px;
    margin-left: 4px;
}


/* Hover */

.ajm-mobile-toggle:hover span {
    background: var(--ajm-blue);
}

.ajm-mobile-toggle:hover span:nth-child(2) {
    width: 22px;
    margin-left: 4px;
}


/* =========================================================
   ACTIVE / CLOSE STATE
========================================================= */

.ajm-mobile-toggle.active {
    gap: 0;
}

.ajm-mobile-toggle.active span:nth-child(1) {
    width: 22px;
    margin-left: 0;
    transform: translateY(2px) rotate(45deg);
}

.ajm-mobile-toggle.active span:nth-child(2) {
    width: 22px;
    margin-left: 0;
    opacity: 0;
    transform: scaleX(0);
}

.ajm-mobile-toggle.active span:nth-child(3) {
    width: 22px;
    margin-left: 0;
    transform: translateY(-2px) rotate(-45deg);
}


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

@media (max-width: 991.98px) {
    .ajm-mobile-toggle {
        display: flex;
    }

}


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

@media (max-width: 575.98px) {
    .ajm-mobile-toggle {
        width: 38px;
        height: 38px;
    }

    .ajm-mobile-toggle span:nth-child(1),
    .ajm-mobile-toggle span:nth-child(3) {
        width: 20px;
    }

    .ajm-mobile-toggle span:nth-child(2) {
        width: 15px;
    }

    .ajm-mobile-toggle.active span:nth-child(1),
    .ajm-mobile-toggle.active span:nth-child(3) {
        width: 20px;
    }

}

/* =========================================================
   15. MOBILE MENU
========================================================= */

.ajm-mobile-menu {
    display: none;
}


/* =========================================================
   16. MOBILE
========================================================= */

@media (max-width: 1399.98px) {
    .ajm-logo {
        width: 185px;
        flex-basis: 185px;
    }

    .ajm-logo img {
        width: 180px;
    }

    .ajm-navigation {
        margin-left: 20px;
    }

    .ajm-menu>li>a {
        padding-left: 11px;
        padding-right: 11px;
        font-size: 13px;
    }

    .ajm-menu>li>a::after {
        left: 11px;
        right: 11px;
    }

    .ajm-header-actions {
        gap: 14px;
    }

    .ajm-call {
        display: none;
    }

}


@media (max-width: 1199.98px) {
    .ajm-logo {
        width: 165px;
        flex-basis: 165px;
    }

    .ajm-logo img {
        width: 160px;
    }

    .ajm-navigation {
        margin-left: 8px;
    }

    .ajm-menu>li>a {
        padding-left: 7px;
        padding-right: 7px;
        font-size: 11px;
    }

    .ajm-menu>li>a::after {
        left: 7px;
        right: 7px;
    }

    .ajm-header-actions {
        gap: 7px;
    }

    .ajm-quote {
        gap: 8px;
        padding-left: 12px;
    }

    .ajm-mega-menu {
        width: 760px;
    }

    .ajm-material-columns {
        grid-template-columns: repeat(3, 1fr);
    }

    .ajm-material-group:nth-child(4n) {
        border-right: 1px solid var(--ajm-border);
    }

    .ajm-material-group:nth-child(3n) {
        border-right: 0;
    }

    .ajm-material-group:nth-child(n+5) {
        border-bottom: 1px solid var(--ajm-border);
    }

    .ajm-material-group:nth-child(n+7) {
        border-bottom: 0;
    }

}


/* =========================================================
   17. TABLET / MOBILE
========================================================= */

@media (max-width: 991.98px) {
    .ajm-topbar {
        display: none;
    }

    .ajm-main-header {
        height: 78px;
    }

    .ajm-main-nav {
        height: 78px;
    }

    .ajm-logo {
        width: auto;
        flex-basis: auto;
        margin: 0;
    }

    .ajm-logo img {
        width: 125px;
    }

    .ajm-navigation,
    .ajm-header-actions {
        display: none;
    }

    .ajm-mobile-toggle {
        display: flex;
    }

    /* =====================================================
       MOBILE MENU
    ====================================================== */
    .ajm-mobile-menu {
        display: block;
        position: absolute;
        top: 78px;
        left: 0;
        right: 0;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        background: #ffffff;
        border-bottom: 1px solid var(--ajm-border);
        box-shadow:
            0 20px 40px rgba(8, 17, 31, 0.10);
        transition:
            max-height 0.4s ease,
            opacity 0.25s ease,
            visibility 0.25s ease;
    }

    .ajm-mobile-menu.open {
        max-height: calc(100vh - 78px);
        overflow-y: auto;
        opacity: 1;
        visibility: visible;
    }

    .ajm-mobile-menu-inner {
        padding: 8px 0 22px;
        background: #ffffff;
    }

    /* =====================================================
       MOBILE MAIN LINK
    ====================================================== */
    .ajm-mobile-link,
    .ajm-mobile-dropdown-toggle {
        width: 100%;
        min-height: 55px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        border: 0;
        border-bottom: 1px solid #edf0f2;
        background: #ffffff;
        color: var(--ajm-navy);
        font-family: "Montserrat", sans-serif;
        font-size: 14px;
        font-weight: 600;
        text-align: left;
        transition:
            background 0.2s ease,
            color 0.2s ease;
    }

    .ajm-mobile-link:hover,
    .ajm-mobile-dropdown-toggle:hover {
        color: var(--ajm-navy);
        background: #f6f8f9;
    }

    .ajm-mobile-link.active {
        color: var(--ajm-blue);
        background: #f5f7f8;
    }

    /* =====================================================
       MOBILE SCRAP DROPDOWN
    ====================================================== */
    .ajm-mobile-dropdown-toggle {
        cursor: pointer;
    }

    .ajm-mobile-dropdown-toggle i {
        color: var(--ajm-steel);
        font-size: 17px;
        transition: transform 0.25s ease;
    }

    .ajm-mobile-dropdown.active .ajm-mobile-dropdown-toggle i {
        transform: rotate(45deg);
    }

    /* =====================================================
       MOBILE SUBMENU
    ====================================================== */
    .ajm-mobile-submenu {
        max-height: 0;
        overflow: hidden;
        background: #f5f7f9;
        transition: max-height 0.4s ease;
    }

    .ajm-mobile-dropdown.active .ajm-mobile-submenu {
        max-height: 1600px;
    }

    /* =====================================================
       MOBILE GROUP TITLE
    ====================================================== */
    .ajm-mobile-group-title {
        padding: 17px 20px 8px 34px;
        color: #84909b;
        font-family: "Montserrat", sans-serif;
        font-size: 8px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }

    /* =====================================================
       MOBILE SUB LINKS
    ====================================================== */
    .ajm-mobile-submenu>a {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 0 20px 0 38px;
        border-bottom: 1px solid #e5e9ec;
        color: #465463;
        font-size: 12px;
        font-weight: 500;
        background: #f5f7f9;
        transition:
            color 0.2s ease,
            padding-left 0.2s ease,
            background 0.2s ease;
    }

    .ajm-mobile-submenu>a::before {
        content: "";
        width: 5px;
        height: 5px;
        flex-shrink: 0;
        margin-right: 10px;
        border-radius: 50%;
        background: #a7b1ba;
    }

    .ajm-mobile-submenu>a:hover {
        padding-left: 42px;
        color: var(--ajm-navy);
        background: #ffffff;
    }

    /* =====================================================
       VIEW ALL MATERIALS
    ====================================================== */
    .ajm-mobile-submenu>.ajm-mobile-all-materials {
        min-height: 53px;
        padding-left: 20px;
        justify-content: space-between;
        background: #ffffff;
        color: var(--ajm-navy);
        font-family: "Montserrat", sans-serif;
        font-size: 10px;
        font-weight: 700;
    }

    .ajm-mobile-submenu>.ajm-mobile-all-materials::before {
        display: none;
    }

    .ajm-mobile-all-materials i {
        margin-left: auto;
        font-size: 12px;
    }

    /* =====================================================
       MOBILE ACTIONS
    ====================================================== */
    .ajm-mobile-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 18px 20px 2px;
    }

    /* CALL */
    .ajm-mobile-call {
        min-height: 54px;
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 0 12px;
        color: var(--ajm-navy);
        background: #ffffff;
        border: 1px solid #dfe4e8;
    }

    .ajm-mobile-action-icon {
        width: 35px;
        height: 35px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #f0f3f5;
        color: var(--ajm-navy);
        font-size: 12px;
    }

    .ajm-mobile-call small,
    .ajm-mobile-call strong {
        display: block;
    }

    .ajm-mobile-call small {
        margin-bottom: 3px;
        color: #87929d;
        font-family: "Montserrat", sans-serif;
        font-size: 7px;
        font-weight: 700;
        letter-spacing: 1px;
    }

    .ajm-mobile-call strong {
        color: var(--ajm-navy);
        font-family: "Montserrat", sans-serif;
        font-size: 10px;
        font-weight: 700;
    }

    /* QUOTE */
    .ajm-mobile-quote {
        min-height: 54px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: var(--ajm-navy);
        color: #ffffff;
        font-family: "Montserrat", sans-serif;
        font-size: 10px;
        font-weight: 700;
    }

    .ajm-mobile-quote:hover {
        background: var(--ajm-blue);
        color: #ffffff;
    }

    .ajm-mobile-quote i {
        font-size: 11px;
    }

}


/* =========================================================
   18. SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {
    .ajm-main-header {
        height: 70px;
    }

    .ajm-main-nav {
        height: 70px;
    }

    .ajm-logo img {
        width: 105px;
    }

    .ajm-mobile-toggle {
        width: 41px;
        height: 41px;
    }

    .ajm-mobile-menu {
        top: 70px;
    }

    .ajm-mobile-menu.open {
        max-height: calc(100vh - 70px);
    }

    .ajm-mobile-actions {
        grid-template-columns: 1fr;
        gap: 8px;
    }

}




/* =========================================================
   AJM GLOBAL
   PREMIUM FOOTER
========================================================= */

.ajm-footer {
    position: relative;
    overflow: hidden;
    font-family:
        "Montserrat",
        "Inter",
        Arial,
        sans-serif;

}


/* =========================================================
   CTA SECTION
========================================================= */

.footer-main-cta {
    position: relative;
    overflow: hidden;
    padding: 95px 0;
    background:
        linear-gradient(135deg,
            #ffffff 0%,
            #f4f6f8 60%,
            #eef1f4 100%);

}


/* subtle technical lines */

.footer-main-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .55;
    background-image:
        linear-gradient(90deg,
            transparent 49.8%,
            rgba(8, 30, 50, .035) 50%,
            transparent 50.2%),
        linear-gradient(transparent 49.8%,
            rgba(8, 30, 50, .035) 50%,
            transparent 50.2%);
    background-size: 100px 100px;

}


/* =========================================================
   CTA DECORATIVE GOLD CIRCLE
========================================================= */

.footer-main-cta::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -170px;
    top: -180px;
    border:
        1px solid rgba(184, 148, 114, .25);
    border-radius: 50%;
    box-shadow:
        0 0 0 40px rgba(184, 148, 114, .035),
        0 0 0 80px rgba(184, 148, 114, .025);
    animation:
        footerCircle 12s ease-in-out infinite;

}


@keyframes footerCircle {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(1.08) rotate(12deg);
    }

}


/* =========================================================
   CTA LAYOUT
========================================================= */

.footer-cta-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
        1.5fr .7fr;
    align-items: center;
    gap: 80px;

}


/* =========================================================
   CTA COPY
========================================================= */

.footer-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
    color: #b89472;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.5px;

}


.footer-kicker::before {
    content: "";
    width: 35px;
    height: 2px;
    background: #b89472;

}


.footer-cta-copy h2 {
    max-width: 760px;
    margin: 0;
    color: #081c31;
    font-size:
        clamp(48px, 6vw, 82px);
    line-height: .92;
    font-weight: 300;
    letter-spacing: -4px;

}


.footer-cta-copy h2 span {
    display: block;
    color: #b89472;
    font-weight: 600;

}


.footer-cta-copy p {
    max-width: 620px;
    margin: 28px 0 0;
    color: #61707d;
    font-size: 13px;
    line-height: 1.9;

}


/* =========================================================
   CTA ACTION
========================================================= */

.footer-cta-action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

}


.ajm-footer-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    min-width: 235px;
    padding: 7px 7px 7px 25px;
    background: #173d65;
    color: #ffffff;
    text-decoration: none;
    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


.ajm-footer-button:hover {
    color: #ffffff;
    transform:
        translateY(-5px);
    box-shadow:
        0 18px 40px rgba(8, 23, 39, .18);

}


.button-text {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;

}


.button-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: #b89472;
    color: #173d65;
    font-size: 20px;
    transition:
        transform .35s ease;

}


.ajm-footer-button:hover .button-arrow {
    transform:
        rotate(45deg);

}


.footer-cta-note {
    margin-top: 14px;
    color: #8a969f;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;

}


/* =========================================================
   DARK FOOTER
========================================================= */

.footer-dark {
    position: relative;
    overflow: hidden;
    background: #173d65;
    color: #ffffff;

}


/* =========================================================
   LARGE BACKGROUND TEXT
========================================================= */

.footer-dark::before {
    content: "AJM";
    position: absolute;
    right: -30px;
    bottom: -130px;
    color: rgba(255, 255, 255, .018);
    font-size: 420px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -35px;
    pointer-events: none;

}


/* =========================================================
   ORBIT ANIMATION
========================================================= */

.ajm-footer-orbit {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;

}


.orbit-one {
    width: 600px;
    height: 600px;
    right: -300px;
    top: 40px;
    border:
        1px solid rgba(184, 148, 114, .11);
    animation:
        orbitRotate 20s linear infinite;

}


.orbit-two {
    width: 460px;
    height: 460px;
    right: -230px;
    top: 110px;
    border:
        1px dashed rgba(255, 255, 255, .08);
    animation:
        orbitRotate 30s linear infinite reverse;

}


.orbit-three {
    width: 320px;
    height: 320px;
    right: -160px;
    top: 180px;
    border:
        1px solid rgba(184, 148, 114, .12);
    animation:
        orbitRotate 15s linear infinite;

}


@keyframes orbitRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   PARTICLES
========================================================= */

.footer-particle {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #b89472;
    opacity: .6;
    animation:
        particleFloat 7s ease-in-out infinite;

}


.particle-1 {
    top: 18%;
    left: 12%;
    animation-delay: 0s;
}

.particle-2 {
    top: 55%;
    left: 30%;
    animation-delay: 2s;
}

.particle-3 {
    top: 25%;
    right: 25%;
    animation-delay: 1s;
}

.particle-4 {
    bottom: 22%;
    left: 50%;
    animation-delay: 3s;
}

.particle-5 {
    bottom: 12%;
    right: 15%;
    animation-delay: 4s;
}


@keyframes particleFloat {

    0%,
    100% {
        transform:
            translate(0, 0) scale(1);
        opacity: .25;
    }

    50% {
        transform:
            translate(20px, -25px) scale(1.7);
        opacity: .9;
    }

}


/* =========================================================
   FOOTER TOP
========================================================= */

.footer-top {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding:
        75px 0 55px;
    border-bottom:
        1px solid rgba(255, 255, 255, .08);

}


.footer-logo-link {
    display: inline-block;
    margin-bottom: 20px;

}


.footer-logo-link img {
    width: 190px;
    height: auto;
    display: block;

}


.footer-brand-block p {
    max-width: 470px;
    margin: 0;
    color: #71818e;
    font-size: 11px;
    line-height: 1.9;

}


.footer-tagline {
    text-align: right;

}


.footer-tagline span {
    display: block;
    margin-bottom: 6px;
    color: #71818e;
    font-size: 8px;
    letter-spacing: 2px;

}


.footer-tagline strong {
    color: #b89472;
    font-size: 10px;
    letter-spacing: 2px;

}


/* =========================================================
   COLUMNS
========================================================= */

.footer-columns {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns:
        .8fr 1.5fr .8fr 1fr;
    gap: 55px;
    padding:
        65px 0;
    border-bottom:
        1px solid rgba(255, 255, 255, .08);

}


.footer-col {
    position: relative;

}


.footer-col-number {
    margin-bottom: 14px;
    color: #b89472;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;

}


.footer-col h3 {
    margin: 0 0 25px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;

}


.footer-col ul {
    margin: 0;
    padding: 0;
    list-style: none;

}


.footer-col ul li {
    margin-bottom: 12px;

}


.footer-col ul li a {
    color: #def0ff;
    text-decoration: none;
    font-size: 12px;
    transition: color .25s ease, padding-left .25s ease;
}


.footer-col ul li a:hover {
    padding-left: 8px;
    color: #ffffff;
    color: #b89472;
    transform:
        translateX(5px);

}


/* =========================================================
   SCRAP GRID
========================================================= */

.footer-scrap-grid {
    display: grid;
    grid-template-columns:
        1fr 1fr;
    gap:
        11px 25px;

}


.footer-scrap-grid a {
    color: #def0ff;
    text-decoration: none;
    font-size: 12px;
    transition: color .25s ease, padding-left .25s ease;

}


.footer-scrap-grid a:hover {
    color: #b89472;
    transform:
        translateX(5px);

}


.footer-more-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
    color: #b89472;
    text-decoration: none;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;

}


.footer-more-link span {
    font-size: 16px;
    transition:
        transform .25s ease;

}


.footer-more-link:hover {
    color: #d2ad88;

}


.footer-more-link:hover span {
    transform:
        translateX(6px);

}


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

.footer-contact-row {
    margin-bottom: 22px;

}


.footer-contact-row>span {
    display: block;
    margin-bottom: 7px;
    color: #b89472;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.8px;

}


.footer-contact-row a {
    color: #ffffff;
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;

}


.footer-contact-row p {
    margin: 0;
    color: #7e8c97;
    font-size: 10px;
    line-height: 1.8;

}


/* =========================================================
   UAE NETWORK
========================================================= */

.footer-network {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding:
        28px 0;
    border-bottom:
        1px solid rgba(255, 255, 255, .08);

}


.network-title {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    color: #ffffff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;

}


.network-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #b89472;
    box-shadow:
        0 0 0 5px rgba(184, 148, 114, .08);
    animation:
        networkPulse 2s ease-in-out infinite;

}


@keyframes networkPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 4px rgba(184, 148, 114, .06);
    }

    50% {
        box-shadow:
            0 0 0 9px rgba(184, 148, 114, .02);
    }

}


.network-locations {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;

}


.network-locations span {
    color: #687883;
    font-size: 8px;
    font-weight: 700;

}


.network-locations i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #b89472;

}


/* =========================================================
   BOTTOM
========================================================= */

.footer-bottom {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns:
        1fr auto 1fr;
    align-items: center;
    gap: 25px;
    min-height: 75px;
    color: #b89472;
    font-size: 12px;

}


.footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 10px;

}


.footer-bottom-links a {
    color: #ffffff;
    text-decoration: none;
    transition:
        color .25s ease;

}


.footer-bottom-links a:hover {
    color: #b89472;

}


.footer-bottom-links span {
    color: #b89472;

}


.footer-bottom-brand {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    color: #596b77;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.5px;

}


.footer-bottom-brand b {
    width: 25px;
    height: 1px;
    background: #b89472;

}


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

@media (max-width: 991px) {
    .footer-cta-layout {
        grid-template-columns:
            1fr;
        gap: 40px;
    }

    .footer-columns {
        grid-template-columns:
            1fr 1.5fr;
        gap: 50px;
    }

    .footer-network {
        align-items: flex-start;
        flex-direction: column;
    }

    .network-locations {
        justify-content: flex-start;
    }

    .footer-bottom {
        grid-template-columns:
            1fr 1fr;
    }

    .footer-bottom-brand {
        display: none;
    }

}


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

@media (max-width: 767px) {
    .footer-main-cta {
        padding:
            70px 0;
    }

    .footer-cta-copy h2 {
        font-size: 48px;
        letter-spacing: -3px;
    }

    .footer-cta-copy p {
        font-size: 11px;
    }

    .footer-cta-action {
        align-items: flex-start;
    }

    .footer-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 30px;
        padding:
            55px 0 45px;
    }

    .footer-tagline {
        text-align: left;
    }

    .footer-logo-link img {
        width: 165px;
    }

    .footer-columns {
        grid-template-columns:
            1fr;
        gap: 45px;
        padding:
            50px 0;
    }

    .footer-scrap-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .footer-network {
        padding:
            25px 0;
    }

    .network-locations {
        gap: 10px;
    }

    .footer-bottom {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding:
            25px 0;
    }

    .footer-bottom-links {
        flex-wrap: wrap;
    }

    .orbit-one {
        width: 350px;
        height: 350px;
        right: -230px;
    }

    .orbit-two {
        width: 280px;
        height: 280px;
        right: -190px;
    }

    .orbit-three {
        width: 210px;
        height: 210px;
        right: -155px;
    }

}