.elementor-42 .elementor-element.elementor-element-59d50fd{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-4688990 *//* =========================================================
   METRICOVA HEADER
   CREATIVE MEGA MENU
   BRAND COLORS
   #224248
   #325E6A
   #44A1A4
   #FF9A00
========================================================= */


/* =========================================================
   MAIN HEADER
========================================================= */

.mvh-header {
    position: relative;
    width: 100%;
    z-index: 99999;

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

    border-bottom: 1px solid rgba(34, 66, 72, 0.10);

    box-shadow:
        0 8px 30px rgba(34, 66, 72, 0.06);

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

    overflow: visible !important;
}


/* =========================================================
   HEADER INNER
========================================================= */

.mvh-header-inner {
    position: relative;

    width: min(1240px, calc(100% - 40px));

    height: 82px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    overflow: visible !important;
}


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

.mvh-logo {
    display: flex;

    align-items: center;

    width: 165px;

    flex-shrink: 0;

    text-decoration: none !important;

    line-height: 0;
}


.mvh-logo img {
    display: block;

    width: 100%;

    height: auto;

    max-height: 52px;

    object-fit: contain;

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


.mvh-logo:hover img {
    transform: translateY(-2px) scale(1.02);

    opacity: 0.92;
}


/* =========================================================
   NAVIGATION
========================================================= */

.mvh-navigation {
    display: flex;

    align-items: center;

    height: 100%;

    gap: 5px;

    margin-left: auto;

    overflow: visible !important;
}


/* =========================================================
   NAV LINKS
========================================================= */

.mvh-nav-link {
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    height: 46px;

    padding: 0 15px;

    margin: 0;

    border: 0;

    outline: none;

    background: transparent;

    color: #224248 !important;

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.2px;

    line-height: 1;

    text-decoration: none !important;

    cursor: pointer;

    white-space: nowrap;

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


/* NAV HOVER */

.mvh-nav-link:hover {
    color: #FF9A00 !important;
}


/* NAV UNDERLINE */

.mvh-nav-link::after {
    content: "";

    position: absolute;

    left: 15px;

    right: 15px;

    bottom: 5px;

    height: 2px;

    background: #FF9A00;

    transform: scaleX(0);

    transform-origin: center;

    transition:
        transform 0.3s ease;
}


.mvh-nav-link:hover::after {
    transform: scaleX(1);
}


/* =========================================================
   SERVICES BUTTON
========================================================= */

.mvh-mega-trigger {
    appearance: none;

    -webkit-appearance: none;

    font-family: inherit;

    box-shadow: none !important;
}


/* =========================================================
   CHEVRON
========================================================= */

.mvh-chevron {
    display: inline-block;

    margin-left: 7px;

    font-size: 17px;

    line-height: 1;

    color: #44A1A4;

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


.mvh-mega-parent:hover .mvh-chevron,
.mvh-mega-parent:focus-within .mvh-chevron {
    transform: rotate(180deg);

    color: #FF9A00;
}


/* =========================================================
   MEGA MENU PARENT
========================================================= */

.mvh-mega-parent {
    position: relative;

    height: 100%;

    display: flex;

    align-items: center;

    overflow: visible !important;
}


/* =========================================================
   HOVER BRIDGE
   SERVICES → MEGA MENU
========================================================= */

.mvh-mega-parent::after {
    content: "";

    position: absolute;

    left: -35px;

    right: -35px;

    top: 65px;

    height: 42px;

    background: transparent;

    z-index: 99998;

    pointer-events: auto;
}


/* =========================================================
   MEGA MENU
   EXACT VIEWPORT CENTER
========================================================= */

.mvh-mega-menu {

    position: fixed;

    /*
       Header ke neeche menu ki starting position.
       Normal front-end header ke liye 82px.
    */

    top: 82px;

    left: 50%;

    width: min(1160px, 92vw);

    /*
       EXACT SCREEN CENTER
    */

    transform:
        translateX(-50%)
        translateY(-12px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    background: #ffffff;

    border-radius: 0 0 22px 22px;

    border: 1px solid rgba(34, 66, 72, 0.12);

    box-shadow:
        0 30px 80px rgba(34, 66, 72, 0.18),
        0 10px 30px rgba(34, 66, 72, 0.08);

    overflow: visible !important;

    transition:
        opacity 0.22s ease 0.08s,
        transform 0.28s cubic-bezier(.2,.8,.2,1) 0.08s,
        visibility 0s linear 0.40s;
}


/* =========================================================
   MEGA MENU OPEN
========================================================= */

.mvh-mega-parent:hover .mvh-mega-menu,
.mvh-mega-parent:focus-within .mvh-mega-menu {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateX(-50%)
        translateY(0);

    transition:
        opacity 0.22s ease 0s,
        transform 0.28s cubic-bezier(.2,.8,.2,1) 0s,
        visibility 0s linear 0s;
}


/* =========================================================
   SECOND HOVER BRIDGE
   MENU KE TOP PAR
========================================================= */

.mvh-mega-menu::before {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    top: -32px;

    height: 34px;

    background: transparent;

    pointer-events: auto;
}


/* =========================================================
   MEGA INNER
========================================================= */

.mvh-mega-inner {

    display: grid;

    grid-template-columns: 310px 1fr;

    min-height: 410px;

    overflow: hidden;

    border-radius: 0 0 22px 22px;
}


/* =========================================================
   FEATURE PANEL
========================================================= */

.mvh-mega-feature {

    position: relative;

    overflow: hidden;

    padding: 42px 34px;

    background:
        linear-gradient(
            145deg,
            #224248 0%,
            #325E6A 100%
        );

    color: #ffffff;
}


/* =========================================================
   FEATURE DECORATION
========================================================= */

.mvh-feature-circle {

    position: absolute;

    width: 270px;

    height: 270px;

    right: -130px;

    bottom: -130px;

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

    border-radius: 50%;

    pointer-events: none;
}


.mvh-feature-circle::before {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    left: 45px;

    top: 45px;

    border: 1px solid rgba(255,154,0,0.22);

    border-radius: 50%;
}


/* =========================================================
   FEATURE TOP
========================================================= */

.mvh-feature-top {

    position: relative;

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 35px;
}


/* NUMBER */

.mvh-feature-number {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 36px;

    height: 36px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #FF9A00;

    color: #224248;

    font-size: 12px;

    font-weight: 900;
}


/* LABEL */

.mvh-feature-label {

    font-size: 10px;

    letter-spacing: 1.5px;

    font-weight: 800;

    opacity: 0.8;
}


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

.mvh-mega-feature h3 {

    position: relative;

    max-width: 235px;

    margin: 0 0 18px;

    color: #ffffff;

    font-size: 29px;

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -1px;
}


.mvh-mega-feature h3 span {

    color: #FF9A00;
}


/* =========================================================
   FEATURE PARAGRAPH
========================================================= */

.mvh-mega-feature p {

    position: relative;

    max-width: 245px;

    margin: 0 0 28px;

    color: rgba(255,255,255,0.76);

    font-size: 13px;

    line-height: 1.75;
}


/* =========================================================
   FEATURE LINK
========================================================= */

.mvh-feature-link {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #ffffff !important;

    font-size: 12px;

    font-weight: 800;

    text-decoration: none !important;

    border-bottom: 1px solid rgba(255,154,0,0.6);

    padding-bottom: 6px;

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


.mvh-feature-link:hover {

    gap: 16px;

    color: #FF9A00 !important;
}


/* =========================================================
   SERVICES AREA
========================================================= */

.mvh-services-area {

    padding: 34px 35px 30px;

    background: #ffffff;
}


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

.mvh-services-heading {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 20px;

    margin-bottom: 6px;

    border-bottom: 1px solid rgba(34,66,72,0.09);
}


.mvh-services-heading span {

    color: #224248;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1.7px;
}


.mvh-services-heading small {

    color: #8a999d;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.1px;
}


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

.mvh-service-grid {

    display: grid;

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

    gap: 8px;

    padding-top: 15px;
}


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

.mvh-service-card {

    position: relative;

    display: flex;

    align-items: center;

    min-height: 88px;

    padding: 14px;

    gap: 12px;

    border: 1px solid rgba(34,66,72,0.08);

    border-radius: 13px;

    background: #ffffff;

    text-decoration: none !important;

    overflow: hidden;

    transition:
        transform 0.3s cubic-bezier(.2,.8,.2,1),
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


/* CARD HOVER */

.mvh-service-card:hover {

    transform: translateY(-4px);

    background: #224248;

    border-color: #224248;

    box-shadow:
        0 12px 25px rgba(34,66,72,0.16);
}


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

.mvh-service-icon {

    flex-shrink: 0;

    width: 39px;

    height: 39px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background: rgba(68,161,164,0.10);

    color: #325E6A;

    font-size: 14px;

    font-weight: 900;

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


.mvh-service-card:hover .mvh-service-icon {

    background: #FF9A00;

    color: #224248;

    transform:
        rotate(-6deg)
        scale(1.05);
}


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

.mvh-service-content {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.mvh-service-content strong {

    color: #224248;

    font-size: 12px;

    font-weight: 800;

    line-height: 1.2;

    transition:
        color 0.3s ease;
}


.mvh-service-content small {

    color: #829094;

    font-size: 9px;

    font-weight: 600;

    line-height: 1.2;

    transition:
        color 0.3s ease;
}


/* HOVER TEXT */

.mvh-service-card:hover .mvh-service-content strong {

    color: #ffffff;
}


.mvh-service-card:hover .mvh-service-content small {

    color: rgba(255,255,255,0.65);
}


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

.mvh-card-arrow {

    margin-left: auto;

    color: #44A1A4;

    font-size: 14px;

    transform: translateX(-4px);

    opacity: 0.7;

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


.mvh-service-card:hover .mvh-card-arrow {

    color: #FF9A00;

    transform: translateX(2px);

    opacity: 1;
}


/* =========================================================
   MEGA MENU BOTTOM
========================================================= */

.mvh-mega-bottom {

    min-height: 58px;

    padding: 0 28px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    background: #f4f8f8;

    border-top: 1px solid rgba(34,66,72,0.08);
}


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

.mvh-bottom-location {

    display: flex;

    align-items: center;

    gap: 9px;

    color: #325E6A;

    font-size: 11px;

    font-weight: 800;
}


/* DOT */

.mvh-bottom-dot {

    width: 7px;

    height: 7px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #FF9A00;

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

    animation:
        mvhPulse 2s infinite;
}


/* =========================================================
   PULSE
========================================================= */

@keyframes mvhPulse {

    0% {
        box-shadow:
            0 0 0 0 rgba(255,154,0,0.35);
    }

    70% {
        box-shadow:
            0 0 0 7px rgba(255,154,0,0);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(255,154,0,0);
    }

}


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

.mvh-bottom-keywords {

    color: #8b999d;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.5px;
}


.mvh-bottom-keywords span {

    margin: 0 5px;

    color: #FF9A00;
}


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

.mvh-bottom-cta {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #224248 !important;

    font-size: 11px;

    font-weight: 900;

    text-decoration: none !important;

    transition:
        color 0.25s ease,
        gap 0.25s ease;
}


.mvh-bottom-cta:hover {

    color: #FF9A00 !important;

    gap: 14px;
}


/* =========================================================
   HEADER CTA
========================================================= */

.mvh-header-cta {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    height: 45px;

    padding: 0 17px;

    flex-shrink: 0;

    border-radius: 50px;

    background: #FF9A00;

    color: #224248 !important;

    text-decoration: none !important;

    font-size: 12px;

    font-weight: 900;

    box-shadow:
        0 8px 20px rgba(255,154,0,0.20);

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


.mvh-header-cta:hover {

    transform: translateY(-3px);

    box-shadow:
        0 13px 27px rgba(255,154,0,0.28);
}


/* CTA DOT */

.mvh-cta-dot {

    width: 6px;

    height: 6px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #224248;
}


/* CTA ARROW */

.mvh-cta-arrow {

    font-size: 15px;

    transition:
        transform 0.3s ease;
}


.mvh-header-cta:hover .mvh-cta-arrow {

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


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

.mvh-mobile-button {

    display: none;

    width: 46px;

    height: 46px;

    padding: 0;

    margin: 0;

    border: 1px solid rgba(34,66,72,0.15);

    border-radius: 12px;

    background: #ffffff;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 5px;

    cursor: pointer;

    box-shadow: none !important;
}


.mvh-mobile-button span {

    display: block;

    width: 20px;

    height: 2px;

    border-radius: 3px;

    background: #224248;
}


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

@media (max-width: 1100px) {

    .mvh-header-inner {

        width: min(
            calc(100% - 30px),
            1000px
        );

        gap: 15px;
    }


    .mvh-navigation {

        gap: 0;
    }


    .mvh-nav-link {

        padding: 0 10px;

        font-size: 13px;
    }


    .mvh-header-cta {

        padding: 0 13px;
    }


    .mvh-mega-menu {

        width: min(
            940px,
            94vw
        );
    }


    .mvh-mega-inner {

        grid-template-columns: 280px 1fr;
    }


    .mvh-services-area {

        padding-left: 25px;

        padding-right: 25px;
    }

}


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

@media (max-width: 900px) {

    .mvh-logo {

        width: 145px;
    }


    .mvh-navigation {

        gap: 0;
    }


    .mvh-nav-link {

        padding: 0 7px;

        font-size: 12px;
    }


    .mvh-header-cta {

        height: 42px;

        padding: 0 12px;

        font-size: 11px;
    }


    .mvh-mega-menu {

        width: 95vw;
    }


    .mvh-mega-inner {

        grid-template-columns: 250px 1fr;
    }


    .mvh-mega-feature {

        padding: 35px 25px;
    }


    .mvh-mega-feature h3 {

        font-size: 25px;
    }

}


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

@media (max-width: 800px) {

    .mvh-header-inner {

        width: calc(100% - 30px);

        height: 72px;
    }


    /* HIDE DESKTOP NAV */

    .mvh-navigation {

        display: none;
    }


    /* HIDE CTA */

    .mvh-header-cta {

        display: none;
    }


    /* SHOW MOBILE BUTTON */

    .mvh-mobile-button {

        display: flex;
    }


    /* LOGO */

    .mvh-logo {

        width: 145px;
    }


    /* DISABLE DESKTOP MEGA MENU */

    .mvh-mega-menu {

        display: none !important;
    }


    .mvh-mega-parent::after {

        display: none;
    }

}


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

@media (max-width: 480px) {

    .mvh-header-inner {

        width: calc(100% - 22px);

        height: 68px;
    }


    .mvh-logo {

        width: 132px;
    }


    .mvh-mobile-button {

        width: 42px;

        height: 42px;
    }

}


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

.mvh-nav-link:focus-visible,
.mvh-service-card:focus-visible,
.mvh-feature-link:focus-visible,
.mvh-bottom-cta:focus-visible,
.mvh-header-cta:focus-visible {

    outline: 2px solid #FF9A00;

    outline-offset: 3px;
}


/* =========================================================
   ELEMENTOR / WORDPRESS OVERRIDES
========================================================= */

.mvh-header *,
.mvh-header *::before,
.mvh-header *::after {

    box-sizing: border-box;
}


.mvh-header a {

    box-sizing: border-box;
}


.mvh-header button {

    box-sizing: border-box;

    margin: 0;
}


/* IMPORTANT FOR ELEMENTOR */

.mvh-header,
.mvh-header-inner,
.mvh-navigation,
.mvh-mega-parent {

    overflow: visible !important;
}/* End custom CSS */