/* =========================================================
   FULL WEBSITE PARTICLE BACKGROUND
   FIX - NO SPACE ABOVE NAVBAR
========================================================= */

#muf-particle-background {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100vh !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    pointer-events: none !important;

    z-index: 0 !important;
}

#muf-particle-canvas {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   NAVBAR ALWAYS ABOVE PARTICLES
========================================================= */

.muf-navbar {
    position: sticky !important;
    top: 0 !important;

    margin-top: 0 !important;
    padding-top: 8px;

    z-index: 9999 !important;
}
/* =========================================================
   PREMIUM MUF NAVBAR
   FINAL RESPONSIVE + ANIMATED VERSION
   BOOTSTRAP 5.3 COMPATIBLE
========================================================= */


/* =========================================================
   NAVBAR
========================================================= */

.muf-navbar {

    position: sticky;
    top: 0;
    left: 0;

    width: 100%;
    min-height: 82px;

    padding: 8px 0;

    background: rgba(255, 255, 255, 0.97);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow:
        0 3px 18px rgba(0, 0, 0, 0.08);

    border-bottom: 1px solid rgba(237, 28, 36, 0.08);

    z-index: 9999;

    transition:
        background 0.45s ease,
        box-shadow 0.45s ease,
        transform 0.45s ease;
}


/* =========================================================
   NAVBAR TOP RED LINE
========================================================= */

.muf-navbar::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ed1c24,
            #ff5a60,
            #ed1c24,
            transparent
        );

    background-size: 200% 100%;

    animation:
        mufNavbarTopLine
        5s linear infinite;

    pointer-events: none;
}


@keyframes mufNavbarTopLine {

    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }

}


/* =========================================================
   NAVBAR CONTAINER
========================================================= */

.muf-navbar > .container {

    display: flex;

    align-items: center;

    width: 100%;
}


/* =========================================================
   BRAND
========================================================= */

.muf-brand {

    position: relative;

    display: flex;

    align-items: center;

    gap: 12px;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    text-decoration: none !important;

    flex-shrink: 0;

    transition:
        transform 0.45s
        cubic-bezier(.22,.61,.36,1);
}


.muf-brand:hover {

    transform: translateX(3px);

}


/* =========================================================
   LOGO
========================================================= */

.muf-logo-icon {

    position: relative;

    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    overflow: hidden;

    border-radius: 8px;

    transition:
        transform 0.55s
        cubic-bezier(.22,.61,.36,1),

        filter 0.4s ease;
}


.muf-logo-icon img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transition:
        transform 0.55s
        cubic-bezier(.22,.61,.36,1);
}


/* =========================================================
   LOGO SHINE
========================================================= */

.muf-logo-icon::after {

    content: "";

    position: absolute;

    top: -100%;
    left: -130%;

    width: 55%;
    height: 300%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.75),
            transparent
        );

    transform: rotate(22deg);

    pointer-events: none;
}


.muf-brand:hover .muf-logo-icon {

    transform:
        translateY(-2px)
        rotate(-2deg)
        scale(1.04);

    filter:
        drop-shadow(
            0 7px 12px
            rgba(0,0,0,0.15)
        );
}


.muf-brand:hover .muf-logo-icon img {

    transform: scale(1.06);

}


.muf-brand:hover .muf-logo-icon::after {

    animation:
        mufNavbarLogoShine
        0.9s
        cubic-bezier(.22,.61,.36,1);
}


@keyframes mufNavbarLogoShine {

    0% {
        left: -130%;
    }

    100% {
        left: 180%;
    }

}


/* =========================================================
   COMPANY NAME
========================================================= */

.muf-company-name {

    position: relative;

    display: flex;

    flex-direction: column;

    color: #111111;

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size: 15px;

    font-weight: 700;

    line-height: 1.25;

    letter-spacing: 0.2px;

    white-space: nowrap;

    transition:
        color 0.35s ease,
        transform 0.4s ease;
}


.muf-company-name span {

    display: block;

    margin-top: 2px;

    color: #777777;

    font-size: 12px;

    font-weight: 500;

    letter-spacing: 0.3px;

    transition:
        color 0.35s ease,
        letter-spacing 0.35s ease;
}


.muf-brand:hover .muf-company-name {

    color: #ed1c24;

    transform: translateX(2px);
}


.muf-brand:hover .muf-company-name span {

    color: #555555;

    letter-spacing: 0.5px;
}


/* =========================================================
   NAVBAR COLLAPSE
========================================================= */

.muf-navbar .navbar-collapse {

    margin-left: auto;

}


/* =========================================================
   NAVBAR NAV
========================================================= */

.muf-navbar .navbar-nav {

    display: flex;

    align-items: center;

    gap: 3px;

}


/* =========================================================
   NAV ITEM
========================================================= */

.muf-navbar .navbar-nav > .nav-item {

    position: relative;

}


/* =========================================================
   NAV LINK
========================================================= */

.muf-navbar .muf-nav-link {

    position: relative;

    display: inline-flex;

    align-items: center;

    padding: 10px 10px !important;

    color: #222222 !important;

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size: 14px;

    font-weight: 500;

    line-height: 1.5;

    text-decoration: none !important;

    white-space: nowrap;

    overflow: hidden;

    transition:
        color 0.3s ease,
        transform 0.35s
        cubic-bezier(.22,.61,.36,1);
}


/* =========================================================
   NAV LINK HOVER
========================================================= */

.muf-navbar .muf-nav-link:hover,
.muf-navbar .muf-nav-link:focus {

    color: #ed1c24 !important;

    transform: translateY(-2px);

}


/* =========================================================
   NAV LINK RED UNDERLINE
   IMPORTANT:
   ::before = underline
   ::after = Bootstrap dropdown arrow
========================================================= */

.muf-navbar .muf-nav-link::before {

    content: "";

    position: absolute;

    left: 10px;
    right: 10px;

    bottom: 3px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            #ed1c24,
            #ff555c
        );

    transform: scaleX(0);

    transform-origin: center;

    transition:
        transform 0.4s
        cubic-bezier(.22,.61,.36,1);

    z-index: 1;
}


.muf-navbar .muf-nav-link:hover::before,
.muf-navbar .muf-nav-link:focus::before {

    transform: scaleX(1);

}


/* =========================================================
   NAV LINK LIGHT SWEEP
========================================================= */

.muf-navbar .muf-nav-link::after {

    transition:
        transform 0.3s ease;

}


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

.muf-navbar .dropdown-toggle::after {

    margin-left: 6px;

    vertical-align: middle;

    border-top-color: #222222;

    transition:
        transform 0.3s ease,
        border-top-color 0.3s ease;
}


.muf-navbar .dropdown-toggle:hover::after {

    border-top-color: #ed1c24;

}


.muf-navbar .dropdown.show > .dropdown-toggle::after {

    transform: rotate(180deg);

    border-top-color: #ed1c24;

}


/* =========================================================
   SERVICES DROPDOWN
   DESKTOP
========================================================= */

@media (min-width: 992px) {

    .muf-navbar .nav-item.dropdown {

        position: relative;

    }


    .muf-navbar .dropdown-menu.muf-dropdown-menu {

        position: absolute;

        top: 100%;
        left: 0;

        width: 180px !important;

        min-width: 180px !important;

        max-width: 180px !important;

        margin: 0 !important;

        padding: 7px 0 !important;

        background:
            rgba(255,255,255,0.99);

        border: 0 !important;

        border-radius: 7px !important;

        box-shadow:
            0 14px 35px
            rgba(0,0,0,0.16) !important;

        overflow: hidden;

        z-index: 10000 !important;

        transform:
            translateY(8px)
            scale(0.97);

        transform-origin:
            top center;

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transition:
            opacity 0.22s ease,
            transform 0.28s
            cubic-bezier(.22,.61,.36,1),
            visibility 0.22s ease;

    }


    /* =====================================================
       BOOTSTRAP CLICK OPEN
    ===================================================== */

    .muf-navbar .dropdown.show > .muf-dropdown-menu {

        display: block !important;

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform:
            translateY(0)
            scale(1);

    }


    /* =====================================================
       CURSOR HOVER OPEN
    ===================================================== */

    .muf-navbar .nav-item.dropdown:hover > .muf-dropdown-menu {

        display: block !important;

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform:
            translateY(0)
            scale(1);

    }


    /* =====================================================
       INVISIBLE BRIDGE
       Cursor submenu tak jaate waqt dropdown close na ho
    ===================================================== */

    .muf-navbar .nav-item.dropdown::after {

        content: "";

        position: absolute;

        left: 0;
        top: 100%;

        width: 180px;

        height: 8px;

        background: transparent;

        pointer-events: auto;

    }


    /* =====================================================
       DROPDOWN RED TOP LINE
    ===================================================== */

    .muf-navbar .muf-dropdown-menu::before {

        content: "";

        position: absolute;

        top: 0;
        left: 0;

        width: 100%;
        height: 2px;

        background:
            linear-gradient(
                90deg,
                #ed1c24,
                #ff5a60,
                #ed1c24
            );

        transform:
            scaleX(0);

        transform-origin: left;

        transition:
            transform 0.5s ease;

    }


    .muf-navbar
    .nav-item.dropdown:hover
    .muf-dropdown-menu::before,

    .muf-navbar
    .dropdown.show
    .muf-dropdown-menu::before {

        transform:
            scaleX(1);

    }


    /* =====================================================
       DROPDOWN ITEM
    ===================================================== */

    .muf-navbar .muf-dropdown-menu .muf-dropdown-item {

        position: relative;

        display: flex;

        align-items: center;

        width: 100%;

        min-height: 32px !important;

        padding: 6px 13px !important;

        margin: 0 !important;

        color: #222222 !important;

        background: #ffffff !important;

        border: 0 !important;

        border-radius: 0 !important;

        font-family:
            "Poppins",
            Arial,
            sans-serif;

        font-size: 10.5px !important;

        font-weight: 500;

        line-height: 1.2;

        white-space: nowrap;

        overflow: hidden;

        transition:
            color 0.25s ease,
            background 0.25s ease,
            padding-left 0.3s
            cubic-bezier(.22,.61,.36,1);

    }


    /* =====================================================
       DROPDOWN HOVER RED SLIDE
    ===================================================== */

    .muf-navbar
    .muf-dropdown-menu
    .muf-dropdown-item:hover,

    .muf-navbar
    .muf-dropdown-menu
    .muf-dropdown-item:focus {

        color: #ffffff !important;

        background: #ed1c24 !important;

        padding-left: 19px !important;

    }


    /* ACTIVE */

    .muf-navbar
    .muf-dropdown-menu
    .muf-dropdown-item:active {

        color: #ffffff !important;

        background: #c81018 !important;

    }

}


/* =========================================================
   LET'S TALK
========================================================= */

.muf-talk-item {

    margin-left: 8px;

}


.muf-talk-btn {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 92px;

    min-height: 42px;

    padding: 0 17px;

    border-radius: 5px;

    background:
        linear-gradient(
            135deg,
            #ed1c24,
            #c81018
        );

    color: #ffffff !important;

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size: 13px;

    font-weight: 600;

    line-height: 1;

    text-decoration: none !important;

    overflow: hidden;

    box-shadow:
        0 5px 15px
        rgba(237,28,36,0.22);

    transition:
        transform 0.35s
        cubic-bezier(.22,.61,.36,1),
        box-shadow 0.35s ease;

}


.muf-talk-btn:hover {

    color: #ffffff !important;

    transform:
        translateY(-3px)
        scale(1.02);

    box-shadow:
        0 10px 25px
        rgba(237,28,36,0.32);

}


/* =========================================================
   LET'S TALK SHINE
========================================================= */

.muf-talk-btn::after {

    content: "";

    position: absolute;

    top: -50%;
    left: -120%;

    width: 60%;
    height: 200%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.38),
            transparent
        );

    transform: skewX(-20deg);

}


.muf-talk-btn:hover::after {

    animation:
        mufTalkShine
        0.8s
        ease;

}


@keyframes mufTalkShine {

    0% {
        left: -120%;
    }

    100% {
        left: 150%;
    }

}


/* =========================================================
   CALL US
========================================================= */

.muf-call-item {

    margin-left: 10px;

}


.muf-call-link {

    display: flex;

    align-items: center;

    gap: 9px;

    padding-left: 8px;

    color: #222222;

    text-decoration: none !important;

    transition:
        transform 0.3s ease;

}


.muf-call-link:hover {

    transform: translateX(3px);

}


/* =========================================================
   CALL ICON
========================================================= */

.muf-call-icon {

    position: relative;

    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    background: #f5f5f5;

    color: #ed1c24;

    font-size: 14px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.4s ease,
        box-shadow 0.3s ease;

}


.muf-call-icon::before {

    content: "";

    position: absolute;

    inset: -3px;

    border:
        1px solid
        rgba(237,28,36,0.35);

    border-radius: 50%;

    opacity: 0;

}


.muf-call-link:hover .muf-call-icon {

    background: #ed1c24;

    color: #ffffff;

    transform:
        rotate(-12deg)
        scale(1.08);

    box-shadow:
        0 8px 20px
        rgba(237,28,36,0.25);

}


.muf-call-link:hover .muf-call-icon::before {

    animation:
        mufPhonePulse
        0.9s
        ease-out;

}


@keyframes mufPhonePulse {

    0% {

        opacity: 0.8;

        transform: scale(0.8);

    }

    100% {

        opacity: 0;

        transform: scale(1.45);

    }

}


/* =========================================================
   CALL CONTENT
========================================================= */

.muf-call-content {

    display: flex;

    flex-direction: column;

    line-height: 1.2;

}


.muf-call-content span {

    color: #777777;

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size: 10px;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 0.4px;

}


.muf-call-content strong {

    display: block;

    margin-top: 2px;

    color: #222222;

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size: 12px;

    font-weight: 600;

    white-space: nowrap;

    transition:
        color 0.3s ease;

}


.muf-call-link:hover
.muf-call-content strong {

    color: #ed1c24;

}


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

.muf-navbar-toggler {

    position: relative;

    width: 44px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 7px !important;

    margin-left: auto;

    border:
        1px solid
        #ed1c24 !important;

    border-radius: 6px !important;

    background: #ffffff;

    box-shadow: none !important;

    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


.muf-navbar-toggler:hover {

    background: #fff5f5;

    transform: scale(1.03);

    box-shadow:
        0 6px 16px
        rgba(237,28,36,0.12) !important;

}


.muf-navbar-toggler:focus {

    box-shadow:
        0 0 0 3px
        rgba(237,28,36,0.12) !important;

}


/* =========================================================
   CUSTOM HAMBURGER
========================================================= */

.muf-navbar-toggler .navbar-toggler-icon {

    position: relative;

    width: 24px;
    height: 20px;

    background-image: none !important;

}


.muf-navbar-toggler .navbar-toggler-icon::before {

    content: "";

    position: absolute;

    left: 1px;
    top: 1px;

    width: 22px;
    height: 2px;

    background: #ed1c24;

    border-radius: 3px;

    box-shadow:
        0 7px 0 #ed1c24,
        0 14px 0 #ed1c24;

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

    .muf-logo-icon {

        width: 52px;
        height: 52px;

    }


    .muf-company-name {

        font-size: 13px;

    }


    .muf-company-name span {

        font-size: 11px;

    }


    .muf-navbar .muf-nav-link {

        padding-left: 7px !important;
        padding-right: 7px !important;

        font-size: 12px;

    }


    .muf-talk-item {

        margin-left: 4px;

    }


    .muf-talk-btn {

        min-width: 82px;

        min-height: 39px;

        padding-left: 12px;
        padding-right: 12px;

        font-size: 11px;

    }


    .muf-call-item {

        margin-left: 4px;

    }


    .muf-call-content strong {

        font-size: 10px;

    }

}


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

@media (max-width: 991.98px) {

    .muf-navbar {

        min-height: 72px;

        padding: 7px 0;

    }


    .muf-navbar .container {

        position: relative;

    }


    /* BRAND */

    .muf-brand {

        gap: 8px;

    }


    .muf-logo-icon {

        width: 52px;
        height: 47px;

    }


    .muf-company-name {

        font-size: 12px;

    }


    .muf-company-name span {

        font-size: 9px;

    }


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

    .muf-navbar .navbar-collapse {

        width: 100%;

        margin-left: 0;

        margin-top: 8px;

        padding: 8px 0 10px;

        border-top:
            1px solid
            #eeeeee;

        background: #ffffff;

        border-radius: 6px;

        box-shadow:
            0 8px 24px
            rgba(0,0,0,0.08);

        animation:
            mufMobileMenu
            0.35s
            ease;

    }


    @keyframes mufMobileMenu {

        from {

            opacity: 0;

            transform:
                translateY(-8px);

        }

        to {

            opacity: 1;

            transform:
                translateY(0);

        }

    }


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

    .muf-navbar .navbar-nav {

        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

    }


    .muf-navbar .navbar-nav > .nav-item {

        width: 100%;

    }


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

    .muf-navbar .muf-nav-link {

        width: 100%;

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding: 11px 12px !important;

        color: #222222 !important;

        font-size: 12px;

        transform: none !important;

        border-bottom:
            1px solid
            #eeeeee;

    }


    .muf-navbar .muf-nav-link:hover {

        padding-left: 17px !important;

        background:
            rgba(237,28,36,0.045);

    }


    /* =====================================================
       MOBILE UNDERLINE OFF
    ===================================================== */

    .muf-navbar .muf-nav-link::before {

        display: none;

    }


    /* =====================================================
       MOBILE SERVICES ARROW
    ===================================================== */

    .muf-navbar .dropdown-toggle::after {

        margin-left: auto;

        border-top-color: #222222;

        transition:
            transform 0.3s ease;

    }


    .muf-navbar .dropdown.show >
    .dropdown-toggle::after {

        transform:
            rotate(180deg);

        border-top-color:
            #ed1c24;

    }


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

    .muf-navbar .dropdown-menu.muf-dropdown-menu {

        position: static !important;

        width: 100% !important;

        min-width: 100% !important;

        max-width: 100% !important;

        margin: 2px 0 6px !important;

        padding: 4px 0 !important;

        background: #ffffff !important;

        border:
            1px solid
            #eeeeee !important;

        border-radius: 5px !important;

        box-shadow:
            0 5px 15px
            rgba(0,0,0,0.06) !important;

        overflow: hidden;

    }


    /* =====================================================
       MOBILE DROPDOWN ITEMS
    ===================================================== */

    .muf-navbar
    .muf-dropdown-menu
    .muf-dropdown-item {

        width: 100%;

        min-height: 32px !important;

        padding: 7px 14px !important;

        color: #222222 !important;

        background: #ffffff !important;

        font-size: 10.5px !important;

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

    }


    .muf-navbar
    .muf-dropdown-menu
    .muf-dropdown-item:hover {

        color: #ffffff !important;

        background:
            #ed1c24 !important;

        padding-left: 20px !important;

    }


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

    .muf-talk-item {

        width: 100%;

        margin:
            8px 0 4px;

    }


    .muf-talk-btn {

        width: 100%;

        min-height: 40px;

    }


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

    .muf-call-item {

        width: 100%;

        margin:
            6px 0 0;

        padding-top: 7px;

        border-top:
            1px solid
            #eeeeee;

    }


    .muf-call-link {

        width: 100%;

        padding:
            6px 3px;

    }


    .muf-call-icon {

        width: 36px;
        height: 36px;

    }


    .muf-call-content strong {

        font-size: 10px;

    }

}


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

@media (max-width: 575.98px) {

    .muf-navbar {

        min-height: 68px;

        padding: 6px 0;

    }


    .muf-navbar > .container {

        padding-left: 12px;

        padding-right: 12px;

    }


    .muf-logo-icon {

        width: 47px;
        height: 43px;

    }


    .muf-brand {

        gap: 7px;

    }


    .muf-company-name {

        font-size: 10.5px;

    }


    .muf-company-name span {

        font-size: 8px;

    }


    .muf-navbar-toggler {

        width: 40px;
        height: 38px;

    }


    .muf-navbar
    .muf-nav-link {

        font-size: 11px;

        padding:
            10px 11px !important;

    }


    .muf-navbar
    .muf-dropdown-menu
    .muf-dropdown-item {

        min-height: 31px !important;

        padding:
            6px 13px !important;

        font-size: 10px !important;

    }

}


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

@media (max-width: 380px) {

    .muf-navbar > .container {

        padding-left: 10px;

        padding-right: 10px;

    }


    .muf-logo-icon {

        width: 42px;
        height: 39px;

    }


    .muf-brand {

        gap: 6px;

    }


    .muf-company-name {

        font-size: 9.5px;

    }


    .muf-company-name span {

        font-size: 7.5px;

    }


    .muf-navbar-toggler {

        width: 38px;
        height: 36px;

    }


    .muf-navbar
    .muf-nav-link {

        font-size: 10.5px;

    }

}


/* =========================================================
   FOCUS ACCESSIBILITY
========================================================= */

.muf-navbar a:focus-visible {

    outline:
        2px solid
        #ed1c24;

    outline-offset: 3px;

    border-radius: 4px;

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .muf-navbar *,
    .muf-navbar::before {

        animation: none !important;

        transition: none !important;

    }

}




/* =========================================================
   MUF HERO SLIDER START
========================================================= */

.muf-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.muf-hero-slider {
    width: 100%;
    position: relative;
}

.muf-hero .carousel-inner {
    width: 100%;
}

.muf-hero .carousel-item {
    position: relative;
    width: 100%;
    height: 650px;
    overflow: hidden;
}


/* =========================================================
   HERO IMAGE
========================================================= */

.muf-hero-image {
    display: block;
    width: 100%;
    height: 650px;

    object-fit: cover;
    object-position: center center;
}


/* =========================================================
   DARK OVERLAY
========================================================= */

.muf-hero-overlay {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.45);

    z-index: 1;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.muf-hero-content {
    position: absolute;

    top: 50%;
    left: 8%;

    transform: translateY(-50%);

    width: 600px;
    max-width: 80%;

    color: #fff;

    z-index: 2;
}

.muf-hero-content span {
    display: block;

    margin-bottom: 15px;

    font-size: 15px;
    font-weight: 600;

    letter-spacing: 2px;
}

.muf-hero-content h1 {
    margin: 0 0 20px;

    font-size: clamp(42px, 5vw, 72px);

    line-height: 1.05;

    font-weight: 700;
}

.muf-hero-content h1 strong {
    display: block;
}

.muf-hero-content p {
    max-width: 550px;

    margin: 0 0 30px;

    font-size: 17px;

    line-height: 1.7;
}


/* =========================================================
   HERO BUTTON
========================================================= */

.muf-hero-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 13px 24px;

    color: #fff;

    text-decoration: none;

    font-size: 15px;
    font-weight: 600;

    border: 1px solid #fff;

    transition: all 0.3s ease;
}

.muf-hero-btn:hover {
    background: #fff;
    color: #111;
}


/* =========================================================
   ARROWS
========================================================= */

.muf-hero-control {
    width: 75px;

    z-index: 5;
}

.muf-arrow {
    width: 46px;
    height: 46px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.8);

    border-radius: 50%;

    color: #fff;

    font-size: 15px;

    transition: all 0.3s ease;
}

.muf-arrow:hover {
    background: #fff;
    color: #111;
}


/* =========================================================
   INDICATORS
========================================================= */

.muf-hero-indicators {
    z-index: 6;

    margin-bottom: 20px;
}

.muf-hero-indicators button {
    width: 28px;
    height: 3px;

    margin: 0 4px;

    border: 0;
}


/* =========================================================
   TABLET
   577px - 991px
========================================================= */

@media (max-width: 991px) {

    .muf-hero .carousel-item {
        height: 560px;
    }

    .muf-hero-image {
        height: 560px;
    }

    .muf-hero-content {
        left: 7%;

        width: 550px;
        max-width: 75%;
    }

    .muf-hero-content span {
        font-size: 14px;
    }

    .muf-hero-content h1 {
        font-size: 52px;
    }

    .muf-hero-content p {
        font-size: 16px;

        line-height: 1.6;
    }

    .muf-hero-control {
        width: 60px;
    }

    .muf-arrow {
        width: 42px;
        height: 42px;
    }
}


/* =========================================================
   MOBILE
   0px - 576px
========================================================= */

@media (max-width: 576px) {

    .muf-hero .carousel-item {
        height: 560px;
    }

    .muf-hero-image {
        height: 560px;

        object-fit: cover;
        object-position: center center;
    }


    /* -----------------------------------------
       CONTENT
    ----------------------------------------- */

    .muf-hero-content {

        top: 50%;
        left: 20px;

        width: calc(100% - 40px);
        max-width: none;

        transform: translateY(-50%);
    }

    .muf-hero-content span {
        margin-bottom: 10px;

        font-size: 11px;

        letter-spacing: 1.3px;
    }

    .muf-hero-content h1 {
        margin-bottom: 15px;

        font-size: 38px;

        line-height: 1.1;
    }

    .muf-hero-content p {
        width: 100%;

        margin-bottom: 22px;

        font-size: 14px;

        line-height: 1.55;
    }


    /* -----------------------------------------
       BUTTON
    ----------------------------------------- */

    .muf-hero-btn {
        padding: 11px 18px;

        font-size: 13px;
    }


    /* -----------------------------------------
       ARROWS
    ----------------------------------------- */

    .muf-hero-control {
        width: 45px;
    }

    .muf-arrow {
        width: 34px;
        height: 34px;

        font-size: 11px;
    }


    /* -----------------------------------------
       INDICATORS
    ----------------------------------------- */

    .muf-hero-indicators {
        margin-bottom: 12px;
    }

    .muf-hero-indicators button {
        width: 20px;
        height: 3px;

        margin: 0 2px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   0px - 380px
========================================================= */

@media (max-width: 380px) {

    .muf-hero .carousel-item {
        height: 520px;
    }

    .muf-hero-image {
        height: 520px;
    }

    .muf-hero-content {
        left: 18px;

        width: calc(100% - 36px);
    }

    .muf-hero-content h1 {
        font-size: 32px;
    }

    .muf-hero-content p {
        font-size: 13px;
    }

    .muf-hero-btn {
        padding: 10px 15px;

        font-size: 12px;
    }

    .muf-arrow {
        width: 30px;
        height: 30px;
    }
}

/* MUF HERO SLIDER END */







/* =========================================================
   MUF SERVICES SECTION
========================================================= */

.muf-services-section {
    width: 100%;
    padding: 80px 0;
    background: #ffffff;
    overflow: hidden;
}


/* =========================================================
   SECTION HEADING START
========================================================= */

.muf-section-heading {
    text-align: center;
    margin-bottom: 45px;
}

.muf-section-heading span {
    display: block;
    margin-bottom: 8px;

    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;

    color: #ed1c24;
}

.muf-section-heading h2 {
    margin: 0;

    font-size: 42px;
    font-weight: 700;

    color: #111111;
}


/* =========================================================
   SERVICE SLIDER
========================================================= */

.muf-service-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
}


/* =========================================================
   SERVICE TRACK
========================================================= */

.muf-service-track {
    display: flex;
    align-items: stretch;

    gap: 30px;

    width: max-content;

    will-change: transform;

    animation:
        mufServiceContinuousMove
        28s
        linear
        infinite;
}


/* =========================================================
   SERVICE CARD
========================================================= */

.muf-service-card {
    position: relative;

    flex: 0 0 calc((100vw - 186px) / 4);

    min-width: 240px;

    background: #ffffff;

    border-radius: 12px;

    overflow: hidden;

    cursor: pointer;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.10);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}


/* =========================================================
   CARD HOVER
========================================================= */

.muf-service-card:hover {
    transform: translateY(-10px);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.20);
}


/* =========================================================
   IMAGE AREA
========================================================= */

.muf-service-image {
    position: relative;

    width: 100%;
    height: 280px;

    overflow: hidden;
}


/* =========================================================
   IMAGE
========================================================= */

.muf-service-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.7s ease,
        filter 0.7s ease;
}


/* =========================================================
   IMAGE HOVER ZOOM
========================================================= */

.muf-service-card:hover .muf-service-image img {
    transform: scale(1.12);

    filter: brightness(0.75);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.muf-service-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0);

    pointer-events: none;

    transition:
        background 0.5s ease;
}


.muf-service-card:hover .muf-service-image::after {
    background: rgba(0, 0, 0, 0.12);
}


/* =========================================================
   SERVICE TITLE
========================================================= */

.muf-service-title {
    position: relative;

    padding: 18px 15px;

    text-align: center;

    background: #ffffff;

    color: #111111;

    font-size: 17px;
    font-weight: 600;

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


.muf-service-card:hover .muf-service-title {
    color: #ed1c24;
}


/* =========================================================
   CONTINUOUS MOVEMENT
========================================================= */

@keyframes mufServiceContinuousMove {

    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(
            calc(-1 * var(--muf-service-distance)),
            0,
            0
        );
    }

}


/* =========================================================
   PAUSE WHEN MOUSE IS ON SERVICE
========================================================= */

.muf-service-slider:hover .muf-service-track {
    animation-play-state: paused;
}


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

@media (max-width: 991px) {

    .muf-services-section {
        padding: 65px 0;
    }


    .muf-section-heading {
        margin-bottom: 35px;
    }


    .muf-section-heading h2 {
        font-size: 36px;
    }


    .muf-service-track {
        gap: 20px;
    }


    .muf-service-card {
        flex: 0 0 calc((100vw - 70px) / 2);

        min-width: 280px;
    }


    .muf-service-image {
        height: 260px;
    }

}


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

@media (max-width: 576px) {

    .muf-services-section {
        padding: 55px 0;
    }


    .muf-section-heading {
        padding: 0 15px;
        margin-bottom: 30px;
    }


    .muf-section-heading span {
        font-size: 12px;
        letter-spacing: 1.5px;
    }


    .muf-section-heading h2 {
        font-size: 30px;
    }


    .muf-service-slider {
        padding: 0 15px;
    }


    .muf-service-track {
        gap: 15px;
    }


    .muf-service-card {
        flex: 0 0 calc(100vw - 30px);

        min-width: calc(100vw - 30px);

        border-radius: 10px;
    }


    .muf-service-image {
        height: 250px;
    }


    .muf-service-title {
        padding: 15px 10px;

        font-size: 16px;
    }


    /* Mobile par hover zoom disable */

    .muf-service-card:hover {
        transform: none;

        box-shadow:
            0 5px 20px rgba(0, 0, 0, 0.10);
    }


    .muf-service-card:hover .muf-service-image img {
        transform: none;

        filter: none;
    }


    .muf-service-card:hover .muf-service-image::after {
        background: transparent;
    }

}


/* =========================================================
   REDUCE MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .muf-service-track {
        animation: none;
    }

    .muf-service-card,
    .muf-service-image img,
    .muf-service-image::after {
        transition: none;
    }

}

/* =========================================================
   SECTION HEADING START
========================================================= */








/* =========================================================
   WHY CHOOSE US SECTION START
========================================================= */

.muf-why-section {
    width: 100%;
    padding: 90px 0;
    background: #f8f8f8;
    overflow: hidden;
}


/* =========================================================
   HEADING
========================================================= */

.muf-why-heading {
    margin-bottom: 55px;
}

.muf-why-label {
    display: inline-block;

    margin-bottom: 12px;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 2px;

    color: #ed1c24;
}

.muf-why-heading h2 {
    margin: 0;

    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;

    color: #111111;
}

.muf-why-description {
    margin: 0;

    max-width: 520px;

    font-size: 16px;
    line-height: 1.8;

    color: #666666;
}


/* =========================================================
   FEATURE CARD
========================================================= */

.muf-why-card {
    position: relative;

    height: 100%;
    min-height: 220px;

    padding: 40px 25px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    background: #ffffff;

    border-radius: 12px;

    border: 1px solid rgba(0, 0, 0, 0.06);

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);

    overflow: hidden;

    cursor: pointer;

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        background 0.4s ease;
}


/* =========================================================
   RED TOP LINE
========================================================= */

.muf-why-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 0;
    height: 4px;

    background: #ed1c24;

    transform: translateX(-50%);

    transition: width 0.4s ease;
}


/* =========================================================
   CARD HOVER
========================================================= */

.muf-why-card:hover {
    transform: translateY(-10px);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.15);
}

.muf-why-card:hover::before {
    width: 100%;
}


/* =========================================================
   ICON
========================================================= */

.muf-why-icon {
    width: 75px;
    height: 75px;

    margin-bottom: 22px;

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

    border-radius: 50%;

    background: rgba(237, 28, 36, 0.08);

    color: #ed1c24;

    font-size: 30px;

    transition:
        transform 0.5s ease,
        background 0.4s ease,
        color 0.4s ease;
}


/* =========================================================
   ICON HOVER ANIMATION
========================================================= */

.muf-why-card:hover .muf-why-icon {
    transform: rotateY(360deg) scale(1.08);

    background: #ed1c24;

    color: #ffffff;
}


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

.muf-why-card h3 {
    margin: 0;

    font-size: 19px;
    font-weight: 600;

    color: #111111;

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


.muf-why-card:hover h3 {
    color: #ed1c24;

    transform: translateY(-2px);
}


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

@media (max-width: 991px) {

    .muf-why-section {
        padding: 70px 0;
    }

    .muf-why-heading {
        margin-bottom: 40px;
    }

    .muf-why-heading h2 {
        font-size: 36px;
    }

    .muf-why-description {
        margin-top: 20px;
    }

    .muf-why-card {
        min-height: 210px;
    }

}


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

@media (max-width: 576px) {

    .muf-why-section {
        padding: 55px 0;
    }

    .muf-why-heading {
        margin-bottom: 30px;
    }

    .muf-why-label {
        font-size: 12px;
        letter-spacing: 1.5px;
    }

    .muf-why-heading h2 {
        font-size: 30px;
    }

    .muf-why-heading h2 br {
        display: none;
    }

    .muf-why-description {
        margin-top: 18px;

        font-size: 14px;
        line-height: 1.7;
    }

    .muf-why-card {
        min-height: 190px;

        padding: 30px 20px;

        border-radius: 10px;
    }

    .muf-why-icon {
        width: 65px;
        height: 65px;

        font-size: 26px;

        margin-bottom: 18px;
    }

    .muf-why-card h3 {
        font-size: 17px;
    }

}

/* =========================================================
   WHY CHOOSE US SECTION  END
========================================================= */


/* =========================================================
              EMPOWERING PROJECTS SECTION  START        
========================================================= */


.ep-section {

    width: 100%;
    
    min-height: 100vh;

    background: #f5f5f5;

    padding: 55px 15px 70px;

    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.ep-container {

    width: 100%;

    max-width: 1600px;

    margin: 0 auto;

    text-align: center;
}


/* =========================================================
   HEADING
========================================================= */

.ep-heading {

    width: 100%;

    margin: 0 auto;

    animation:
        epHeadingAnimation
        1s
        ease
        forwards;
}


/* =========================================================
   MAIN TITLE
========================================================= */

.ep-heading h1 {

    color: #1e3175;

    font-size: clamp(40px, 5vw, 68px);

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: 0.5px;

    text-transform: uppercase;

    margin: 0;

    position: relative;

    display: inline-block;
}


/* =========================================================
   TITLE LINE
========================================================= */

.ep-title-line {

    width: min(100%, 1000px);

    margin: 3px auto 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;
}


.ep-title-line span {

    height: 2px;

    flex: 1;

    max-width: 560px;

    background:
        #b9a8a3;
}


.ep-title-line strong {

    color: #c7352d;

    font-size: clamp(17px, 1.8vw, 27px);

    line-height: 1;

    font-weight: 700;

    white-space: nowrap;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.ep-description {

    max-width: 900px;

    margin: 18px auto 0;

    color: #111;

    font-size: clamp(14px, 1.25vw, 18px);

    line-height: 1.6;

    font-weight: 400;

    animation:
        epDescriptionAnimation
        1s
        0.25s
        ease
        both;
}


/* =========================================================
   STATS GRID
========================================================= */

.ep-stats {

    width: 100%;

    margin-top: 35px;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 18px;

    animation:
        epCardsAnimation
        1s
        0.4s
        ease
        both;
}


/* =========================================================
   CARD
========================================================= */

.ep-card {

    min-width: 0;

    min-height: 200px;

    padding: 30px 20px;

    background: #ffffff;

    border-radius: 16px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    position: relative;

    overflow: hidden;

    cursor: pointer;

    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.03);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-radius 0.4s ease;
}


/* =========================================================
   CARD TOP LINE
========================================================= */

.ep-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 50%;

    width: 0;

    height: 4px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            #1e3175,
            #c7352d
        );

    transition:
        width 0.4s ease;
}


/* =========================================================
   CARD BACKGROUND EFFECT
========================================================= */

.ep-card::after {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    border-radius: 50%;

    background:
        rgba(49, 99, 177, 0.06);

    right: -100px;

    bottom: -100px;

    transition:
        transform 0.5s ease;
}


/* =========================================================
   CARD HOVER
========================================================= */

.ep-card:hover {

    transform:
        translateY(-10px);

    box-shadow:
        0 18px 40px
        rgba(27, 53, 112, 0.16);

    border-radius: 20px;
}


.ep-card:hover::before {

    width: 70%;
}


.ep-card:hover::after {

    transform:
        scale(2.2);
}


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

.ep-number {

    position: relative;

    z-index: 2;

    color: #356ab5;

    font-size:
        clamp(42px, 4vw, 60px);

    line-height: 1;

    font-weight: 700;

    margin-bottom: 15px;

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


.ep-card:hover .ep-number {

    color: #1e4389;

    transform:
        scale(1.08);
}


/* =========================================================
   LABEL
========================================================= */

.ep-label {

    position: relative;

    z-index: 2;

    color: #111;

    font-size:
        clamp(15px, 1.2vw, 20px);

    line-height: 1.4;

    font-weight: 600;

    text-align: center;

    transition:
        transform 0.4s ease;
}


.ep-card:hover .ep-label {

    transform:
        translateY(-2px);
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes epHeadingAnimation {

    0% {

        opacity: 0;

        transform:
            translateY(35px);
    }

    100% {

        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes epDescriptionAnimation {

    0% {

        opacity: 0;

        transform:
            translateY(20px);
    }

    100% {

        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes epCardsAnimation {

    0% {

        opacity: 0;

        transform:
            translateY(35px);
    }

    100% {

        opacity: 1;

        transform:
            translateY(0);
    }
}


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

@media (max-width: 1100px) {

    .ep-section {

        padding:
            55px 20px;
    }


    .ep-stats {

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

        gap: 18px;
    }


    .ep-card {

        min-height:
            185px;
    }

}


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

@media (max-width: 650px) {

    .ep-section {

        padding:
            45px 14px 55px;
    }


    .ep-heading h1 {

        font-size:
            clamp(31px, 9.5vw, 45px);

        line-height:
            1.1;

        letter-spacing:
            0;
    }


    .ep-title-line {

        flex-direction:
            column;

        gap: 7px;

        margin-top:
            8px;
    }


    .ep-title-line span {

        width:
            70%;

        flex:
            none;

        height:
            2px;

        order:
            2;
    }


    .ep-title-line strong {

        font-size:
            17px;

        order:
            1;
    }


    .ep-description {

        margin-top:
            18px;

        font-size:
            14px;

        line-height:
            1.65;

        padding:
            0 5px;
    }


    .ep-stats {

        grid-template-columns:
            1fr;

        gap:
            16px;

        margin-top:
            30px;
    }


    .ep-card {

        min-height:
            160px;

        padding:
            25px 15px;

        border-radius:
            15px;
    }


    .ep-number {

        font-size:
            46px;

        margin-bottom:
            12px;
    }


    .ep-label {

        font-size:
            16px;
    }

}


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

@media (max-width: 400px) {

    .ep-section {

        padding:
            38px 12px 45px;
    }


    .ep-heading h1 {

        font-size:
            29px;
    }


    .ep-title-line strong {

        font-size:
            15px;
    }


    .ep-description {

        font-size:
            13px;
    }


    .ep-card {

        min-height:
            150px;
    }


    .ep-number {

        font-size:
            42px;
    }


    .ep-label {

        font-size:
            15px;
    }

}

 


/* =========================================================
                      EMPOWERING PROJECTS SECTION    END
========================================================= */





/* =========================================================
   ABOUT OUR COMPANY START
========================================================= */

.muf-about-section {
    width: 100%;
    padding: 90px 0;
    background: #ffffff;
    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.muf-about-section .container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}


/* =========================================================
   ABOUT IMAGE BOX
========================================================= */

.muf-about-image {
    position: relative;

    width: 100%;
    height: 500px;

    overflow: hidden;

    border-radius: 12px;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.12);

    cursor: pointer;
}


/* =========================================================
   IMAGE
========================================================= */

.muf-about-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1);

    clip-path: inset(0 0 0 0);

    transition:
        transform 0.8s cubic-bezier(.22, .61, .36, 1),
        filter 0.8s ease;
}


/* =========================================================
   MOVIE STYLE HOVER ANIMATION
   EVERY TIME CURSOR ENTERS IMAGE
========================================================= */

.muf-about-image:hover img {
    animation:
        mufAboutMovieHover
        1.2s
        cubic-bezier(.22, .61, .36, 1);

    transform: scale(1.08);

    filter: brightness(0.88);
}


/* =========================================================
   MOVIE SLIDING / REVEAL
========================================================= */

@keyframes mufAboutMovieHover {

    0% {
        transform: scale(1);
        clip-path: inset(0 100% 0 0);
        filter: brightness(0.65);
    }

    25% {
        transform: scale(1.03);
        clip-path: inset(0 70% 0 0);
        filter: brightness(0.72);
    }

    50% {
        transform: scale(1.05);
        clip-path: inset(0 40% 0 0);
        filter: brightness(0.80);
    }

    75% {
        transform: scale(1.07);
        clip-path: inset(0 12% 0 0);
        filter: brightness(0.86);
    }

    100% {
        transform: scale(1.08);
        clip-path: inset(0 0 0 0);
        filter: brightness(0.88);
    }

}


/* =========================================================
   CINEMATIC LIGHT SWEEP
========================================================= */

.muf-about-image::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 65%;
    height: 100%;

    z-index: 3;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.28),
            transparent
        );

    transform: skewX(-20deg);
}


/* =========================================================
   LIGHT SWEEP ON EVERY HOVER
========================================================= */

.muf-about-image:hover::before {
    animation:
        mufAboutLightSweep
        1.1s
        ease;
}


/* =========================================================
   LIGHT SWEEP ANIMATION
========================================================= */

@keyframes mufAboutLightSweep {

    0% {
        left: -120%;
    }

    100% {
        left: 140%;
    }

}


/* =========================================================
   IMAGE DARK OVERLAY
========================================================= */

.muf-about-image::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    background: rgba(0, 0, 0, 0);

    pointer-events: none;

    transition:
        background 0.5s ease;
}


.muf-about-image:hover::after {
    background: rgba(0, 0, 0, 0.06);
}


/* =========================================================
   CONTENT
========================================================= */

.muf-about-content {
    padding-left: 20px;
}


/* =========================================================
   SECTION LABEL
========================================================= */

.muf-section-label {
    display: inline-block;

    margin-bottom: 12px;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 2px;

    color: #ed1c24;
}


/* =========================================================
   HEADING
========================================================= */

.muf-about-content h2 {
    margin: 0 0 22px;

    font-size: 42px;

    line-height: 1.2;

    font-weight: 700;

    color: #111111;
}


/* =========================================================
   PARAGRAPHS
========================================================= */

.muf-about-content p {
    margin: 0 0 18px;

    max-width: 560px;

    font-size: 16px;

    line-height: 1.8;

    color: #666666;
}


/* =========================================================
   KNOW MORE BUTTON
========================================================= */

.muf-know-more-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-top: 12px;

    padding: 13px 25px;

    text-decoration: none;

    font-size: 15px;

    font-weight: 600;

    color: #ffffff;

    background: #ed1c24;

    border-radius: 5px;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}


/* =========================================================
   BUTTON HOVER
========================================================= */

.muf-know-more-btn:hover {
    color: #ffffff;

    background: #111111;

    transform: translateY(-3px);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.18);
}


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

.muf-know-more-btn i {
    transition:
        transform 0.3s ease;
}


.muf-know-more-btn:hover i {
    transform: translateX(5px);
}


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

@media (max-width: 991px) {

    .muf-about-section {
        padding: 70px 0;
    }


    .muf-about-content {
        padding-left: 0;
    }


    .muf-about-image {
        height: 430px;
    }


    .muf-about-content h2 {
        font-size: 36px;
    }


    .muf-about-content p {
        font-size: 15px;
    }

}


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

@media (max-width: 576px) {

    .muf-about-section {
        padding: 55px 0;
    }


    /* CONTAINER */

    .muf-about-section .container {

        width: 100%;

        max-width: 100%;

        padding-left: 15px;

        padding-right: 15px;
    }


    /* ROW */

    .muf-about-section .row {

        margin-left: 0;

        margin-right: 0;
    }


    /* COLUMNS */

    .muf-about-section [class*="col-"] {

        padding-left: 0;

        padding-right: 0;
    }


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

    .muf-about-image {

        width: 100%;

        height: 300px;

        border-radius: 10px;
    }


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

    .muf-about-image img {

        width: 100%;

        height: 100%;

        object-fit: cover;

        object-position: center;
    }


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

    .muf-about-content {

        width: 100%;

        padding-left: 0;
    }


    /* LABEL */

    .muf-section-label {

        font-size: 12px;

        letter-spacing: 1.5px;
    }


    /* HEADING */

    .muf-about-content h2 {

        font-size: 30px;

        line-height: 1.25;

        margin-bottom: 18px;
    }


    /* REMOVE DESKTOP BREAK */

    .muf-desktop-break {
        display: none;
    }


    /* PARAGRAPH */

    .muf-about-content p {

        font-size: 14px;

        line-height: 1.7;

        margin-bottom: 15px;
    }


    /* BUTTON */

    .muf-know-more-btn {

        padding: 12px 21px;

        font-size: 14px;
    }

}


/* =========================================================
   EXTRA MOBILE OVERFLOW FIX
========================================================= */

@media (max-width: 576px) {

    .muf-about-section,
    .muf-about-section .container,
    .muf-about-section .row {

        max-width: 100%;

        overflow-x: hidden;
    }

}


/* =========================================================
   ABOUT OUR COMPANY END
========================================================= */



/* =========================================================
   CONTACT SECTION START
========================================================= */

.muf-contact-section {
    position: relative;

    width: 100%;

    min-height: 420px;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #111111;
}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.muf-contact-bg {
    display: block;

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    z-index: 0;

    transform: scale(1);

    transition:
        transform 1.2s cubic-bezier(.22, .61, .36, 1),
        filter 1s ease;
}


/* =========================================================
   OVERLAY
========================================================= */

.muf-contact-overlay {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.82),
            rgba(0, 0, 0, 0.60),
            rgba(0, 0, 0, 0.72)
        );

    transition:
        background 0.8s ease;
}


/* =========================================================
   CONTAINER
========================================================= */

.muf-contact-section .container {
    position: relative;

    z-index: 3;

    width: 100%;

    max-width: 1320px;

    margin: 0 auto;

    padding-left: 15px;
    padding-right: 15px;
}


/* =========================================================
   CONTENT
========================================================= */

.muf-contact-content {
    text-align: center;

    padding: 90px 15px;

    cursor: default;

    transition:
        transform 0.7s cubic-bezier(.22, .61, .36, 1);
}


/* =========================================================
   SUBTITLE
========================================================= */

.muf-contact-subtitle {
    margin: 0 0 15px;

    font-size: 16px;

    font-weight: 500;

    letter-spacing: 0.5px;

    color: #ffffff;

    opacity: 0.9;

    transition:
        transform 0.6s ease,
        opacity 0.6s ease;
}


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

.muf-contact-phone {
    margin: 0 0 15px;

    font-size: 48px;

    line-height: 1.15;

    font-weight: 700;

    color: #ffffff;

    letter-spacing: 1px;

    transition:
        transform 0.7s cubic-bezier(.22, .61, .36, 1),
        color 0.4s ease;
}


/* =========================================================
   EMAIL
========================================================= */

.muf-contact-email {
    margin: 0;

    font-size: 24px;

    line-height: 1.4;

    font-weight: 500;

    color: #ed1c24;

    transition:
        transform 0.7s cubic-bezier(.22, .61, .36, 1),
        color 0.4s ease;
}


/* =========================================================
   CINEMATIC LIGHT SWEEP
========================================================= */

.muf-contact-section::before {
    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 55%;

    height: 100%;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.16),
            transparent
        );

    transform: skewX(-20deg);
}


/* =========================================================
   CURSOR HOVER
   EVERY TIME CURSOR ENTERS SECTION
========================================================= */

.muf-contact-section:hover::before {
    animation:
        mufContactLightSweep
        1.2s
        ease;
}


@keyframes mufContactLightSweep {

    0% {
        left: -120%;
    }

    100% {
        left: 140%;
    }

}


/* =========================================================
   BACKGROUND ZOOM ON HOVER
========================================================= */

.muf-contact-section:hover .muf-contact-bg {
    transform: scale(1.08);

    filter: brightness(0.82);
}


/* =========================================================
   OVERLAY HOVER
========================================================= */

.muf-contact-section:hover .muf-contact-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.75),
            rgba(0, 0, 0, 0.52),
            rgba(0, 0, 0, 0.68)
        );
}


/* =========================================================
   CONTENT HOVER
========================================================= */

.muf-contact-section:hover .muf-contact-content {
    transform: translateY(-5px);
}


/* =========================================================
   SUBTITLE HOVER
========================================================= */

.muf-contact-section:hover .muf-contact-subtitle {
    transform: translateY(-5px);

    opacity: 1;
}


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

.muf-contact-section:hover .muf-contact-phone {
    transform: scale(1.04);

    color: #ffffff;
}


/* =========================================================
   EMAIL HOVER
========================================================= */

.muf-contact-section:hover .muf-contact-email {
    transform: translateY(3px);

    color: #ff333b;
}


/* =========================================================
   PHONE TEXT SHINE
========================================================= */

.muf-contact-phone {
    position: relative;

    display: inline-block;
}


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

@media (max-width: 991px) {

    .muf-contact-section {
        min-height: 380px;
    }


    .muf-contact-content {
        padding: 75px 15px;
    }


    .muf-contact-phone {
        font-size: 40px;
    }


    .muf-contact-email {
        font-size: 21px;
    }


    .muf-contact-subtitle {
        font-size: 15px;
    }

}


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

@media (max-width: 576px) {

    .muf-contact-section {
        min-height: 330px;
    }


    .muf-contact-section .container {
        width: 100%;

        max-width: 100%;

        padding-left: 15px;

        padding-right: 15px;
    }


    .muf-contact-content {
        width: 100%;

        padding: 65px 10px;

        text-align: center;
    }


    .muf-contact-subtitle {
        font-size: 13px;

        line-height: 1.6;

        margin-bottom: 12px;
    }


    .muf-contact-phone {
        font-size: 27px;

        line-height: 1.3;

        letter-spacing: 0.5px;

        word-break: break-word;
    }


    .muf-contact-email {
        font-size: 17px;

        line-height: 1.5;

        word-break: break-word;
    }


    .muf-contact-bg {
        object-position: center;
    }

}


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

@media (max-width: 380px) {

    .muf-contact-phone {
        font-size: 24px;
    }


    .muf-contact-email {
        font-size: 15px;
    }


    .muf-contact-subtitle {
        font-size: 12px;
    }

}


/* =========================================================
   CONTACT SECTION END
========================================================= */



/* =========================================================
   FULLY ANIMATED MSA FOOTER
========================================================= */

.muf-footer {

    position: relative;

    width: 100%;

    overflow: hidden;

    background: #05080d;

    color: #ffffff;

    isolation: isolate;

}


/* =========================================================
   BACKGROUND
========================================================= */

.muf-footer-bg {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    z-index: -5;

    opacity: .38;

    transform: scale(1.04);

    filter: brightness(.65) saturate(.8);

    animation: mufFooterBgMove 14s ease-in-out infinite alternate;

}


@keyframes mufFooterBgMove {

    0% {
        transform: scale(1.04);
    }

    50% {
        transform: scale(1.09);
    }

    100% {
        transform: scale(1.04);
    }

}


/* =========================================================
   DARK OVERLAY
========================================================= */

.muf-footer-overlay {

    position: absolute;

    inset: 0;

    z-index: -4;

    background:
        radial-gradient(
            circle at 15% 30%,
            rgba(17, 51, 91, .20),
            transparent 32%
        ),

        radial-gradient(
            circle at 85% 60%,
            rgba(198, 145, 25, .12),
            transparent 28%
        ),

        linear-gradient(
            90deg,
            rgba(2, 7, 14, .98),
            rgba(3, 8, 15, .91),
            rgba(2, 6, 12, .97)
        );

}


/* =========================================================
   TOP GOLD BORDER
========================================================= */

.muf-footer-main {

    position: relative;

    z-index: 5;

    border-top:
        1px solid
        rgba(215, 164, 44, .35);

}


/* =========================================================
   MOVING LIGHT
========================================================= */

.muf-footer-light {

    position: absolute;

    top: -20%;

    width: 18%;

    height: 150%;

    pointer-events: none;

    z-index: 10;

    opacity: .7;

    transform: rotate(15deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.08),
            rgba(220,175,60,.12),
            transparent
        );

}


.muf-light-one {

    left: -30%;

    animation:
        mufFooterLightOne
        8s
        linear
        infinite;

}


.muf-light-two {

    left: -60%;

    opacity: .35;

    animation:
        mufFooterLightTwo
        12s
        linear
        infinite;

}


@keyframes mufFooterLightOne {

    0% {
        left: -35%;
    }

    100% {
        left: 125%;
    }

}


@keyframes mufFooterLightTwo {

    0% {
        left: -70%;
    }

    100% {
        left: 130%;
    }

}


/* =========================================================
   GLOWING BORDER
========================================================= */

.muf-footer-glow {

    position: absolute;

    top: 0;

    left: -30%;

    width: 30%;

    height: 2px;

    z-index: 15;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d9a529,
            #ffffff,
            #d9a529,
            transparent
        );

    box-shadow:
        0 0 15px
        rgba(217,165,41,.8);

    animation:
        mufFooterBorderMove
        5s
        linear
        infinite;

}


@keyframes mufFooterBorderMove {

    0% {
        left: -30%;
    }

    100% {
        left: 130%;
    }

}


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

.muf-footer-particle {

    position: absolute;

    display: block;

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background: #d9a529;

    box-shadow:
        0 0 10px
        rgba(217,165,41,.8);

    z-index: 2;

    pointer-events: none;

    animation:
        mufFooterParticle
        7s
        ease-in-out
        infinite;

}


.particle-1 {
    left: 8%;
    bottom: 10%;
    animation-delay: 0s;
}

.particle-2 {
    left: 18%;
    bottom: 25%;
    animation-delay: 1.2s;
}

.particle-3 {
    left: 31%;
    bottom: 8%;
    animation-delay: 2.1s;
}

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

.particle-5 {
    left: 61%;
    bottom: 12%;
    animation-delay: 1.7s;
}

.particle-6 {
    left: 72%;
    bottom: 28%;
    animation-delay: 2.8s;
}

.particle-7 {
    left: 84%;
    bottom: 8%;
    animation-delay: 4s;
}

.particle-8 {
    left: 94%;
    bottom: 25%;
    animation-delay: 3.5s;
}


@keyframes mufFooterParticle {

    0% {

        opacity: 0;

        transform:
            translateY(30px)
            scale(.5);

    }

    30% {

        opacity: 1;

    }

    70% {

        opacity: .7;

    }

    100% {

        opacity: 0;

        transform:
            translateY(-150px)
            translateX(30px)
            scale(1.3);

    }

}


/* =========================================================
   CONTAINER
========================================================= */

.muf-footer-container {

    width: 100%;

    padding:
        90px
        55px
        70px;

}


/* =========================================================
   ROW
========================================================= */

.muf-footer-row {

    width: 100%;

    margin: 0;

}


/* =========================================================
   FOOTER BOX
========================================================= */

.muf-footer-box {

    position: relative;

    height: 100%;

    padding:
        0 35px;

    animation:
        mufFooterBoxReveal
        1.1s
        cubic-bezier(.22,.61,.36,1)
        both;

}


.muf-footer-row > div:nth-child(1)
.muf-footer-box {

    animation-delay: .1s;

}


.muf-footer-row > div:nth-child(2)
.muf-footer-box {

    animation-delay: .3s;

}


.muf-footer-row > div:nth-child(3)
.muf-footer-box {

    animation-delay: .5s;

}


@keyframes mufFooterBoxReveal {

    from {

        opacity: 0;

        transform:
            translateY(50px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   COMPANY BOX
========================================================= */

.muf-footer-company {

    padding-left: 5px;

}


/* =========================================================
   MSA LOGO
========================================================= */

.muf-footer-logo {

    position: relative;

    display: inline-flex;

    align-items: center;

    width: fit-content;

    max-width: 100%;

    margin-bottom: 25px;

    overflow: hidden;

    text-decoration: none;

    animation:
        mufLogoReveal
        1.5s
        cubic-bezier(.22,.61,.36,1)
        both;

}


@keyframes mufLogoReveal {

    0% {

        opacity: 0;

        transform:
            translateX(-80px)
            scale(.8);

        filter:
            blur(8px);

    }

    60% {

        opacity: 1;

        filter:
            blur(0);

    }

    100% {

        transform:
            translateX(0)
            scale(1);

    }

}


/* =========================================================
   LOGO IMAGE
========================================================= */

.muf-footer-logo-image {

    display: block;

    width: 300px;

    max-width: 100%;

    height: auto;

    object-fit: contain;

    transform-origin: center;

    transition:
        transform .7s
        cubic-bezier(.22,.61,.36,1),
        filter .6s ease;

    animation:
        mufLogoFloat
        5s
        ease-in-out
        infinite;

}


@keyframes mufLogoFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-5px);

    }

}


/* =========================================================
   LOGO GLOW
========================================================= */

.muf-logo-glow {

    position: absolute;

    inset: 10%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(218,170,48,.20),
            transparent 65%
        );

    filter: blur(18px);

    opacity: .5;

    animation:
        mufLogoGlow
        3s
        ease-in-out
        infinite alternate;

}


@keyframes mufLogoGlow {

    from {

        opacity: .25;

        transform: scale(.9);

    }

    to {

        opacity: .7;

        transform: scale(1.1);

    }

}


/* =========================================================
   LOGO HOVER
========================================================= */

.muf-footer-logo:hover
.muf-footer-logo-image {

    transform:
        scale(1.06)
        rotateY(4deg);

    filter:
        brightness(1.12)
        drop-shadow(
            0 8px 25px
            rgba(217,165,41,.30)
        );

}


/* =========================================================
   LOGO LIGHT SWEEP
========================================================= */

.muf-footer-logo::after {

    content: "";

    position: absolute;

    top: -20%;

    left: -120%;

    width: 45%;

    height: 140%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );

    transform:
        skewX(-20deg);

    pointer-events: none;

}


.muf-footer-logo:hover::after {

    animation:
        mufLogoSweep
        1.1s
        cubic-bezier(.22,.61,.36,1);

}


@keyframes mufLogoSweep {

    from {
        left: -120%;
    }

    to {
        left: 140%;
    }

}


/* =========================================================
   COMPANY NAME
========================================================= */

.muf-footer-company-name {

    max-width: 500px;

    margin:
        0 0 12px;

    font-size: 25px;

    line-height: 1.35;

    font-weight: 700;

    letter-spacing: .5px;

    color: #ffffff;

    animation:
        mufTextReveal
        1s
        .5s
        cubic-bezier(.22,.61,.36,1)
        both;

}


@keyframes mufTextReveal {

    from {

        opacity: 0;

        transform:
            translateY(25px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


.muf-footer-company-name:hover {

    color: #d9a529;

    transform:
        translateX(5px);

    transition:
        .4s ease;

}


/* =========================================================
   TITLE LINE
========================================================= */

.muf-footer-title-line {

    width: 90px;

    height: 2px;

    margin-bottom: 20px;

    overflow: hidden;

    background:
        rgba(255,255,255,.12);

}


.muf-footer-title-line span {

    display: block;

    width: 100%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            #0e447e,
            #d9a529
        );

    transform:
        translateX(-100%);

    animation:
        mufTitleLine
        1.2s
        .8s
        ease
        forwards;

}


@keyframes mufTitleLine {

    to {
        transform: translateX(0);
    }

}


/* =========================================================
   DESCRIPTION
========================================================= */

.muf-footer-description {

    max-width: 520px;

    margin:
        0 0 28px;

    font-size: 14px;

    line-height: 1.9;

    color:
        rgba(255,255,255,.64);

    animation:
        mufDescriptionReveal
        1s
        .9s
        ease
        both;

}


@keyframes mufDescriptionReveal {

    from {

        opacity: 0;

        transform:
            translateY(20px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


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

.muf-footer-contact-list {

    display: flex;

    flex-direction: column;

    gap: 13px;

}


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

.muf-footer-contact-item {

    display: flex;

    align-items: center;

    gap: 12px;

    width: fit-content;

    color:
        rgba(255,255,255,.72);

    text-decoration: none;

    font-size: 14px;

    opacity: 0;

    animation:
        mufContactReveal
        .7s
        cubic-bezier(.22,.61,.36,1)
        forwards;

}


.muf-footer-contact-item:nth-child(1) {
    animation-delay: 1.1s;
}

.muf-footer-contact-item:nth-child(2) {
    animation-delay: 1.25s;
}

.muf-footer-contact-item:nth-child(3) {
    animation-delay: 1.4s;
}


@keyframes mufContactReveal {

    from {

        opacity: 0;

        transform:
            translateX(-35px);

    }

    to {

        opacity: 1;

        transform:
            translateX(0);

    }

}


.muf-footer-contact-item:hover {

    color: #ffffff;

    transform:
        translateX(8px);

    transition:
        .4s ease;

}


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

.muf-footer-contact-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 36px;

    height: 36px;

    flex-shrink: 0;

    border:
        1px solid
        rgba(217,165,41,.45);

    border-radius: 50%;

    color: #d9a529;

    background:
        rgba(217,165,41,.04);

    transition:
        .5s cubic-bezier(.22,.61,.36,1);

}


.muf-footer-contact-item:hover
.muf-footer-contact-icon {

    color: #ffffff;

    background: #b8871b;

    border-color: #d9a529;

    transform:
        rotate(360deg)
        scale(1.1);

    box-shadow:
        0 0 18px
        rgba(217,165,41,.35);

}


/* =========================================================
   HEADINGS
========================================================= */

.muf-footer-heading {

    margin-bottom: 30px;

}


.muf-footer-heading span {

    display: block;

    margin-bottom: 8px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 3px;

    color: #d9a529;

    animation:
        mufHeadingFade
        1s
        .7s
        both;

}


.muf-footer-heading h3 {

    position: relative;

    display: inline-block;

    margin: 0;

    padding-bottom: 13px;

    font-size: 22px;

    font-weight: 700;

    color: #ffffff;

}


.muf-footer-heading h3::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 35px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            #0e447e,
            #d9a529
        );

    transition:
        width .5s ease;

}


.muf-footer-box:hover
.muf-footer-heading h3::after {

    width: 90px;

}


/* =========================================================
   QUICK LINKS
========================================================= */

.muf-footer-links {

    list-style: none;

    margin: 0;

    padding: 0;

}


.muf-footer-links li {

    margin-bottom: 14px;

    opacity: 0;

    animation:
        mufLinkReveal
        .7s
        cubic-bezier(.22,.61,.36,1)
        forwards;

}


.muf-footer-links li:nth-child(1) {
    animation-delay: .8s;
}

.muf-footer-links li:nth-child(2) {
    animation-delay: .95s;
}

.muf-footer-links li:nth-child(3) {
    animation-delay: 1.1s;
}

.muf-footer-links li:nth-child(4) {
    animation-delay: 1.25s;
}


@keyframes mufLinkReveal {

    from {

        opacity: 0;

        transform:
            translateX(-30px);

    }

    to {

        opacity: 1;

        transform:
            translateX(0);

    }

}


.muf-footer-links li a {

    display: inline-flex;

    align-items: center;

    gap: 0;

    color:
        rgba(255,255,255,.65);

    text-decoration: none;

    font-size: 14px;

    transition:
        .4s ease;

}


.muf-footer-links li a:hover {

    color: #ffffff;

    transform:
        translateX(8px);

}


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

.muf-link-arrow {

    display: inline-flex;

    align-items: center;

    justify-content: flex-start;

    width: 0;

    overflow: hidden;

    color: #d9a529;

    opacity: 0;

    transition:
        width .4s ease,
        opacity .4s ease;

}


.muf-footer-links li a:hover
.muf-link-arrow {

    width: 23px;

    opacity: 1;

}


/* =========================================================
   SERVICE GRID
========================================================= */

.muf-footer-service-grid {

    display: grid;

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

    gap: 12px;

}


/* =========================================================
   SERVICE CARD
========================================================= */

.muf-footer-service-grid a {

    position: relative;

    display: flex;

    align-items: center;

    gap: 9px;

    min-height: 48px;

    padding:
        10px
        13px;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius: 4px;

    background:
        rgba(255,255,255,.025);

    color:
        rgba(255,255,255,.68);

    text-decoration: none;

    font-size: 13px;

    overflow: hidden;

    opacity: 0;

    animation:
        mufServiceReveal
        .7s
        cubic-bezier(.22,.61,.36,1)
        forwards;

    transition:
        .45s
        cubic-bezier(.22,.61,.36,1);

}


.muf-footer-service-grid a:nth-child(1) {
    animation-delay: .7s;
}

.muf-footer-service-grid a:nth-child(2) {
    animation-delay: .82s;
}

.muf-footer-service-grid a:nth-child(3) {
    animation-delay: .94s;
}

.muf-footer-service-grid a:nth-child(4) {
    animation-delay: 1.06s;
}

.muf-footer-service-grid a:nth-child(5) {
    animation-delay: 1.18s;
}

.muf-footer-service-grid a:nth-child(6) {
    animation-delay: 1.3s;
}


@keyframes mufServiceReveal {

    from {

        opacity: 0;

        transform:
            translateY(30px)
            scale(.95);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* GOLD BAR */

.muf-footer-service-grid a::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 3px;

    height: 0;

    background:
        linear-gradient(
            180deg,
            #0e447e,
            #d9a529
        );

    transition:
        height .45s ease;

}


.muf-footer-service-grid a:hover {

    color: #ffffff;

    border-color:
        rgba(217,165,41,.5);

    background:
        rgba(217,165,41,.08);

    transform:
        translateY(-6px)
        scale(1.02);

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.35);

}


.muf-footer-service-grid a:hover::before {

    height: 100%;

}


.muf-footer-service-grid a i {

    color: #d9a529;

    font-size: 9px;

    transform:
        translateX(-5px);

    opacity: 0;

    transition:
        .35s ease;

}


.muf-footer-service-grid a:hover i {

    opacity: 1;

    transform:
        translateX(0)
        rotate(90deg);

}


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

.muf-footer-bottom {

    position: relative;

    z-index: 20;

    border-top:
        1px solid
        rgba(255,255,255,.09);

    background:
        rgba(0,0,0,.72);

}


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

.muf-footer-bottom-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    padding:
        20px
        55px;

}


/* =========================================================
   COPYRIGHT
========================================================= */

.muf-footer-bottom p {

    margin: 0;

    font-size: 13px;

    color:
        rgba(255,255,255,.52);

        
         text-decoration: none;
}


.muf-footer-bottom p strong {

    color:
        rgba(255,255,255,.82);

}


/* =========================================================
   SOCIAL ICONS
========================================================= */

.muf-footer-social {

    display: flex;

    gap: 9px;

}


.muf-footer-social a {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 37px;

    height: 37px;

    border:
        1px solid
        rgba(255,255,255,.13);

    border-radius: 50%;

    color:
        rgba(255,255,255,.65);

    text-decoration: none;

    background:
        rgba(255,255,255,.025);

    overflow: hidden;

    transition:
        .5s
        cubic-bezier(.22,.61,.36,1);

}


.muf-footer-social a::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #0e447e,
            #d9a529
        );

    transform:
        scale(0);

    transition:
        transform .45s ease;

}


.muf-footer-social a i {

    position: relative;

    z-index: 2;

}


.muf-footer-social a:hover::before {

    transform:
        scale(1);

}


.muf-footer-social a:hover {

    color: #ffffff;

    border-color: #d9a529;

    transform:
        translateY(-7px)
        rotate(360deg);

    box-shadow:
        0 8px 25px
        rgba(217,165,41,.25);

}


/* =========================================================
   BACK TO TOP
========================================================= */

.muf-footer-top {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color:
        rgba(255,255,255,.62);

    text-decoration: none;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;

    transition:
        .4s ease;

}


.muf-footer-top i {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 36px;

    height: 36px;

    border:
        1px solid
        rgba(217,165,41,.45);

    color: #d9a529;

    transition:
        .4s ease;

}


.muf-footer-top:hover {

    color: #ffffff;

    transform:
        translateY(-4px);

}


.muf-footer-top:hover i {

    color: #ffffff;

    background: #b8871b;

    transform:
        translateY(-5px);

    box-shadow:
        0 0 18px
        rgba(217,165,41,.35);

}


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

@media (max-width: 991px) {

    .muf-footer-container {

        padding:
            70px
            30px
            55px;

    }

    .muf-footer-box {

        padding:
            0 20px;

    }

    .muf-footer-company {

        padding-left: 0;

    }

    .muf-footer-logo-image {

        width: 260px;

    }

    .muf-footer-company-name {

        font-size: 22px;

    }

    .muf-footer-service-grid {

        grid-template-columns: 1fr;

    }

    .muf-footer-bottom-inner {

        padding:
            18px
            30px;

    }

}


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

@media (max-width: 767px) {

    .muf-footer-container {

        padding:
            60px
            20px
            30px;

    }

    .muf-footer-box {

        padding: 0;

        margin-bottom: 48px;

    }

    .muf-footer-row > div:last-child
    .muf-footer-box {

        margin-bottom: 15px;

    }

    .muf-footer-logo-image {

        width: 235px;

    }

    .muf-footer-company-name {

        font-size: 21px;

    }

    .muf-footer-description {

        font-size: 13px;

        line-height: 1.8;

    }

    .muf-footer-contact-item {

        font-size: 13px;

    }

    .muf-footer-service-grid {

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

        gap: 9px;

    }

    .muf-footer-service-grid a {

        min-height: 46px;

        padding: 9px;

        font-size: 12px;

    }

    .muf-footer-bottom-inner {

        flex-direction: column;

        text-align: center;

        justify-content: center;

        padding:
            20px
            15px;

        gap: 18px;

    }

    .muf-footer-bottom p {

        order: 1;

        font-size: 11px;

        line-height: 1.7;

    }

    .muf-footer-social {

        order: 2;

    }

    .muf-footer-top {

        order: 3;

    }

    .muf-footer-particle {

        display: none;

    }

}


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

@media (max-width: 400px) {

    .muf-footer-container {

        padding-left: 15px;

        padding-right: 15px;

    }

    .muf-footer-logo-image {

        width: 205px;

    }

    .muf-footer-service-grid {

        grid-template-columns: 1fr;

    }

    .muf-footer-company-name {

        font-size: 19px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .muf-footer *,
    .muf-footer-bg,
    .muf-footer-light,
    .muf-footer-glow,
    .muf-footer-particle {

        animation: none !important;

        transition: none !important;

    }

}


/* =========================================================
                  FULL ANIMATION END
========================================================= */