/* ============================================================
   VARIABLES
============================================================ */

body{
width: 100%;
height: auto;
margin: 0;
}

/* ============================================================
   MDN GENERAL CONTRACTOR LLC
   HEADER PREMIUM / FUTURISTIC 2030
   ============================================================

   PALETA PRINCIPAL
   ------------------------------------------------------------
   Navy Deep:       #020916
   Navy Premium:    #061A38
   Navy Bright:     #0A3470
   Electric Blue:   #2478FF

   Red Deep:        #9C0715
   MDN Red:         #D80B20
   Bright Red:      #FF1834
   Red Glow:        #FF3B50

   White:           #FFFFFF
   Soft White:      #F4F7FB

   ------------------------------------------------------------
   IMPORTANTE
   - Tipografía mínima: 14px
   - Mega menú desktop
   - Off-canvas mobile
   - Sticky header
   - Texturas premium
   - Glassmorphism controlado
   - Responsive
============================================================ */


/* ============================================================
   GOOGLE FONTS
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700;800&display=swap');


/* ============================================================
   VARIABLES
============================================================ */

:root {

    /* NAVY */
    --mdn-navy-1000: #01050d;
    --mdn-navy-950: #020916;
    --mdn-navy-900: #031127;
    --mdn-navy-850: #061a38;
    --mdn-navy-800: #08234b;
    --mdn-navy-750: #0a2c5f;
    --mdn-navy-700: #0a3470;

    /* BLUE */
    --mdn-blue: #1255b8;
    --mdn-blue-bright: #2478ff;
    --mdn-blue-soft: #5b9cff;

    /* RED */
    --mdn-red-deep: #9c0715;
    --mdn-red-dark: #b4081a;
    --mdn-red: #d80b20;
    --mdn-red-bright: #ff1834;
    --mdn-red-glow: #ff3b50;
    --mdn-red-soft: #ff6879;

    /* WHITE / GRAY */
    --mdn-white: #ffffff;
    --mdn-white-soft: #f4f7fb;
    --mdn-gray-100: #e9eef5;
    --mdn-gray-300: #c6d0dc;
    --mdn-gray-500: #96a4b7;
    --mdn-gray-600: #78879b;

    /* BORDERS */
    --mdn-border-white: rgba(255,255,255,.10);
    --mdn-border-red: rgba(255,24,52,.25);
    --mdn-border-blue: rgba(36,120,255,.22);

    /* SHADOWS */
    --mdn-shadow-soft:
        0 18px 50px rgba(0, 5, 20, .28);

    --mdn-shadow-deep:
        0 30px 80px rgba(0, 5, 20, .52);

    --mdn-shadow-red:
        0 18px 44px rgba(255, 24, 52, .24);

    --mdn-shadow-blue:
        0 18px 44px rgba(36, 120, 255, .18);

    /* GRADIENTS */
    --mdn-gradient-navy:
        linear-gradient(
            135deg,
            #020916 0%,
            #061a38 50%,
            #0a2c5f 100%
        );

    --mdn-gradient-red:
        linear-gradient(
            135deg,
            #ff3b50 0%,
            #ff1834 35%,
            #d80b20 68%,
            #a50718 100%
        );

    --mdn-gradient-blue:
        linear-gradient(
            135deg,
            #2478ff 0%,
            #1255b8 100%
        );

    /* LAYOUT */
    --mdn-container: 1480px;

    --mdn-radius-xs: 8px;
    --mdn-radius-sm: 12px;
    --mdn-radius: 16px;
    --mdn-radius-lg: 22px;
    --mdn-radius-xl: 30px;

    /* TRANSITION */
    --mdn-transition:
        .35s cubic-bezier(.22,.8,.22,1);

    --mdn-transition-fast:
        .22s ease;

}


/* ============================================================
   GLOBAL HEADER RESET
============================================================ */

.mdn-header,
.mdn-header *,
.mdn-mobile-menu,
.mdn-mobile-menu *,
.mdn-mobile-overlay {

    box-sizing: border-box;

}


.mdn-header {

    width: 100%;

    /* FIX: sticky estable desde el propio CSS */
    position: sticky;
    top: 0;

    z-index: 9990;

    /* Fondo sólido de seguridad: evita que se filtre el blanco
       de las secciones claras al hacer scroll */
    background: #020916;

    /* Aísla el header de las capas con filtros/transparencias */
    isolation: isolate;

    transform: translateZ(0);
    -webkit-transform: translateZ(0);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    color: var(--mdn-white);

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

    font-size: 14px;

}


.mdn-header a,
.mdn-mobile-menu a {

    text-decoration: none;

}


.mdn-header button,
.mdn-mobile-menu button {

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

}


.mdn-header img,
.mdn-mobile-menu img {

    max-width: 100%;

}


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

.mdn-container {

    width:
        min(
            var(--mdn-container),
            calc(100% - 64px)
        );

    margin-left: auto;
    margin-right: auto;

}


/* ============================================================
   TOP BAR
============================================================ */

.mdn-topbar {

    position: relative;

    min-height: 54px;
    max-height: 54px;

    overflow: hidden;

    opacity: 1;

    transition:
        min-height .35s ease,
        max-height .35s ease,
        opacity .25s ease,
        border-color .25s ease;

    will-change:
        min-height,
        max-height,
        opacity;

    background:

        radial-gradient(
            circle at 84% -100%,
            rgba(255,24,52,.24),
            transparent 40%
        ),

        radial-gradient(
            circle at 10% 160%,
            rgba(36,120,255,.15),
            transparent 38%
        ),

        linear-gradient(
            90deg,
            #010611 0%,
            #031127 38%,
            #061a38 67%,
            #020916 100%
        );

    border-bottom:
        1px solid rgba(255,24,52,.20);

}


/* ============================================================
   TOP BAR TEXTURE
============================================================ */

.mdn-topbar::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .34;

    background-image:

        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );

    background-size:
        36px 36px;

}


/* red accent */

.mdn-topbar::after {

    content: "";

    position: absolute;

    top: 0;
    right: 10%;

    width: 220px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--mdn-red-bright),
            transparent
        );

    box-shadow:
        0 0 14px rgba(255,24,52,.70);

}


/* ============================================================
   TOP BAR INNER
============================================================ */

.mdn-topbar__inner {

    min-height: 54px;

    transition:
        min-height .35s ease;

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 32px;

}


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

.mdn-topbar__left {

    display: flex;

    align-items: center;

    gap: 22px;

}


.mdn-topbar__item {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--mdn-white-soft);

}


.mdn-topbar__item > div {

    display: flex;

    align-items: center;

    gap: 7px;

    flex-wrap: wrap;

}


.mdn-topbar__label {

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

    font-size: 14px;

    font-weight: 500;

}


.mdn-topbar__item strong {

    color: var(--mdn-white);

    font-size: 14px;

    font-weight: 700;

}


/* ============================================================
   TOP BAR ICON
============================================================ */

.mdn-topbar__icon {

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    border:
        1px solid rgba(255,24,52,.28);

    color: var(--mdn-red-bright);

    background:

        linear-gradient(
            135deg,
            rgba(255,24,52,.12),
            rgba(36,120,255,.05)
        );

    box-shadow:
        inset 0 0 16px rgba(255,24,52,.04);

    font-size: 14px;

}


/* ============================================================
   TOP BAR DIVIDER
============================================================ */

.mdn-topbar__divider {

    width: 1px;

    height: 25px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,255,255,.24),
            transparent
        );

}


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

.mdn-topbar__right {

    display: flex;

    align-items: center;

    gap: 20px;

}


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

.mdn-topbar__link {

    display: flex;

    align-items: center;

    gap: 9px;

    color: var(--mdn-gray-100);

    font-size: 14px;

    font-weight: 500;

    transition:
        color var(--mdn-transition-fast);

}


.mdn-topbar__link:hover {

    color: var(--mdn-red-soft);

}


/* ============================================================
   TOP BAR PHONE
============================================================ */

.mdn-topbar__phone {

    min-height: 54px;

    padding:
        0 22px;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--mdn-white);

    background:
        var(--mdn-gradient-red);

    border-left:
        1px solid rgba(255,255,255,.12);

    border-right:
        1px solid rgba(255,255,255,.12);

    box-shadow:
        0 0 30px rgba(255,24,52,.15);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .02em;

}


/* light animation */

.mdn-topbar__phone::before {

    content: "";

    position: absolute;

    width: 42px;
    height: 180%;

    left: -75px;
    top: -40%;

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

    transform:
        rotate(22deg);

    filter:
        blur(2px);

    transition:
        left .65s ease;

}


.mdn-topbar__phone:hover::before {

    left: 125%;

}


.mdn-topbar__phone span {

    position: relative;

    z-index: 2;

}


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

.mdn-navigation {

    position: relative;

    /*
     * FIX: fondo completamente opaco.
     * No usamos alpha ni backdrop-filter para que el header
     * conserve el mismo navy sobre el slider y sobre secciones blancas.
     */
    background:

        radial-gradient(
            circle at 88% 0%,
            rgba(255,24,52,.11),
            transparent 27%
        ),

        radial-gradient(
            circle at 7% 130%,
            rgba(36,120,255,.14),
            transparent 30%
        ),

        linear-gradient(
            115deg,
            #020916 0%,
            #041228 48%,
            #061a38 100%
        );

    border-bottom:
        1px solid rgba(255,255,255,.08);

    box-shadow:
        0 12px 40px rgba(0,4,18,.17);

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    transform: translateZ(0);
    -webkit-transform: translateZ(0);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    transition:
        background var(--mdn-transition),
        box-shadow var(--mdn-transition);

}


/* ============================================================
   NAVIGATION ARCHITECTURAL TEXTURE
============================================================ */

.mdn-navigation::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .20;

    background-image:

        linear-gradient(
            135deg,
            rgba(255,255,255,.025) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255,255,255,.025) 50%,
            rgba(255,255,255,.025) 75%,
            transparent 75%,
            transparent
        );

    background-size:
        24px 24px;

}


/* red accent line */

.mdn-navigation::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(36,120,255,.35) 18%,
            rgba(255,24,52,.75) 50%,
            rgba(36,120,255,.30) 82%,
            transparent 100%
        );

}


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

.mdn-navigation__inner {

    min-height: 100px;

    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;

    gap: 30px;

}


/* ============================================================
   STICKY / SCROLLED HEADER — FIX ESTABLE
============================================================ */

/*
 * Se mantiene por compatibilidad con el JavaScript existente,
 * pero el sticky real ya vive en .mdn-header.
 */
.mdn-header.is-sticky {

    position: sticky;
    top: 0;

}


/*
 * IMPORTANTE:
 * NO usar display:none aquí.
 * Ocultar el topbar quitándolo del layout de golpe provocaba
 * el bucle visual al cruzar el umbral de scroll.
 */
.mdn-header.is-scrolled .mdn-topbar {

    min-height: 0;
    max-height: 0;

    opacity: 0;

    border-bottom-color: transparent;

    pointer-events: none;

}


.mdn-header.is-scrolled .mdn-topbar__inner {

    min-height: 0;

}


.mdn-header.is-scrolled .mdn-navigation {

    /*
     * Fondo 100% opaco para evitar el cambio azul/blanco
     * dependiendo del contenido situado detrás del header.
     */
    background:

        radial-gradient(
            circle at 88% -20%,
            rgba(255,24,52,.10),
            transparent 30%
        ),

        linear-gradient(
            115deg,
            #020916 0%,
            #031127 50%,
            #061a38 100%
        );

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    box-shadow:
        0 18px 55px rgba(0,5,20,.38);

    border-bottom:
        1px solid rgba(255,24,52,.17);

}


.mdn-header.is-scrolled .mdn-navigation__inner {

    min-height: 80px;

}


/* Sincroniza la altura del menú con el header reducido */
.mdn-header.is-scrolled .mdn-menu-link {

    min-height: 80px;

}


.mdn-header.is-scrolled .mdn-menu-link::after {

    bottom: 12px;

}


/* Reduce el logo de forma suave al hacer scroll */
.mdn-header.is-scrolled .mdn-logo__image {

width: 200px;

height: 66px;
}


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

.mdn-logo {

    position: relative;

    z-index: 3;

    flex: 0 0 auto;

    display: flex;

    align-items: center;

    gap: 14px;

    color: var(--mdn-white);

}


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

.mdn-logo__image {

width: 230px;

height: 75px;

filter: brightness(0) invert(1);

display: flex;

align-items: center;

justify-content: center;

position: relative;
}


/* subtle glow behind logo */

.mdn-logo__image::before {

    content: "";

    position: absolute;

    inset: 8px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,24,52,.16),
            transparent 68%
        );

    filter:
        blur(10px);

}


.mdn-logo__image img {

    display: block;

    max-width: 100%;

    max-height: 100%;

    position: relative;

    z-index: 2;

    object-fit: contain;

}


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

.mdn-logo__text {

    display: flex;

    flex-direction: column;

    line-height: 1;

}


.mdn-logo__name {

    color: var(--mdn-white);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 31px;

    font-weight: 800;

    letter-spacing: .055em;

}


.mdn-logo__company {

    margin-top: 7px;

    color: var(--mdn-red-soft);

    font-size: 14px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .07em;

    white-space: nowrap;

}


/* ============================================================
   DESKTOP MENU
============================================================ */

.mdn-desktop-menu {

    margin-left: auto;

    align-self: stretch;

    display: flex;

    align-items: stretch;

}


.mdn-desktop-menu > ul {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    align-items: stretch;

    gap: 2px;

}


.mdn-desktop-menu > ul > li {

    position: static;

    display: flex;

    align-items: stretch;

}


/* ============================================================
   DESKTOP MENU LINK
============================================================ */

.mdn-menu-link {

    min-height: 100px;

    padding:
        0 15px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border: 0;

    background: transparent;

    color: var(--mdn-gray-100);

    cursor: pointer;

    font-size: 14px;

    font-weight: 700;

    white-space: nowrap;

    transition:
        color var(--mdn-transition),
        background var(--mdn-transition);

}


/* hover background */

.mdn-menu-link::before {

    content: "";

    position: absolute;

    inset:
        17px 5px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            rgba(255,24,52,.07),
            rgba(36,120,255,.04)
        );

    opacity: 0;

    transform:
        scale(.94);

    transition:
        opacity var(--mdn-transition),
        transform var(--mdn-transition);

}


/* bottom red line */

.mdn-menu-link::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: 18px;

    width: 0;

    height: 2px;

    transform:
        translateX(-50%);

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--mdn-red-bright),
            transparent
        );

    box-shadow:
        0 0 12px rgba(255,24,52,.62);

    transition:
        width var(--mdn-transition);

}


.mdn-menu-link:hover,
.mdn-menu-link.active {

    color: var(--mdn-white);

}


.mdn-menu-link:hover::before,
.mdn-menu-link.active::before {

    opacity: 1;

    transform:
        scale(1);

}


.mdn-menu-link:hover::after,
.mdn-menu-link.active::after {

    width: 56%;

}


.mdn-menu-link i {

    position: relative;

    z-index: 2;

    color: var(--mdn-red-soft);

    font-size: 14px;

    transition:
        transform var(--mdn-transition),
        color var(--mdn-transition);

}


.mdn-menu-link:hover i {

    color: var(--mdn-red-bright);

}


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

.mdn-has-megamenu:hover
.mdn-menu-services i,
.mdn-has-megamenu:focus-within
.mdn-menu-services i {

    transform:
        rotate(180deg);

}


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

.mdn-megamenu {

    position: absolute;

    top: 100%;

    left: 50%;

    width:
        min(
            1400px,
            calc(100% - 52px)
        );

    transform:
        translate3d(-50%, 18px, 0);

    border:
        1px solid rgba(255,24,52,.20);

    border-top:
        2px solid rgba(255,24,52,.82);

    border-radius:
        0 0 24px 24px;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 90% 0%,
            rgba(255,24,52,.13),
            transparent 28%
        ),

        radial-gradient(
            circle at 0% 100%,
            rgba(36,120,255,.13),
            transparent 28%
        ),

        linear-gradient(
            145deg,
            #020916 0%,
            #041228 52%,
            #061a38 100%
        );

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    box-shadow:
        0 36px 90px rgba(0,4,20,.60);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .35s cubic-bezier(.22,.8,.22,1);

}


/* ============================================================
   HOVER BRIDGE
   Evita que el mega menú desaparezca rápidamente
============================================================ */

.mdn-megamenu::before {

    content: "";

    position: absolute;

    top: -32px;

    left: 0;

    width: 100%;

    height: 32px;

}


/* ============================================================
   MEGA MENU TEXTURE
============================================================ */

.mdn-megamenu::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .18;

    background-image:

        linear-gradient(
            90deg,
            rgba(255,255,255,.026) 1px,
            transparent 1px
        ),

        linear-gradient(
            rgba(255,255,255,.020) 1px,
            transparent 1px
        );

    background-size:
        34px 34px;

}


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

.mdn-has-megamenu:hover
.mdn-megamenu,
.mdn-has-megamenu:focus-within
.mdn-megamenu {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translate3d(-50%, 0, 0);

}


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

.mdn-megamenu__inner {

    position: relative;

    z-index: 3;

    padding: 38px;

    display: grid;

    grid-template-columns:
        1.20fr
        1fr
        1fr
        1fr;

    gap: 28px;

}


/* ============================================================
   MEGA INTRO
============================================================ */

.mdn-megamenu__intro {

    min-height: 100%;

    position: relative;

    overflow: hidden;

    padding: 30px;

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

    border-radius: 18px;

    background:

        radial-gradient(
            circle at 95% 5%,
            rgba(255,24,52,.20),
            transparent 38%
        ),

        radial-gradient(
            circle at 10% 100%,
            rgba(36,120,255,.12),
            transparent 38%
        ),

        linear-gradient(
            145deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.018)
        );

}


/* diagonal accent */

.mdn-megamenu__intro::after {

    content: "";

    position: absolute;

    width: 130px;
    height: 260px;

    right: -85px;
    bottom: -90px;

    transform:
        rotate(35deg);

    background:
        linear-gradient(
            to bottom,
            rgba(255,24,52,.12),
            transparent
        );

    pointer-events: none;

}


/* ============================================================
   EYEBROW
============================================================ */

.mdn-eyebrow {

    display: block;

    margin-bottom: 13px;

    color: var(--mdn-red-soft);

    font-size: 14px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .10em;

}


/* ============================================================
   MEGA INTRO TITLE
============================================================ */

.mdn-megamenu__intro h3 {

    margin:
        0 0 16px;

    color: var(--mdn-white);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(27px, 2vw, 36px);

    font-weight: 700;

    line-height: 1.12;

}


.mdn-megamenu__intro h3 span {

    color: var(--mdn-red-soft);

}


/* ============================================================
   MEGA INTRO TEXT
============================================================ */

.mdn-megamenu__intro p {

    margin:
        0 0 24px;

    color: var(--mdn-gray-300);

    font-size: 14px;

    line-height: 1.75;

}


/* ============================================================
   VIEW ALL SERVICES
============================================================ */

.mdn-mega-view-all {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    color: var(--mdn-white);

    font-size: 14px;

    font-weight: 800;

    transition:
        color var(--mdn-transition);

}


.mdn-mega-view-all i {

    width: 32px;
    height: 32px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    color: var(--mdn-white);

    background:
        var(--mdn-gradient-red);

    font-size: 14px;

    transition:
        transform var(--mdn-transition);

}


.mdn-mega-view-all:hover {

    color: var(--mdn-red-soft);

}


.mdn-mega-view-all:hover i {

    transform:
        translateX(4px);

}


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

.mdn-megamenu__column {

    display: flex;

    flex-direction: column;

    gap: 7px;

}


/* ============================================================
   MEGA COLUMN TITLE
============================================================ */

.mdn-megamenu__title {

    display: block;

    margin-bottom: 5px;

    padding:
        5px 7px 14px;

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

    color: var(--mdn-blue-soft);

    font-size: 14px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .08em;

}


/* ============================================================
   MEGA SERVICE LINKS
============================================================ */

.mdn-megamenu__column > a {

    min-height: 82px;

    padding:
        11px;

    display: flex;

    align-items: center;

    gap: 13px;

    color: var(--mdn-white);

    border:
        1px solid transparent;

    border-radius: 14px;

    background:
        transparent;

    transition:
        background var(--mdn-transition),
        border-color var(--mdn-transition),
        transform var(--mdn-transition);

}


.mdn-megamenu__column > a:hover {

    transform:
        translateX(5px);

    border-color:
        rgba(255,24,52,.28);

    background:

        linear-gradient(
            90deg,
            rgba(255,24,52,.10),
            rgba(36,120,255,.055)
        );

}


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

.mdn-service-icon {

    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    color: var(--mdn-red-bright);

    border:
        1px solid rgba(255,24,52,.26);

    background:

        linear-gradient(
            145deg,
            rgba(255,24,52,.12),
            rgba(36,120,255,.05)
        );

    box-shadow:
        inset 0 0 18px rgba(255,24,52,.04);

    font-size: 16px;

    transition:
        background var(--mdn-transition),
        color var(--mdn-transition),
        transform var(--mdn-transition);

}


.mdn-megamenu__column > a:hover
.mdn-service-icon {

    color: var(--mdn-white);

    background:
        var(--mdn-gradient-red);

    transform:
        scale(1.04);

}


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

.mdn-megamenu__column strong {

    display: block;

    margin-bottom: 4px;

    color: var(--mdn-white-soft);

    font-size: 14px;

    font-weight: 700;

}


.mdn-megamenu__column small {

    display: block;

    color: var(--mdn-gray-500);

    font-size: 14px;

    line-height: 1.4;

}


/* ============================================================
   MEGA MENU FOOTER
============================================================ */

.mdn-megamenu__footer {

    min-height: 68px;

    padding:
        0 38px;

    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

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

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

}


/* ============================================================
   MEGA FOOTER LEFT
============================================================ */

.mdn-megamenu__footer > div {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--mdn-gray-300);

    font-size: 14px;

}


.mdn-megamenu__footer > div i {

    color: var(--mdn-blue-bright);

    font-size: 15px;

}


/* ============================================================
   MEGA FOOTER PHONE
============================================================ */

.mdn-megamenu__footer > a {

    display: flex;

    align-items: center;

    gap: 14px;

    color: var(--mdn-gray-300);

    font-size: 14px;

}


.mdn-megamenu__footer strong {

    color: var(--mdn-red-soft);

    font-size: 16px;

    font-weight: 800;

}


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

.mdn-nav-actions {

    display: flex;

    align-items: center;

    gap: 12px;

}


/* ============================================================
   CALL BUTTON
============================================================ */

.mdn-call-button {

    min-height: 54px;

    padding:
        8px 12px;

    display: flex;

    align-items: center;

    gap: 11px;

    color: var(--mdn-white);

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

    border-radius: 13px;

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

    transition:
        background var(--mdn-transition),
        border-color var(--mdn-transition),
        transform var(--mdn-transition);

}


.mdn-call-button:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(36,120,255,.30);

    background:
        rgba(36,120,255,.08);

}


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

.mdn-call-button__icon {

    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    color: var(--mdn-white);

    background:
        var(--mdn-gradient-blue);

    box-shadow:
        0 8px 20px rgba(36,120,255,.22);

    font-size: 14px;

}


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

.mdn-call-button__text {

    display: flex;

    flex-direction: column;

}


.mdn-call-button__text small {

    color: var(--mdn-gray-500);

    font-size: 14px;

    font-weight: 500;

}


.mdn-call-button__text strong {

    margin-top: 1px;

    color: var(--mdn-white);

    font-size: 14px;

    font-weight: 800;

    white-space: nowrap;

}


/* ============================================================
   PRIMARY CTA
============================================================ */

.mdn-primary-button {

    min-height: 54px;

    padding:
        0 22px;

    position: relative;

    overflow: hidden;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

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

    border-radius: 13px;

    color: var(--mdn-white);

    background:
        var(--mdn-gradient-red);

    box-shadow:
        var(--mdn-shadow-red);

    font-size: 14px;

    font-weight: 800;

    transition:
        transform var(--mdn-transition),
        box-shadow var(--mdn-transition);

}


/* shine */

.mdn-primary-button::before {

    content: "";

    position: absolute;

    top: -50%;

    left: -55px;

    width: 32px;
    height: 200%;

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

    filter:
        blur(1px);

    transform:
        rotate(24deg);

    transition:
        left .65s ease;

}


.mdn-primary-button:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 19px 44px rgba(255,24,52,.34);

}


.mdn-primary-button:hover::before {

    left: 130%;

}


.mdn-primary-button span,
.mdn-primary-button i {

    position: relative;

    z-index: 2;

}


/* ============================================================
   MOBILE TOGGLE / HAMBURGER
============================================================ */

.mdn-mobile-toggle {

    width: 50px;
    height: 50px;

    padding: 0;

    display: none;

    position: relative;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

    border:
        1px solid rgba(255,24,52,.26);

    border-radius: 13px;

    background:

        linear-gradient(
            145deg,
            rgba(255,24,52,.10),
            rgba(36,120,255,.05)
        );

    box-shadow:
        inset 0 0 18px rgba(255,24,52,.03);

    cursor: pointer;

    transition:
        background var(--mdn-transition),
        border-color var(--mdn-transition);

}


.mdn-mobile-toggle:hover {

    border-color:
        rgba(255,24,52,.48);

    background:
        rgba(255,24,52,.13);

}


.mdn-mobile-toggle span {

    width: 22px;
    height: 2px;

    display: block;

    border-radius: 10px;

    background: var(--mdn-white);

    transition:
        width var(--mdn-transition),
        transform var(--mdn-transition);

}


.mdn-mobile-toggle span:nth-child(2) {

    width: 15px;

    margin-left: 7px;

    background:
        var(--mdn-red-bright);

}


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

.mdn-mobile-overlay {

    position: fixed;

    inset: 0;

    z-index: 9997;

    background:
        rgba(0,5,18,.76);

    backdrop-filter:
        blur(8px);

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

    opacity: 0;

    visibility: hidden;

    transition:
        opacity .35s ease,
        visibility .35s ease;

}


.mdn-mobile-overlay.active {

    opacity: 1;

    visibility: visible;

}


/* ============================================================
   MOBILE OFF CANVAS
============================================================ */

.mdn-mobile-menu {

    width:
        min(
            440px,
            92vw
        );

    height: 100dvh;

    position: fixed;

    top: 0;
    right: 0;

    z-index: 9998;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    color: var(--mdn-white);

    border-left:
        1px solid rgba(255,24,52,.28);

    background:

        radial-gradient(
            circle at 110% -5%,
            rgba(255,24,52,.24),
            transparent 33%
        ),

        radial-gradient(
            circle at -5% 105%,
            rgba(36,120,255,.18),
            transparent 32%
        ),

        linear-gradient(
            150deg,
            #020916,
            #041329 52%,
            #061a38
        );

    box-shadow:
        -30px 0 80px rgba(0,5,18,.55);

    transform:
        translateX(103%);

    transition:
        transform .48s cubic-bezier(.22,.84,.22,1);

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

    font-size: 14px;

}


.mdn-mobile-menu.active {

    transform:
        translateX(0);

}


/* ============================================================
   OFF CANVAS GLOW
============================================================ */

.mdn-mobile-menu::before {

    content: "";

    position: absolute;

    width: 290px;
    height: 290px;

    top: -125px;
    right: -100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,24,52,.24),
            transparent 67%
        );

    filter:
        blur(8px);

    pointer-events: none;

}


/* ============================================================
   OFF CANVAS RED LINE
============================================================ */

.mdn-mobile-menu::after {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 2px;
    height: 45%;

    background:
        linear-gradient(
            to bottom,
            var(--mdn-red-bright),
            rgba(255,24,52,.30),
            transparent
        );

    box-shadow:
        0 0 14px rgba(255,24,52,.55);

}


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

.mdn-mobile-menu__texture {

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .19;

    background-image:

        linear-gradient(
            90deg,
            rgba(255,255,255,.03) 1px,
            transparent 1px
        ),

        linear-gradient(
            rgba(255,255,255,.02) 1px,
            transparent 1px
        );

    background-size:
        34px 34px;

}


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

.mdn-mobile-menu__header {

    min-height: 96px;

    padding:
        17px 22px;

    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

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

}


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

.mdn-mobile-logo {

    display: flex;

    align-items: center;

    gap: 12px;

    color: var(--mdn-white);

}


.mdn-mobile-logo img {

    width: 62px;
    height: 54px;

    object-fit: contain;

}


.mdn-mobile-logo span {

    color: var(--mdn-red-soft);

    font-size: 14px;

    font-weight: 700;

    line-height: 1.35;

    text-transform: uppercase;

    letter-spacing: .05em;

}


.mdn-mobile-logo strong {

    display: block;

    color: var(--mdn-white);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 24px;

    font-weight: 800;

    letter-spacing: .06em;

}


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

.mdn-mobile-close {

    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    border-radius: 12px;

    color: var(--mdn-white);

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

    cursor: pointer;

    font-size: 17px;

    transition:
        background var(--mdn-transition),
        color var(--mdn-transition),
        transform var(--mdn-transition);

}


.mdn-mobile-close:hover {

    color: var(--mdn-white);

    background:
        var(--mdn-gradient-red);

    transform:
        rotate(90deg);

}


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

.mdn-mobile-menu__content {

    flex: 1;

    position: relative;

    z-index: 3;

    overflow-y: auto;

    overflow-x: hidden;

    padding:
        20px 22px 32px;

}


/* scrollbar */

.mdn-mobile-menu__content::-webkit-scrollbar {

    width: 5px;

}


.mdn-mobile-menu__content::-webkit-scrollbar-track {

    background:
        transparent;

}


.mdn-mobile-menu__content::-webkit-scrollbar-thumb {

    border-radius: 10px;

    background:
        rgba(255,24,52,.45);

}


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

.mdn-mobile-nav {

    display: flex;

    flex-direction: column;

}


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

.mdn-mobile-nav > a,
.mdn-mobile-accordion__button {

    width: 100%;

    min-height: 62px;

    padding:
        0 7px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border: 0;

    border-bottom:
        1px solid rgba(255,255,255,.075);

    background:
        transparent;

    color: var(--mdn-gray-100);

    cursor: pointer;

    text-align: left;

    font-size: 14px;

    font-weight: 700;

    transition:
        color var(--mdn-transition),
        padding var(--mdn-transition);

}


.mdn-mobile-nav > a:hover {

    color: var(--mdn-white);

    padding-left: 13px;

}


/* ============================================================
   MOBILE LINK LEFT CONTENT
============================================================ */

.mdn-mobile-nav > a > span,
.mdn-mobile-accordion__button > span {

    display: flex;

    align-items: center;

    gap: 13px;

}


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

.mdn-mobile-nav > a > span i,
.mdn-mobile-accordion__button > span i {

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    color: var(--mdn-red-bright);

    background:
        rgba(255,24,52,.08);

    border:
        1px solid rgba(255,24,52,.16);

    font-size: 14px;

}


/* right arrow */

.mdn-mobile-nav > a > i {

    color: var(--mdn-gray-600);

    font-size: 14px;

    transition:
        transform var(--mdn-transition),
        color var(--mdn-transition);

}


.mdn-mobile-nav > a:hover > i {

    transform:
        translateX(4px);

    color: var(--mdn-red-bright);

}


/* active mobile item */

.mdn-mobile-nav > a.active {

    color: var(--mdn-white);

}


.mdn-mobile-nav > a.active > span i {

    color: var(--mdn-white);

    background:
        var(--mdn-gradient-red);

}


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

.mdn-mobile-accordion__button > i {

    width: 30px;
    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    color: var(--mdn-red-bright);

    background:
        rgba(255,24,52,.09);

    border:
        1px solid rgba(255,24,52,.16);

    font-size: 14px;

    transition:
        transform var(--mdn-transition),
        background var(--mdn-transition),
        color var(--mdn-transition);

}


.mdn-mobile-accordion.active
.mdn-mobile-accordion__button {

    color: var(--mdn-white);

}


.mdn-mobile-accordion.active
.mdn-mobile-accordion__button > i {

    transform:
        rotate(45deg);

    color: var(--mdn-white);

    background:
        var(--mdn-gradient-red);

}


/* ============================================================
   MOBILE ACCORDION PANEL
============================================================ */

.mdn-mobile-accordion__panel {

    max-height: 0;

    padding:
        0 6px 0 46px;

    overflow: hidden;

    opacity: 0;

    transition:
        max-height .48s ease,
        opacity .35s ease,
        padding .35s ease;

}


.mdn-mobile-accordion.active
.mdn-mobile-accordion__panel {

    max-height: 760px;

    padding-top: 10px;

    padding-bottom: 16px;

    opacity: 1;

}


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

.mdn-mobile-accordion__panel > a {

    min-height: 44px;

    display: flex;

    align-items: center;

    gap: 9px;

    color: var(--mdn-gray-300);

    border-bottom:
        1px dashed rgba(255,255,255,.06);

    font-size: 14px;

    font-weight: 600;

    transition:
        color var(--mdn-transition),
        padding var(--mdn-transition);

}


.mdn-mobile-accordion__panel > a::before {

    content: "";

    width: 5px;
    height: 5px;

    flex: 0 0 5px;

    border-radius: 50%;

    background:
        var(--mdn-red-bright);

    box-shadow:
        0 0 8px rgba(255,24,52,.70);

}


.mdn-mobile-accordion__panel > a:hover {

    padding-left: 5px;

    color: var(--mdn-white);

}


/* ============================================================
   ALL SERVICES MOBILE
============================================================ */

.mdn-mobile-all-services {

    margin-top: 5px;

    color:
        var(--mdn-red-soft) !important;

    font-weight:
        800 !important;

}


.mdn-mobile-all-services::before {

    display: none;

}


/* ============================================================
   MOBILE CONTACT CARD
============================================================ */

.mdn-mobile-contact {

    margin-top: 27px;

    padding: 25px;

    position: relative;

    overflow: hidden;

    border:
        1px solid rgba(255,24,52,.20);

    border-radius: 19px;

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(255,24,52,.20),
            transparent 38%
        ),

        radial-gradient(
            circle at 0% 100%,
            rgba(36,120,255,.12),
            transparent 40%
        ),

        rgba(255,255,255,.035);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04);

}


/* decorative line */

.mdn-mobile-contact::before {

    content: "";

    position: absolute;

    top: 0;
    left: 24px;

    width: 90px;
    height: 2px;

    background:
        var(--mdn-gradient-red);

    box-shadow:
        0 0 12px rgba(255,24,52,.55);

}


/* ============================================================
   MOBILE CONTACT EYEBROW
============================================================ */

.mdn-mobile-contact__eyebrow {

    display: block;

    margin-bottom: 9px;

    color: var(--mdn-red-soft);

    font-size: 14px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .08em;

}


/* ============================================================
   MOBILE CONTACT TITLE
============================================================ */

.mdn-mobile-contact h3 {

    margin:
        0 0 21px;

    color: var(--mdn-white);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 24px;

    line-height: 1.2;

}


/* ============================================================
   MOBILE PHONE CARD
============================================================ */

.mdn-mobile-contact__phone {

    padding: 13px;

    display: flex;

    align-items: center;

    gap: 12px;

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

    border-radius: 13px;

    color: var(--mdn-white);

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

    transition:
        border-color var(--mdn-transition),
        background var(--mdn-transition);

}


.mdn-mobile-contact__phone:hover {

    border-color:
        rgba(255,24,52,.25);

    background:
        rgba(255,24,52,.055);

}


/* ============================================================
   MOBILE PHONE ICON
============================================================ */

.mdn-mobile-contact__phone > span {

    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    color: var(--mdn-white);

    background:
        var(--mdn-gradient-red);

    box-shadow:
        0 10px 26px rgba(255,24,52,.24);

    font-size: 14px;

}


/* ============================================================
   MOBILE PHONE TEXT
============================================================ */

.mdn-mobile-contact__phone small {

    display: block;

    color: var(--mdn-gray-500);

    font-size: 14px;

    font-weight: 600;

}


.mdn-mobile-contact__phone strong {

    display: block;

    margin-top: 2px;

    color: var(--mdn-white);

    font-size: 17px;

    font-weight: 800;

}


/* ============================================================
   MOBILE EMAIL + HOURS
============================================================ */

.mdn-mobile-contact__email,
.mdn-mobile-contact__hours {

    margin-top: 14px;

    display: flex;

    align-items: flex-start;

    gap: 11px;

    color: var(--mdn-gray-300);

    font-size: 14px;

    line-height: 1.55;

    word-break: break-word;

}


.mdn-mobile-contact__email i,
.mdn-mobile-contact__hours i {

    width: 25px;

    padding-top: 3px;

    color: var(--mdn-blue-soft);

    font-size: 14px;

}


.mdn-mobile-contact__hours strong {

    color: var(--mdn-white-soft);

}


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

.mdn-mobile-estimate {

    width: 100%;

    min-height: 54px;

    margin-top: 23px;

    padding:
        0 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

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

    border-radius: 12px;

    color: var(--mdn-white);

    background:
        var(--mdn-gradient-red);

    box-shadow:
        0 13px 32px rgba(255,24,52,.20);

    font-size: 14px;

    font-weight: 800;

    transition:
        transform var(--mdn-transition),
        box-shadow var(--mdn-transition);

}


.mdn-mobile-estimate:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 18px 38px rgba(255,24,52,.29);

}


/* ============================================================
   BODY LOCK
============================================================ */

body.mdn-menu-open {

    overflow: hidden;

}


/* ============================================================
   LARGE DESKTOP
============================================================ */

@media (min-width: 1600px) {

    .mdn-navigation__inner {

        min-height: 104px;

    }


    .mdn-menu-link {

        min-height: 104px;

    }

}


/* ============================================================
   LAPTOP
============================================================ */

@media (max-width: 1380px) {

    .mdn-container {

        width:
            calc(100% - 44px);

    }


    .mdn-navigation__inner {

        gap: 20px;

    }


    .mdn-menu-link {

        padding:
            0 11px;

    }


    .mdn-logo__company {

        display: none;

    }


    .mdn-megamenu__inner {

        padding: 30px;

        gap: 20px;

    }


    .mdn-megamenu__intro {

        padding: 24px;

    }

}


/* ============================================================
   MEDIUM LAPTOP
============================================================ */

@media (max-width: 1220px) {

    .mdn-call-button {

        display: none;

    }


    .mdn-primary-button {

        padding:
            0 17px;

    }


    .mdn-logo__image {

width: 229px;

height: 82px;

}


    .mdn-megamenu {

        width:
            calc(100% - 34px);

    }

}


/* ============================================================
   TABLET / SWITCH TO MOBILE
============================================================ */

@media (max-width: 1050px) {

    .mdn-topbar__left {

        display: none;

    }


    .mdn-topbar__inner {

        justify-content: flex-end;

    }


    .mdn-desktop-menu,
    .mdn-nav-actions {

        display: none;

    }


    .mdn-mobile-toggle {

        display: flex;

        margin-left: auto;

    }


    .mdn-navigation__inner {

        min-height: 82px;

    }


    .mdn-logo__image {

width: 200px;

height: 70px;

}


    .mdn-logo__company {

        display: block;

    }


    .mdn-header.is-scrolled
    .mdn-navigation__inner {

        min-height: 72px;

    }


    .mdn-header.is-scrolled
    .mdn-menu-link {

        min-height: 72px;

    }

}


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

@media (max-width: 760px) {

    .mdn-container {

        width:
            calc(100% - 28px);

    }


    /* TOPBAR */

    .mdn-topbar {

        min-height: 46px;
        max-height: 46px;

    }


    .mdn-topbar__inner {

        min-height: 46px;

    }


    .mdn-header.is-scrolled .mdn-topbar {

        min-height: 0;
        max-height: 0;

    }


    .mdn-header.is-scrolled .mdn-topbar__inner {

        min-height: 0;

    }


    .mdn-topbar__right {

        width: 100%;

        justify-content: space-between;

        gap: 10px;

    }


    .mdn-topbar__link {

        max-width: 58%;

    }


    .mdn-topbar__link span:last-child {

        overflow: hidden;

        white-space: nowrap;

        text-overflow: ellipsis;

    }


    .mdn-topbar__icon {

        width: 30px;
        height: 30px;

        flex-basis: 30px;

    }


    .mdn-topbar__phone {

        min-height: 46px;

        padding:
            0 13px;

    }


    /* NAVIGATION */

    .mdn-navigation__inner {

        min-height: 76px;

    }


    .mdn-logo {

        gap: 9px;

    }


    .mdn-logo__image {

width: 200px;

height: 70px;

}


    .mdn-logo__name {

        font-size: 26px;

    }


    .mdn-logo__company {

        font-size: 14px;

        letter-spacing: .035em;

    }


    .mdn-mobile-toggle {

        width: 46px;
        height: 46px;

    }

}


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

@media (max-width: 560px) {

    .mdn-topbar__link {

        display: none;

    }


    .mdn-topbar__right {

        justify-content: flex-end;

    }


    .mdn-topbar__phone {

        margin-left: auto;

    }


    .mdn-logo__company {

        display: none;

    }


    .mdn-logo__image {

width: 172px;

height: 63px;

}


    .mdn-mobile-menu__header {

        padding:
            15px 18px;

    }


    .mdn-mobile-menu__content {

        padding:
            18px 18px 30px;

    }


    .mdn-mobile-contact {

        padding: 21px;

    }

}


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

@media (max-width: 420px) {

    .mdn-container {

        width:
            calc(100% - 22px);

    }


    .mdn-navigation__inner {

        min-height: 72px;

    }


    .mdn-logo__image {

width: 175px;

height: 80px;

}


    .mdn-mobile-toggle {

        width: 44px;
        height: 44px;

    }


    .mdn-mobile-menu {

        width: 94vw;

    }


    .mdn-mobile-menu__header {

        min-height: 86px;

    }


    .mdn-mobile-logo img {

        width: 56px;
        height: 49px;

    }


    .mdn-mobile-logo strong {

        font-size: 21px;

    }


    .mdn-mobile-contact h3 {

        font-size: 22px;

    }

}


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

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

    .mdn-header *,
    .mdn-mobile-menu *,
    .mdn-mobile-overlay {

        scroll-behavior: auto !important;

        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

    }

}


/* ============================================================
   KEYBOARD FOCUS
============================================================ */

.mdn-header a:focus-visible,
.mdn-header button:focus-visible,
.mdn-mobile-menu a:focus-visible,
.mdn-mobile-menu button:focus-visible {

    outline:
        2px solid var(--mdn-red-bright);

    outline-offset:
        3px;

}


/* ============================================================
   MDN GENERAL CONTRACTOR LLC
   PREMIUM SERVICE HERO
   NAVY + RED / 2030
============================================================ */


/* ============================================================
   VARIABLES
============================================================ */

:root {

    --mdnh-navy-1000: #01050d;
    --mdnh-navy-950: #020916;
    --mdnh-navy-900: #031127;
    --mdnh-navy-850: #061a38;
    --mdnh-navy-800: #08234b;

    --mdnh-blue: #2478ff;
    --mdnh-blue-soft: #5b9cff;

    --mdnh-red-dark: #a20718;
    --mdnh-red: #d80b20;
    --mdnh-red-bright: #ff1834;
    --mdnh-red-light: #ff5267;

    --mdnh-white: #ffffff;
    --mdnh-soft: #eef3f9;
    --mdnh-gray: #aeb9c8;

    --mdnh-container: 1480px;

    --mdnh-transition:
        .55s cubic-bezier(.22,.8,.22,1);

}


/* ============================================================
   RESET
============================================================ */

.mdn-premium-hero,
.mdn-premium-hero * {

    box-sizing: border-box;

}


.mdn-premium-hero {

    width: 100%;

    min-height: 790px;

    position: relative;

    overflow: hidden;

    background:
        var(--mdnh-navy-950);

    color:
        var(--mdnh-white);

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

    font-size: 14px;

}


/* ============================================================
   STAGE
============================================================ */

.mdn-premium-hero__stage {

    min-height: 790px;

    position: relative;

}


/* ============================================================
   SLIDE
============================================================ */

.mdn-premium-slide {

    position: absolute;

    inset: 0;

    min-height: 790px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    overflow: hidden;

    transition:
        opacity .9s ease,
        visibility .9s ease;

}


.mdn-premium-slide.is-active {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}


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

.mdn-premium-slide__image {

    width: 100%;
    height: 100%;

    position: absolute;

    inset: 0;

    object-fit: cover;

    object-position: center;

    transform:
        scale(1.08);

    filter:
        saturate(1.08)
        contrast(1.03);

    transition:
        transform 8s ease;

}


.mdn-premium-slide.is-active
.mdn-premium-slide__image {

    transform:
        scale(1);

}


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

.mdn-premium-slide__shade {

    position: absolute;

    inset: 0;

    z-index: 2;

    background:

        linear-gradient(
            90deg,
            rgba(1,5,13,.98) 0%,
            rgba(2,9,22,.94) 24%,
            rgba(3,17,39,.79) 47%,
            rgba(3,17,39,.40) 71%,
            rgba(1,5,13,.23) 100%
        ),

        linear-gradient(
            0deg,
            rgba(1,5,13,.88) 0%,
            rgba(1,5,13,.16) 45%,
            rgba(1,5,13,.13) 100%
        );

}


/* ============================================================
   TEXTURE
============================================================ */

.mdn-premium-slide__texture {

    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    opacity: .28;

    background-image:

        linear-gradient(
            rgba(255,255,255,.024) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.024) 1px,
            transparent 1px
        );

    background-size:
        55px 55px;

}


/* ============================================================
   RED LIGHT
============================================================ */

.mdn-premium-slide__red-glow {

    position: absolute;

    z-index: 4;

    width: 600px;
    height: 600px;

    top: -340px;
    right: -190px;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(255,24,52,.40),
            rgba(255,24,52,.08) 38%,
            transparent 68%
        );

    filter:
        blur(16px);

}


/* ============================================================
   BLUE LIGHT
============================================================ */

.mdn-premium-slide__blue-glow {

    position: absolute;

    z-index: 4;

    width: 560px;
    height: 560px;

    left: -300px;
    bottom: -330px;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(36,120,255,.28),
            transparent 68%
        );

    filter:
        blur(22px);

}


/* ============================================================
   ARCHITECTURAL RED LINE
============================================================ */

.mdn-premium-hero::before {

    content: "";

    width: 2px;
    height: 940px;

    position: absolute;

    z-index: 7;

    top: -265px;
    right: 22%;

    transform:
        rotate(28deg);

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,24,52,.78),
            transparent
        );

    box-shadow:
        0 0 20px rgba(255,24,52,.22);

}


/* ============================================================
   SECOND ARCHITECTURAL LINE
============================================================ */

.mdn-premium-hero::after {

    content: "";

    width: 1px;
    height: 940px;

    position: absolute;

    z-index: 7;

    top: -260px;
    right: 24%;

    transform:
        rotate(28deg);

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(36,120,255,.48),
            transparent
        );

}


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

.mdn-premium-hero__container {

    width:
        min(
            var(--mdnh-container),
            calc(100% - 70px)
        );

    min-height: 790px;

    margin: 0 auto;

    position: relative;

    z-index: 10;

    display: flex;

    align-items: center;

}


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

.mdn-premium-slide__content {

    width:
        min(
            820px,
            65%
        );

    padding:
        60px 0 170px;

    position: relative;

}


/* ============================================================
   CATEGORY
============================================================ */

.mdn-premium-slide__category {

    min-height: 44px;

    width: fit-content;

    margin-bottom: 25px;

    padding:
        5px 17px 5px 6px;

    display: inline-flex;

    align-items: center;

    gap: 11px;

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

    border-radius: 50px;

    background:
        rgba(3,17,39,.52);

    backdrop-filter:
        blur(15px);

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

    color:
        #f5f7fb;

    font-size: 14px;

    font-weight: 700;

}


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

.mdn-premium-slide__category-icon {

    width: 32px;
    height: 32px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 32px;

    border-radius: 50%;

    color: white;

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #ff1834 45%,
            #b4071a
        );

    box-shadow:
        0 8px 22px rgba(255,24,52,.32);

}


/* ============================================================
   INDEX
============================================================ */

.mdn-premium-slide__index {

    margin-bottom: 11px;

    display: flex;

    align-items: baseline;

    gap: 9px;

}


.mdn-premium-slide__index span {

    color:
        var(--mdnh-red-bright);

    font-size: 20px;

    font-weight: 800;

}


.mdn-premium-slide__index strong {

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

    font-size: 14px;

    font-weight: 700;

}


.mdn-premium-slide__index strong::before {

    content: "/";

    margin-right: 8px;

}


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

.mdn-premium-slide__title {

    max-width: 830px;

    margin:
        0 0 26px;

    color: white;

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

    font-size:
        clamp(
            52px,
            5.4vw,
            86px
        );

    font-weight: 800;

    line-height: .96;

    letter-spacing:
        -.055em;

}


.mdn-premium-slide__title span {

    display: block;

    margin-top: 7px;

    color:
        var(--mdnh-red-bright);

    text-shadow:
        0 0 38px rgba(255,24,52,.21);

}


.mdn-premium-slide__title em {

    display: block;

    margin-top: 9px;

    color:
        #d7dfeb;

    font-style: normal;

    font-weight: 500;

}


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

.mdn-premium-slide__description {

    max-width: 680px;

    margin:
        0 0 30px;

    padding-left: 20px;

    position: relative;

    color:
        #c6d0dd;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.8;

}


/* Red side line */

.mdn-premium-slide__description::before {

    content: "";

    width: 3px;

    position: absolute;

    left: 0;
    top: 4px;
    bottom: 4px;

    border-radius: 20px;

    background:
        linear-gradient(
            to bottom,
            #ff5267,
            #ff1834,
            rgba(255,24,52,.12)
        );

    box-shadow:
        0 0 11px rgba(255,24,52,.30);

}


/* ============================================================
   ACTIONS
============================================================ */

.mdn-premium-slide__actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

}


/* ============================================================
   BUTTONS
============================================================ */

.mdn-premium-btn {

    min-height: 58px;

    padding:
        0 22px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    border-radius: 13px;

    position: relative;

    overflow: hidden;

    text-decoration: none;

    font-size: 14px;

    font-weight: 800;

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;

}


/* ============================================================
   PRIMARY RED
============================================================ */

.mdn-premium-btn--red {

    color: white;

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

    background:
        linear-gradient(
            135deg,
            #ff5267 0%,
            #ff1834 38%,
            #d80b20 68%,
            #a20718 100%
        );

    box-shadow:
        0 18px 42px rgba(255,24,52,.27);

}


/* Shine */

.mdn-premium-btn--red::before {

    content: "";

    width: 32px;
    height: 180%;

    position: absolute;

    left: -70px;
    top: -40%;

    transform:
        rotate(25deg);

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

    transition:
        left .65s ease;

}


.mdn-premium-btn--red:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 23px 50px rgba(255,24,52,.36);

}


.mdn-premium-btn--red:hover::before {

    left: 130%;

}


.mdn-premium-btn--red > * {

    position: relative;

    z-index: 2;

}


/* ============================================================
   GLASS BUTTON
============================================================ */

.mdn-premium-btn--glass {

    color:
        white;

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

    background:
        rgba(3,17,39,.48);

    backdrop-filter:
        blur(14px);

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

}


.mdn-premium-btn--glass:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(36,120,255,.42);

    background:
        rgba(8,35,75,.64);

}


/* ============================================================
   RELATED SERVICES
============================================================ */

.mdn-premium-slide__related {

    margin-top: 30px;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;

}


.mdn-premium-slide__related span {

    min-height: 38px;

    padding:
        0 13px;

    display: inline-flex;

    align-items: center;

    gap: 8px;

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

    border-radius: 30px;

    color:
        #dce3ec;

    background:
        rgba(2,9,22,.36);

    backdrop-filter:
        blur(10px);

    font-size: 14px;

    font-weight: 600;

}


.mdn-premium-slide__related i {

    color:
        var(--mdnh-red-bright);

    font-size: 14px;

}


/* ============================================================
   SLIDE CONTENT ANIMATION
============================================================ */

.mdn-premium-slide__category,
.mdn-premium-slide__index,
.mdn-premium-slide__title,
.mdn-premium-slide__description,
.mdn-premium-slide__actions,
.mdn-premium-slide__related {

    opacity: 0;

    transform:
        translateY(25px);

}


.mdn-premium-slide.is-active
.mdn-premium-slide__category {

    animation:
        mdnPremiumIn .7s .12s forwards;

}


.mdn-premium-slide.is-active
.mdn-premium-slide__index {

    animation:
        mdnPremiumIn .7s .20s forwards;

}


.mdn-premium-slide.is-active
.mdn-premium-slide__title {

    animation:
        mdnPremiumIn .75s .29s forwards;

}


.mdn-premium-slide.is-active
.mdn-premium-slide__description {

    animation:
        mdnPremiumIn .75s .40s forwards;

}


.mdn-premium-slide.is-active
.mdn-premium-slide__actions {

    animation:
        mdnPremiumIn .75s .50s forwards;

}


.mdn-premium-slide.is-active
.mdn-premium-slide__related {

    animation:
        mdnPremiumIn .75s .60s forwards;

}


@keyframes mdnPremiumIn {

    from {

        opacity: 0;

        transform:
            translateY(25px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* ============================================================
   RIGHT INFORMATION CARD
============================================================ */

.mdn-premium-info {

    width: 280px;

    padding: 22px;

    position: absolute;

    z-index: 15;

    right:
        max(
            38px,
            calc((100% - var(--mdnh-container)) / 2)
        );

    top: 50%;

    transform:
        translateY(-58%);

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

    border-radius: 18px;

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(255,24,52,.18),
            transparent 40%
        ),

        linear-gradient(
            145deg,
            rgba(3,17,39,.74),
            rgba(1,5,13,.62)
        );

    backdrop-filter:
        blur(18px);

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

    box-shadow:
        0 25px 70px rgba(0,5,20,.32);

}


/* ============================================================
   INFO TOP
============================================================ */

.mdn-premium-info__top {

    display: flex;

    align-items: center;

    gap: 14px;

}


.mdn-premium-info__top > span {

    width: 59px;
    height: 59px;

    flex:
        0 0 59px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #d80b20
        );

    box-shadow:
        0 12px 26px rgba(255,24,52,.24);

    font-size: 18px;

    font-weight: 800;

}


.mdn-premium-info__top div {

    display: flex;

    flex-direction: column;

}


.mdn-premium-info__top small {

    color:
        #98a6b8;

    font-size: 14px;

    font-weight: 600;

}


.mdn-premium-info__top strong {

    margin-top: 4px;

    color: white;

    font-size: 14px;

    font-weight: 800;

}


/* ============================================================
   INFO LINE
============================================================ */

.mdn-premium-info__line {

    width: 100%;
    height: 1px;

    margin:
        20px 0;

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

}


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

.mdn-premium-info__contact {

    display: flex;

    align-items: center;

    gap: 12px;

}


.mdn-premium-info__contact-icon {

    width: 42px;
    height: 42px;

    flex:
        0 0 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #2478ff,
            #1255b8
        );

}


.mdn-premium-info__contact div:last-child {

    display: flex;

    flex-direction: column;

}


.mdn-premium-info__contact small,
.mdn-premium-info__hours small {

    color:
        #98a6b8;

    font-size: 14px;

}


.mdn-premium-info__contact a {

    margin-top: 2px;

    color: white;

    text-decoration: none;

    font-size: 16px;

    font-weight: 800;

}


/* ============================================================
   HOURS
============================================================ */

.mdn-premium-info__hours {

    margin-top: 18px;

    display: flex;

    align-items: center;

    gap: 13px;

}


.mdn-premium-info__hours > i {

    width: 42px;
    height: 42px;

    flex:
        0 0 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid rgba(255,24,52,.18);

    border-radius: 11px;

    color:
        var(--mdnh-red-bright);

    background:
        rgba(255,24,52,.07);

}


.mdn-premium-info__hours div {

    display: flex;

    flex-direction: column;

}


.mdn-premium-info__hours strong {

    margin-top: 2px;

    color:
        #eef3f9;

    font-size: 14px;

}


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

.mdn-premium-arrow {

    width: 54px;
    height: 54px;

    position: absolute;

    z-index: 25;

    top: 50%;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

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

    border-radius: 50%;

    color:
        white;

    background:
        rgba(2,9,22,.48);

    backdrop-filter:
        blur(12px);

    cursor: pointer;

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease;

}


.mdn-premium-arrow:hover {

    border-color:
        rgba(255,24,52,.45);

    background:
        rgba(255,24,52,.82);

}


.mdn-premium-arrow--prev {

    left: 22px;

    transform:
        translateY(-50%);

}


.mdn-premium-arrow--prev:hover {

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

}


.mdn-premium-arrow--next {

    right: 22px;

    transform:
        translateY(-50%);

}


.mdn-premium-arrow--next:hover {

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

}


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

.mdn-premium-nav {

    width: 100%;

    position: absolute;

    left: 0;
    bottom: 0;

    z-index: 30;

    background:

        linear-gradient(
            90deg,
            rgba(1,5,13,.95),
            rgba(3,17,39,.91)
        );

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

    backdrop-filter:
        blur(18px);

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

}


/* ============================================================
   NAV INNER
============================================================ */

.mdn-premium-nav__inner {

    width:
        min(
            var(--mdnh-container),
            calc(100% - 70px)
        );

    min-height: 112px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(4,1fr)
        58px;

    align-items: stretch;

}


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

.mdn-premium-nav__item {

    min-width: 0;

    padding:
        12px 18px;

    display: grid;

    grid-template-columns:
        31px 65px 1fr;

    align-items: center;

    gap: 12px;

    position: relative;

    border: 0;

    border-right:
        1px solid rgba(255,255,255,.07);

    background:
        transparent;

    color:
        white;

    cursor: pointer;

    text-align: left;

    font-family: inherit;

    transition:
        background .3s ease;

}


.mdn-premium-nav__item::before {

    content: "";

    height: 3px;

    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    transform:
        scaleX(0);

    transform-origin:
        left;

    background:
        linear-gradient(
            90deg,
            #ff1834,
            #2478ff
        );

    transition:
        transform .45s ease;

}


.mdn-premium-nav__item:hover {

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

}


.mdn-premium-nav__item.is-active {

    background:

        linear-gradient(
            135deg,
            rgba(255,24,52,.10),
            rgba(36,120,255,.04)
        );

}


.mdn-premium-nav__item.is-active::before {

    transform:
        scaleX(1);

}


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

.mdn-premium-nav__number {

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

    font-size: 14px;

    font-weight: 800;

}


.mdn-premium-nav__item.is-active
.mdn-premium-nav__number {

    color:
        var(--mdnh-red-bright);

}


/* ============================================================
   THUMBNAIL
============================================================ */

.mdn-premium-nav__thumb {

    width: 65px;
    height: 65px;

    display: block;

    overflow: hidden;

    border-radius: 10px;

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

}


.mdn-premium-nav__thumb img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        saturate(.75);

    transition:
        transform .45s ease,
        filter .45s ease;

}


.mdn-premium-nav__item:hover
.mdn-premium-nav__thumb img,
.mdn-premium-nav__item.is-active
.mdn-premium-nav__thumb img {

    transform:
        scale(1.08);

    filter:
        saturate(1.15);

}


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

.mdn-premium-nav__text {

    min-width: 0;

    display: flex;

    flex-direction: column;

}


.mdn-premium-nav__text small {

    color:
        #748399;

    font-size: 14px;

    font-weight: 700;

}


.mdn-premium-nav__text strong {

    margin-top: 4px;

    overflow: hidden;

    color:
        #eef3f9;

    font-size: 14px;

    font-weight: 800;

    white-space: nowrap;

    text-overflow: ellipsis;

}


.mdn-premium-nav__item.is-active
.mdn-premium-nav__text strong {

    color: white;

}


/* ============================================================
   PLAY / PAUSE
============================================================ */

.mdn-premium-nav__play {

    width: 48px;
    height: 48px;

    margin: auto;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid rgba(255,24,52,.26);

    border-radius: 50%;

    color:
        white;

    background:
        rgba(255,24,52,.10);

    cursor: pointer;

    font-size: 14px;

    transition:
        background .3s ease,
        transform .3s ease;

}


.mdn-premium-nav__play:hover {

    transform:
        scale(1.06);

    background:
        var(--mdnh-red);

}


/* ============================================================
   PROGRESS BAR
============================================================ */

.mdn-premium-progress {

    width: 100%;
    height: 3px;

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

}


.mdn-premium-progress span {

    width: 0;
    height: 100%;

    display: block;

    background:
        linear-gradient(
            90deg,
            #2478ff,
            #ff1834
        );

    box-shadow:
        0 0 12px rgba(255,24,52,.55);

}


/* ============================================================
   LAPTOP
============================================================ */

@media (max-width: 1280px) {

    .mdn-premium-hero__container,
    .mdn-premium-nav__inner {

        width:
            calc(100% - 50px);

    }


    .mdn-premium-slide__content {

        width: 67%;

    }


    .mdn-premium-info {

        right: 30px;

        width: 250px;

    }


    .mdn-premium-nav__item {

        grid-template-columns:
            27px 54px 1fr;

        padding:
            12px;

    }


    .mdn-premium-nav__thumb {

        width: 54px;
        height: 54px;

    }

}


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

@media (max-width: 1050px) {

    .mdn-premium-info {

        display: none;

    }


    .mdn-premium-slide__content {

        width:
            min(
                800px,
                84%
            );

    }


    .mdn-premium-nav__inner {

        grid-template-columns:
            repeat(4,1fr)
            55px;

    }


    .mdn-premium-nav__thumb {

        display: none;

    }


    .mdn-premium-nav__item {

        grid-template-columns:
            30px 1fr;

    }


    .mdn-premium-arrow {

        top: 44%;

    }

}


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

@media (max-width: 760px) {

    .mdn-premium-hero,
    .mdn-premium-hero__stage,
    .mdn-premium-slide,
    .mdn-premium-hero__container {

        min-height: 780px;

    }


    .mdn-premium-hero__container {

        width:
            calc(100% - 32px);

        align-items: flex-start;

    }


    .mdn-premium-slide__content {

        width: 100%;

        padding:
            65px 0 185px;

    }


    .mdn-premium-slide__image {

        object-position:
            62% center;

    }


    .mdn-premium-slide__shade {

        background:

            linear-gradient(
                90deg,
                rgba(1,5,13,.94),
                rgba(3,17,39,.70)
            ),

            linear-gradient(
                0deg,
                rgba(1,5,13,.96) 0%,
                rgba(1,5,13,.44) 62%,
                rgba(1,5,13,.24) 100%
            );

    }


    .mdn-premium-slide__title {

        font-size:
            clamp(
                43px,
                12vw,
                64px
            );

        line-height: 1;

    }


    .mdn-premium-slide__description {

        max-width: 600px;

        font-size: 15px;

    }


    .mdn-premium-slide__actions {

        width: 100%;

        max-width: 390px;

        align-items: stretch;

        flex-direction: column;

    }


    .mdn-premium-btn {

        width: 100%;

    }


    /* hide side arrows */

    .mdn-premium-arrow {

        display: none;

    }


    /* Mobile bottom navigation */

    .mdn-premium-nav__inner {

        width:
            calc(100% - 24px);

        min-height: 100px;

        grid-template-columns:
            repeat(4,1fr)
            48px;

    }


    .mdn-premium-nav__item {

        min-height: 100px;

        padding:
            12px 5px;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 5px;

        text-align: center;

    }


    .mdn-premium-nav__number {

        font-size: 14px;

    }


    .mdn-premium-nav__text small {

        display: none;

    }


    .mdn-premium-nav__text strong {

        max-width: 75px;

        font-size: 14px;

        white-space: normal;

        line-height: 1.25;

        text-align: center;

    }


    .mdn-premium-nav__play {

        width: 42px;
        height: 42px;

    }

}


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

@media (max-width: 520px) {

    .mdn-premium-hero,
    .mdn-premium-hero__stage,
    .mdn-premium-slide,
    .mdn-premium-hero__container {

        min-height: 825px;

    }


    .mdn-premium-slide__content {

        padding-top: 48px;

    }


    .mdn-premium-slide__title {

        font-size:
            clamp(
                39px,
                11vw,
                52px
            );

    }


    .mdn-premium-slide__related {

        gap: 6px;

    }


    .mdn-premium-slide__related span {

        padding:
            0 11px;

    }


    .mdn-premium-nav__inner {

        width: 100%;

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

    }


    .mdn-premium-nav__play {

        position: absolute;

        right: 14px;
        top: -58px;

        background:
            rgba(2,9,22,.75);

        backdrop-filter:
            blur(10px);

    }


    .mdn-premium-nav__item {

        padding:
            11px 2px;

    }


    .mdn-premium-nav__text strong {

        font-size: 14px;

    }

}


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

@media (max-width: 390px) {

    .mdn-premium-hero,
    .mdn-premium-hero__stage,
    .mdn-premium-slide,
    .mdn-premium-hero__container {

        min-height: 860px;

    }


    .mdn-premium-hero__container {

        width:
            calc(100% - 24px);

    }


    .mdn-premium-slide__category {

        max-width: 100%;

    }


    .mdn-premium-slide__title {

        font-size: 38px;

    }


    .mdn-premium-slide__related span {

        min-height: 35px;

    }

}


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

.mdn-premium-hero a:focus-visible,
.mdn-premium-hero button:focus-visible {

    outline:
        2px solid var(--mdnh-red-bright);

    outline-offset:
        4px;

}


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

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

    .mdn-premium-hero *,
    .mdn-premium-hero *::before,
    .mdn-premium-hero *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

    }


    .mdn-premium-slide__image {

        transform:
            scale(1) !important;

    }

}

/* ============================================================
   MDN GENERAL CONTRACTOR LLC
   HOME — SECTION 02
   ABOUT / COMPLETE HOME SOLUTIONS

   LIGHT PREMIUM VERSION
   ------------------------------------------------------------
   Fondo claro para contrastar con el Hero oscuro.
   Navy + rojo como identidad corporativa.
============================================================ */


/* ============================================================
   VARIABLES
============================================================ */

:root {

    /* NAVY */
    --mdna-navy-1000: #01050d;
    --mdna-navy-950: #020916;
    --mdna-navy-900: #031127;
    --mdna-navy-850: #061a38;
    --mdna-navy-800: #08234b;
    --mdna-navy-700: #0b3268;

    /* BLUE */
    --mdna-blue: #2478ff;
    --mdna-blue-soft: #4e8fff;

    /* RED */
    --mdna-red-dark: #a20718;
    --mdna-red: #d80b20;
    --mdna-red-bright: #ff1834;
    --mdna-red-soft: #ff4359;

    /* LIGHT BACKGROUNDS */
    --mdna-white: #ffffff;
    --mdna-light: #f8fafd;
    --mdna-light-blue: #f2f6fb;
    --mdna-light-2: #edf3f9;

    /* TEXT */
    --mdna-title: #061a38;
    --mdna-text: #44546a;
    --mdna-muted: #7c8999;

    /* BORDER */
    --mdna-border: #dce4ee;
    --mdna-border-soft: #e9eef4;

    /* LAYOUT */
    --mdna-container: 1480px;

}


/* ============================================================
   RESET
============================================================ */

.mdn-about-home,
.mdn-about-home * {

    box-sizing: border-box;

}


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

.mdn-about-home {

    width: 100%;

    position: relative;

    overflow: hidden;

    padding:
        125px 0;

    color:
        var(--mdna-text);

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

    font-size: 14px;

    background:

        radial-gradient(
            circle at 5% 8%,
            rgba(36,120,255,.08),
            transparent 25%
        ),

        radial-gradient(
            circle at 96% 88%,
            rgba(255,24,52,.055),
            transparent 28%
        ),

        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fafd 46%,
            #f1f5fa 100%
        );

}


/* ============================================================
   TOP LIGHT TRANSITION
   Suaviza la transición desde el slider oscuro.
============================================================ */

.mdn-about-home::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background:
        linear-gradient(
            90deg,
            var(--mdna-blue),
            var(--mdna-red-bright),
            var(--mdna-navy-800)
        );

}


/* ============================================================
   DECORATIVE BACKGROUND LINE
============================================================ */

.mdn-about-home::after {

    content: "";

    width: 700px;
    height: 700px;

    position: absolute;

    right: -480px;
    top: 10%;

    border:
        1px solid rgba(6,26,56,.07);

    border-radius: 50%;

    pointer-events: none;

}


/* ============================================================
   GRID TEXTURE
============================================================ */

.mdn-about-home__grid {

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .55;

    background-image:

        linear-gradient(
            rgba(6,26,56,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(6,26,56,.035) 1px,
            transparent 1px
        );

    background-size:
        58px 58px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.58),
            transparent 85%
        );

}


/* ============================================================
   GLOWS
============================================================ */

.mdn-about-home__glow {

    position: absolute;

    pointer-events: none;

    border-radius: 50%;

    filter:
        blur(20px);

}


.mdn-about-home__glow--red {

    width: 430px;
    height: 430px;

    right: -250px;
    top: -190px;

    background:
        radial-gradient(
            circle,
            rgba(255,24,52,.11),
            transparent 68%
        );

}


.mdn-about-home__glow--blue {

    width: 470px;
    height: 470px;

    left: -280px;
    bottom: -300px;

    background:
        radial-gradient(
            circle,
            rgba(36,120,255,.09),
            transparent 68%
        );

}


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

.mdn-about-home__container {

    width:
        min(
            var(--mdna-container),
            calc(100% - 70px)
        );

    margin:
        0 auto;

    position: relative;

    z-index: 5;

    display: grid;

    grid-template-columns:
        minmax(0, .94fr)
        minmax(0, 1.06fr);

    gap:
        clamp(
            60px,
            7vw,
            110px
        );

    align-items: center;

}


/* ============================================================
   VISUAL AREA
============================================================ */

.mdn-about-home__visual {

    min-height: 680px;

    position: relative;

}


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

.mdn-about-home__image {

    width: 82%;
    height: 590px;

    margin: 0;

    position: absolute;

    top: 0;
    left: 0;

    overflow: hidden;

    border-radius:
        4px 42px 4px 42px;

    border:
        7px solid #ffffff;

    background:
        #fff;

    box-shadow:
        0 35px 80px rgba(6,26,56,.16);

}


.mdn-about-home__image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .8s ease;

}


.mdn-about-home__image:hover img {

    transform:
        scale(1.035);

}


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

.mdn-about-home__image-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            transparent 45%,
            rgba(2,9,22,.62) 100%
        );

}


/* ============================================================
   RED LINE ON IMAGE
============================================================ */

.mdn-about-home__image::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 62%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--mdna-red-bright),
            transparent
        );

    box-shadow:
        0 0 15px rgba(255,24,52,.30);

}


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

.mdn-about-home__image-small {

    width: 45%;
    height: 270px;

    margin: 0;

    position: absolute;

    right: 0;
    bottom: 0;

    overflow: hidden;

    border:
        7px solid #ffffff;

    border-radius:
        25px 4px 25px 4px;

    background: #fff;

    box-shadow:
        0 25px 60px rgba(6,26,56,.18);

}


.mdn-about-home__image-small img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .8s ease;

}


.mdn-about-home__image-small:hover img {

    transform:
        scale(1.06);

}


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

.mdn-about-home__visual-label {

    min-height: 68px;

    padding:
        10px 18px 10px 10px;

    position: absolute;

    left: 20px;
    bottom: 22px;

    display: flex;

    align-items: center;

    gap: 12px;

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

    border-radius: 14px;

    color:
        #ffffff;

    background:
        rgba(3,17,39,.86);

    backdrop-filter:
        blur(15px);

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

    box-shadow:
        0 15px 35px rgba(2,9,22,.22);

}


.mdn-about-home__visual-label > span {

    width: 44px;
    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 0 0 44px;

    border-radius: 11px;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #d80b20
        );

    box-shadow:
        0 9px 24px rgba(255,24,52,.28);

}


.mdn-about-home__visual-label div {

    display: flex;

    flex-direction: column;

}


.mdn-about-home__visual-label small {

    color:
        #b8c4d2;

    font-size: 14px;

}


.mdn-about-home__visual-label strong {

    margin-top: 2px;

    color:
        #ffffff;

    font-size: 14px;

}


/* ============================================================
   FLOATING MDN BADGE
============================================================ */

.mdn-about-home__badge {

    min-width: 310px;

    min-height: 88px;

    padding:
        13px 18px 13px 13px;

    position: absolute;

    top: 58px;
    right: -10px;

    display: flex;

    align-items: center;

    gap: 14px;

    border:
        1px solid #dbe4ee;

    border-radius: 17px;

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(255,24,52,.07),
            transparent 45%
        ),

        rgba(255,255,255,.94);

    backdrop-filter:
        blur(18px);

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

    box-shadow:
        0 22px 55px rgba(6,26,56,.16);

}


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

.mdn-about-home__badge-logo {

    width: 59px;
    height: 59px;

    flex:
        0 0 59px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #ff1834 45%,
            #b1071a
        );

    box-shadow:
        0 12px 27px rgba(255,24,52,.20);

    font-size: 18px;

    font-weight: 800;

    letter-spacing:
        .04em;

}


.mdn-about-home__badge div {

    display: flex;

    flex-direction: column;

}


.mdn-about-home__badge small {

    color:
        var(--mdna-red);

    font-size: 14px;

    font-weight: 800;

}


.mdn-about-home__badge strong {

    max-width: 195px;

    margin-top: 4px;

    color:
        var(--mdna-navy-850);

    font-size: 14px;

    line-height: 1.4;

}


/* ============================================================
   DECORATIVE 02
============================================================ */

.mdn-about-home__number {

    position: absolute;

    left: -27px;
    bottom: -20px;

    z-index: -1;

    color:
        rgba(6,26,56,.055);

    font-size:
        clamp(
            115px,
            12vw,
            195px
        );

    font-weight: 800;

    line-height: 1;

}


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

.mdn-about-home__content {

    min-width: 0;

    position: relative;

}


/* ============================================================
   EYEBROW
============================================================ */

.mdn-about-home__eyebrow {

    margin-bottom: 19px;

    display: flex;

    align-items: center;

    gap: 12px;

    color:
        var(--mdna-red);

    font-size: 14px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing:
        .08em;

}


.mdn-about-home__eyebrow span {

    width: 42px;
    height: 2px;

    position: relative;

    display: block;

    flex: 0 0 42px;

    background:
        linear-gradient(
            90deg,
            var(--mdna-red-bright),
            var(--mdna-red-dark)
        );

}


.mdn-about-home__eyebrow span::after {

    content: "";

    width: 7px;
    height: 7px;

    position: absolute;

    right: 0;
    top: 50%;

    transform:
        translateY(-50%);

    border-radius: 50%;

    background:
        var(--mdna-red-bright);

    box-shadow:
        0 0 9px rgba(255,24,52,.35);

}


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

.mdn-about-home__title {

    max-width: 780px;

    margin:
        0 0 25px;

    color:
        var(--mdna-title);

    font-size:
        clamp(
            39px,
            4vw,
            62px
        );

    font-weight: 800;

    line-height: 1.04;

    letter-spacing:
        -.045em;

}


.mdn-about-home__title span {

    color:
        var(--mdna-red);

}


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

.mdn-about-home__description {

    max-width: 770px;

    margin:
        0 0 31px;

    color:
        var(--mdna-text);

    font-size: 16px;

    font-weight: 500;

    line-height: 1.85;

    text-align: justify;

}


/* ============================================================
   CAPABILITIES
============================================================ */

.mdn-about-home__capabilities {

    display: grid;

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

    gap: 11px;

}


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

.mdn-about-home__capabilities > a {

    min-height: 91px;

    padding:
        13px;

    display: grid;

    grid-template-columns:
        49px 1fr 27px;

    align-items: center;

    gap: 12px;

    border:
        1px solid var(--mdna-border-soft);

    border-radius: 14px;

    color:
        var(--mdna-navy-850);

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

    box-shadow:
        0 8px 25px rgba(6,26,56,.045);

    text-decoration: none;

    transition:
        transform .32s ease,
        border-color .32s ease,
        box-shadow .32s ease,
        background .32s ease;

}


.mdn-about-home__capabilities > a:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(255,24,52,.23);

    background:
        #ffffff;

    box-shadow:
        0 18px 38px rgba(6,26,56,.11);

}


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

.mdn-about-home__capability-icon {

    width: 49px;
    height: 49px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid rgba(255,24,52,.12);

    border-radius: 12px;

    color:
        var(--mdna-red);

    background:
        #fff2f4;

    font-size: 16px;

    transition:
        color .32s ease,
        background .32s ease,
        box-shadow .32s ease;

}


.mdn-about-home__capabilities > a:hover
.mdn-about-home__capability-icon {

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #d80b20
        );

    box-shadow:
        0 9px 22px rgba(255,24,52,.20);

}


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

.mdn-about-home__capability-text {

    min-width: 0;

    display: flex;

    flex-direction: column;

}


.mdn-about-home__capability-text small {

    color:
        var(--mdna-blue);

    font-size: 14px;

    font-weight: 800;

}


.mdn-about-home__capability-text strong {

    margin-top: 4px;

    color:
        var(--mdna-navy-850);

    font-size: 14px;

    font-weight: 800;

}


.mdn-about-home__capabilities > a > i {

    color:
        #9aa7b6;

    font-size: 14px;

    transition:
        color .3s ease,
        transform .3s ease;

}


.mdn-about-home__capabilities > a:hover > i {

    color:
        var(--mdna-red);

    transform:
        translateX(4px);

}


/* ============================================================
   SERVICES LIST
============================================================ */

.mdn-about-home__services {

    margin-top: 26px;

    padding:
        21px 0;

    display: flex;

    flex-wrap: wrap;

    gap:
        10px 19px;

    border-top:
        1px solid var(--mdna-border);

    border-bottom:
        1px solid var(--mdna-border);

}


.mdn-about-home__services span {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color:
        var(--mdna-text);

    font-size: 14px;

    font-weight: 700;

}


.mdn-about-home__services i {

    width: 23px;
    height: 23px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--mdna-red-soft),
            var(--mdna-red)
        );

    box-shadow:
        0 5px 14px rgba(255,24,52,.15);

    font-size: 10px;

}


/* ============================================================
   FOOTER CTA
============================================================ */

.mdn-about-home__footer {

    margin-top: 29px;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap:
        19px 27px;

}


/* ============================================================
   PRIMARY BUTTON
============================================================ */

.mdn-about-home__button {

    min-height: 58px;

    padding:
        0 24px;

    position: relative;

    overflow: hidden;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

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

    border-radius: 13px;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #ff5267 0%,
            #ff1834 36%,
            #d80b20 70%,
            #a20718 100%
        );

    box-shadow:
        0 15px 35px rgba(255,24,52,.20);

    text-decoration: none;

    font-size: 14px;

    font-weight: 800;

    transition:
        transform .32s ease,
        box-shadow .32s ease;

}


/* Shine */

.mdn-about-home__button::before {

    content: "";

    width: 32px;
    height: 190%;

    position: absolute;

    left: -70px;
    top: -45%;

    transform:
        rotate(25deg);

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

    transition:
        left .65s ease;

}


.mdn-about-home__button:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 21px 43px rgba(255,24,52,.29);

}


.mdn-about-home__button:hover::before {

    left: 130%;

}


.mdn-about-home__button > * {

    position: relative;

    z-index: 2;

}


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

.mdn-about-home__contact {

    display: flex;

    align-items: center;

    gap: 12px;

}


.mdn-about-home__contact-icon {

    width: 47px;
    height: 47px;

    flex:
        0 0 47px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #2478ff,
            #0b4cac
        );

    box-shadow:
        0 10px 24px rgba(36,120,255,.18);

}


.mdn-about-home__contact div {

    display: flex;

    flex-direction: column;

}


.mdn-about-home__contact small {

    color:
        var(--mdna-muted);

    font-size: 14px;

}


.mdn-about-home__contact a {

    margin-top: 2px;

    color:
        var(--mdna-navy-850);

    text-decoration: none;

    font-size: 17px;

    font-weight: 800;

    transition:
        color .25s ease;

}


.mdn-about-home__contact a:hover {

    color:
        var(--mdna-red);

}


/* ============================================================
   HOURS
============================================================ */

.mdn-about-home__hours {

    width: fit-content;

    min-height: 48px;

    margin-top: 25px;

    padding:
        0 16px;

    display: flex;

    align-items: center;

    gap: 10px;

    border:
        1px solid var(--mdna-border);

    border-radius: 11px;

    color:
        var(--mdna-text);

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

    box-shadow:
        0 7px 20px rgba(6,26,56,.04);

    font-size: 14px;

}


.mdn-about-home__hours i {

    color:
        var(--mdna-red);

}


.mdn-about-home__hours strong {

    color:
        var(--mdna-navy-850);

}


/* ============================================================
   REVEAL
============================================================ */

.mdn-reveal {

    opacity: 0;

    transform:
        translateY(25px);

    transition:
        opacity .75s ease,
        transform .75s ease;

}


.mdn-reveal.is-visible {

    opacity: 1;

    transform:
        translateY(0);

}


/* ============================================================
   LARGE LAPTOP
============================================================ */

@media (max-width: 1250px) {

    .mdn-about-home__container {

        width:
            calc(100% - 50px);

        gap: 55px;

    }


    .mdn-about-home__visual {

        min-height: 620px;

    }


    .mdn-about-home__image {

        height: 535px;

    }


    .mdn-about-home__image-small {

        height: 235px;

    }


    .mdn-about-home__badge {

        right: -5px;

    }

}


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

@media (max-width: 980px) {

    .mdn-about-home {

        padding:
            95px 0;

    }


    .mdn-about-home__container {

        grid-template-columns:
            1fr;

        gap: 70px;

    }


    .mdn-about-home__visual {

        width:
            min(
                720px,
                100%
            );

        min-height: 620px;

        margin:
            0 auto;

    }


    .mdn-about-home__content {

        width:
            min(
                780px,
                100%
            );

        margin:
            0 auto;

    }

}


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

@media (max-width: 700px) {

    .mdn-about-home {

        padding:
            78px 0;

    }


    .mdn-about-home__container {

        width:
            calc(100% - 30px);

        gap: 55px;

    }


    /* VISUAL */

    .mdn-about-home__visual {

        min-height: 520px;

    }


    .mdn-about-home__image {

        width: 88%;
        height: 440px;

        border-width: 5px;

    }


    .mdn-about-home__image-small {

        width: 48%;
        height: 205px;

        border-width: 5px;

    }


    .mdn-about-home__badge {

        width: 245px;
        min-width: 0;

        top: 30px;
        right: 0;

        padding: 11px;

    }


    .mdn-about-home__badge-logo {

        width: 50px;
        height: 50px;

        flex-basis: 50px;

    }


    /* TEXT */

    .mdn-about-home__title {

        font-size:
            clamp(
                37px,
                10vw,
                52px
            );

    }


    .mdn-about-home__description {

        font-size: 15px;

        text-align: left;

    }


    /* CARDS */

    .mdn-about-home__capabilities {

        grid-template-columns:
            1fr;

    }


    /* CTA */

    .mdn-about-home__footer {

        align-items:
            flex-start;

        flex-direction:
            column;

    }

}


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

@media (max-width: 480px) {

    .mdn-about-home {

        padding:
            68px 0;

    }


    .mdn-about-home__visual {

        min-height: 450px;

    }


    .mdn-about-home__image {

        width: 94%;
        height: 380px;

        border-radius:
            3px 25px 3px 25px;

    }


    .mdn-about-home__image-small {

        width: 50%;
        height: 165px;

    }


    .mdn-about-home__badge {

        width: 205px;

        top: 20px;

    }


    .mdn-about-home__badge strong {

        display: none;

    }


    .mdn-about-home__visual-label {

        left: 12px;
        bottom: 14px;

    }


    .mdn-about-home__title {

        font-size: 36px;

    }


    .mdn-about-home__services {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap: 12px;

    }


    .mdn-about-home__button {

        width: 100%;

    }


    .mdn-about-home__hours {

        width: 100%;

        flex-wrap: wrap;

        padding:
            12px 14px;

    }

}


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

.mdn-about-home a:focus-visible {

    outline:
        2px solid var(--mdna-red-bright);

    outline-offset:
        4px;

}


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

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

    .mdn-about-home *,
    .mdn-about-home *::before,
    .mdn-about-home *::after {

        animation-duration:
            .01ms !important;

        transition-duration:
            .01ms !important;

    }


    .mdn-reveal {

        opacity: 1;

        transform: none;

    }

}



/* ============================================================
   MDN GENERAL CONTRACTOR LLC
   HOME — SECTION 03
   PREMIUM SERVICES WITH BACKGROUND IMAGE
============================================================ */


/* ============================================================
   VARIABLES
============================================================ */

:root{

    --mdns-navy-1000:#01050d;
    --mdns-navy-950:#020916;
    --mdns-navy-900:#031127;
    --mdns-navy-850:#061a38;
    --mdns-navy-800:#08234b;

    --mdns-red-dark:#a20718;
    --mdns-red:#d80b20;
    --mdns-red-bright:#ff1834;
    --mdns-red-soft:#ff5267;

    --mdns-blue:#2478ff;
    --mdns-blue-soft:#5b9cff;

    --mdns-white:#ffffff;
    --mdns-gray:#bec9d6;
    --mdns-muted:#8f9cad;

    --mdns-container:1480px;

}


/* ============================================================
   RESET
============================================================ */

.mdn-services-home,
.mdn-services-home *{
    box-sizing:border-box;
}


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

.mdn-services-home{

    width:100%;

    position:relative;

    overflow:hidden;

    padding:120px 0 105px;

    color:var(--mdns-white);

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

    font-size:14px;

    background:
        var(--mdns-navy-950);
}


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

.mdn-services-home__background{

    position:absolute;

    inset:0;

    background-image:
        url("https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=2200&q=88");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    transform:scale(1.03);
}


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

.mdn-services-home__overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            90deg,
            rgba(1,5,13,.97) 0%,
            rgba(3,17,39,.93) 38%,
            rgba(4,23,50,.87) 66%,
            rgba(2,9,22,.90) 100%
        ),

        linear-gradient(
            0deg,
            rgba(1,5,13,.96) 0%,
            rgba(1,5,13,.34) 52%,
            rgba(1,5,13,.70) 100%
        );

}


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

.mdn-services-home__grid{

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.22;

    background-image:

        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size:54px 54px;

}


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

.mdn-services-home::before{

    content:"";

    position:absolute;

    z-index:4;

    left:0;
    top:0;

    width:100%;
    height:3px;

    background:
        linear-gradient(
            90deg,
            #2478ff,
            #ff1834 47%,
            transparent 90%
        );

}


/* ============================================================
   DECORATIVE DIAGONAL
============================================================ */

.mdn-services-home::after{

    content:"";

    position:absolute;

    z-index:3;

    width:2px;
    height:900px;

    top:-280px;
    right:14%;

    transform:rotate(27deg);

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,24,52,.75),
            transparent
        );

    box-shadow:
        0 0 20px rgba(255,24,52,.20);

    pointer-events:none;

}


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

.mdn-services-home__glow{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

    filter:blur(25px);

}


.mdn-services-home__glow--red{

    width:520px;
    height:520px;

    top:-300px;
    right:-220px;

    background:
        radial-gradient(
            circle,
            rgba(255,24,52,.28),
            transparent 68%
        );

}


.mdn-services-home__glow--blue{

    width:500px;
    height:500px;

    bottom:-310px;
    left:-280px;

    background:
        radial-gradient(
            circle,
            rgba(36,120,255,.18),
            transparent 68%
        );

}


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

.mdn-services-home__container{

    width:
        min(
            var(--mdns-container),
            calc(100% - 70px)
        );

    margin:0 auto;

    position:relative;

    z-index:10;

}


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

.mdn-services-home__header{

    margin-bottom:48px;

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:50px;

}


/* ============================================================
   HEADER LEFT
============================================================ */

.mdn-services-home__header-left{

    max-width:850px;

}


/* ============================================================
   EYEBROW
============================================================ */

.mdn-services-home__eyebrow{

    margin-bottom:16px;

    display:flex;

    align-items:center;

    gap:12px;

    color:
        var(--mdns-red-soft);

    text-transform:uppercase;

    letter-spacing:.09em;

    font-size:14px;

    font-weight:800;

}


.mdn-services-home__eyebrow span{

    width:44px;
    height:2px;

    position:relative;

    background:
        var(--mdns-red-bright);

    box-shadow:
        0 0 10px rgba(255,24,52,.50);

}


.mdn-services-home__eyebrow span::after{

    content:"";

    width:7px;
    height:7px;

    position:absolute;

    right:0;
    top:50%;

    transform:
        translateY(-50%);

    border-radius:50%;

    background:
        var(--mdns-red-bright);

}


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

.mdn-services-home__title{

    margin:
        0 0 20px;

    color:#fff;

    font-size:
        clamp(
            40px,
            4.2vw,
            66px
        );

    line-height:1.02;

    font-weight:800;

    letter-spacing:-.045em;

}


.mdn-services-home__title span{

    color:
        var(--mdns-red-bright);

}


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

.mdn-services-home__description{

    max-width:780px;

    margin:0;

    color:#c1ccd9;

    font-size:16px;

    line-height:1.8;

    text-align:justify;

}


/* ============================================================
   HEADER RIGHT
============================================================ */

.mdn-services-home__header-right{

    display:flex;

    align-items:center;

    gap:25px;

    flex:0 0 auto;

}


/* ============================================================
   COUNTER
============================================================ */

.mdn-services-home__counter{

    display:flex;

    align-items:center;

    gap:11px;

}


.mdn-services-home__counter strong{

    color:
        var(--mdns-red-bright);

    font-size:22px;

    font-weight:800;

}


.mdn-services-home__counter span{

    width:32px;
    height:1px;

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

}


.mdn-services-home__counter small{

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

    font-size:14px;

}


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

.mdn-services-home__arrows{

    display:flex;

    gap:8px;

}


.mdn-services-home__arrow{

    width:50px;
    height:50px;

    padding:0;

    display:flex;

    align-items:center;

    justify-content:center;

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

    border-radius:12px;

    color:#fff;

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

    backdrop-filter:
        blur(12px);

    cursor:pointer;

    font-size:14px;

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;

}


.mdn-services-home__arrow:hover{

    transform:
        translateY(-3px);

    border-color:
        rgba(255,24,52,.40);

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

}


.mdn-services-home__arrow--next{

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #d80b20
        );

    border-color:
        rgba(255,255,255,.12);

    box-shadow:
        0 12px 28px rgba(255,24,52,.20);

}


/* ============================================================
   VIEWPORT
============================================================ */

.mdn-services-home__viewport{

    width:100%;

    overflow:hidden;

    cursor:grab;

    touch-action:
        pan-y;

}


.mdn-services-home__viewport.is-dragging{

    cursor:grabbing;

}


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

.mdn-services-home__track{

    display:flex;

    gap:20px;

    transition:
        transform .58s cubic-bezier(.22,.8,.22,1);

    will-change:transform;

}


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

.mdn-services-card{

    flex:
        0 0
        calc(
            (100% - 40px) / 3
        );

    min-width:0;

    height:515px;

}


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

.mdn-services-card__link{

    width:100%;
    height:100%;

    position:relative;

    display:block;

    overflow:hidden;

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

    border-radius:20px;

    color:#fff;

    text-decoration:none;

    background:
        #061a38;

    box-shadow:
        0 25px 55px rgba(0,5,20,.26);

    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;

}


.mdn-services-card__link:hover{

    transform:
        translateY(-8px);

    border-color:
        rgba(255,24,52,.40);

    box-shadow:
        0 32px 70px rgba(0,5,20,.38);

}


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

.mdn-services-card__image{

    position:absolute;

    inset:0;

}


.mdn-services-card__image img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transform:
        scale(1.03);

    filter:
        saturate(.85)
        contrast(1.03);

    transition:
        transform .8s ease,
        filter .5s ease;

}


.mdn-services-card__link:hover
.mdn-services-card__image img{

    transform:
        scale(1.10);

    filter:
        saturate(1.06)
        contrast(1.04);

}


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

.mdn-services-card__shade{

    position:absolute;

    inset:0;

    z-index:2;

    background:

        linear-gradient(
            180deg,
            rgba(2,9,22,.10) 0%,
            rgba(2,9,22,.23) 32%,
            rgba(2,9,22,.90) 73%,
            rgba(1,5,13,.98) 100%
        ),

        linear-gradient(
            90deg,
            rgba(2,9,22,.25),
            transparent
        );

    transition:
        background .4s ease;

}


.mdn-services-card__link:hover
.mdn-services-card__shade{

    background:

        linear-gradient(
            180deg,
            rgba(255,24,52,.03) 0%,
            rgba(2,9,22,.20) 34%,
            rgba(2,9,22,.87) 73%,
            rgba(1,5,13,.98) 100%
        );

}


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

.mdn-services-card__number{

    position:absolute;

    z-index:5;

    top:22px;
    right:23px;

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

    font-size:14px;

    font-weight:800;

}


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

.mdn-services-card__icon{

    width:54px;
    height:54px;

    position:absolute;

    z-index:5;

    top:22px;
    left:22px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    border-radius:14px;

    color:#fff;

    background:
        rgba(2,9,22,.62);

    backdrop-filter:
        blur(14px);

    box-shadow:
        0 10px 28px rgba(0,5,20,.18);

    font-size:17px;

    transition:
        background .35s ease,
        transform .35s ease;

}


.mdn-services-card__link:hover
.mdn-services-card__icon{

    transform:
        translateY(-3px);

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #d80b20
        );

}


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

.mdn-services-card__content{

    position:absolute;

    z-index:5;

    left:0;
    right:0;
    bottom:0;

    padding:
        30px 27px;

}


/* ============================================================
   CATEGORY
============================================================ */

.mdn-services-card__category{

    display:block;

    margin-bottom:10px;

    color:
        var(--mdns-red-soft);

    font-size:14px;

    font-weight:800;

    letter-spacing:.08em;

}


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

.mdn-services-card__content h3{

    margin:
        0 0 12px;

    color:#fff;

    font-size:
        clamp(
            23px,
            2vw,
            30px
        );

    line-height:1.1;

    font-weight:800;

}


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

.mdn-services-card__content p{

    margin:
        0 0 19px;

    color:#bdc8d6;

    font-size:14px;

    line-height:1.65;

}


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

.mdn-services-card__action{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#fff;

    font-size:14px;

    font-weight:800;

}


.mdn-services-card__action i{

    width:31px;
    height:31px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border-radius:9px;

    color:#fff;

    background:
        var(--mdns-red);

    transition:
        transform .35s ease;

}


.mdn-services-card__link:hover
.mdn-services-card__action i{

    transform:
        translateX(5px);

}


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

.mdn-services-home__bottom{

    margin-top:39px;

}


/* ============================================================
   PROGRESS TRACK
============================================================ */

.mdn-services-home__progress{

    width:100%;
    height:3px;

    overflow:hidden;

    border-radius:10px;

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

}


.mdn-services-home__progress span{

    width:33.333%;
    height:100%;

    display:block;

    border-radius:10px;

    background:
        linear-gradient(
            90deg,
            var(--mdns-blue),
            var(--mdns-red-bright)
        );

    box-shadow:
        0 0 12px rgba(255,24,52,.35);

    transition:
        width .4s ease,
        transform .5s ease;

}


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

.mdn-services-home__bottom-inner{

    padding-top:28px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:35px;

}


.mdn-services-home__bottom-inner > p{

    margin:0;

    color:#b6c2d0;

    font-size:14px;

    line-height:1.6;

}


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

.mdn-services-home__bottom-actions{

    display:flex;

    align-items:center;

    gap:12px;

}


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

.mdn-services-home__phone{

    min-height:57px;

    padding:
        7px 17px 7px 8px;

    display:flex;

    align-items:center;

    gap:11px;

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

    border-radius:13px;

    color:#fff;

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

    text-decoration:none;

}


.mdn-services-home__phone > span{

    width:41px;
    height:41px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:10px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #2478ff,
            #1255b8
        );

}


.mdn-services-home__phone div{

    display:flex;

    flex-direction:column;

}


.mdn-services-home__phone small{

    color:#8f9cad;

    font-size:14px;

}


.mdn-services-home__phone strong{

    margin-top:1px;

    color:#fff;

    font-size:15px;

}


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

.mdn-services-home__all{

    min-height:57px;

    padding:
        0 22px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:11px;

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

    border-radius:13px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #ff1834 40%,
            #d80b20 70%,
            #a20718
        );

    box-shadow:
        0 15px 35px rgba(255,24,52,.20);

    text-decoration:none;

    font-size:14px;

    font-weight:800;

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.mdn-services-home__all:hover{

    transform:
        translateY(-3px);

    box-shadow:
        0 20px 42px rgba(255,24,52,.31);

}


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

@media(max-width:1050px){

    .mdn-services-home{

        padding:
            95px 0;

    }


    .mdn-services-home__container{

        width:
            calc(100% - 46px);

    }


    .mdn-services-home__header{

        align-items:flex-start;

        flex-direction:column;

        gap:28px;

    }


    .mdn-services-home__header-right{

        width:100%;

        justify-content:space-between;

    }


    .mdn-services-card{

        flex:
            0 0
            calc(
                (100% - 20px) / 2
            );

    }

}


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

@media(max-width:700px){

    .mdn-services-home{

        padding:
            78px 0;

    }


    .mdn-services-home__container{

        width:
            calc(100% - 30px);

    }


    .mdn-services-home__title{

        font-size:
            clamp(
                37px,
                10vw,
                50px
            );

    }


    .mdn-services-home__description{

        font-size:15px;

        text-align:left;

    }


    .mdn-services-home__counter{

        display:none;

    }


    .mdn-services-card{

        flex:
            0 0
            88%;

        height:490px;

    }


    .mdn-services-card__content{

        padding:
            25px 22px;

    }


    .mdn-services-home__bottom-inner{

        align-items:flex-start;

        flex-direction:column;

    }


    .mdn-services-home__bottom-actions{

        width:100%;

        flex-direction:column;

        align-items:stretch;

    }


    .mdn-services-home__phone,
    .mdn-services-home__all{

        width:100%;

    }

}


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

@media(max-width:430px){

    .mdn-services-card{

        flex-basis:92%;

        height:460px;

    }


    .mdn-services-home__header-right{

        justify-content:flex-end;

    }


    .mdn-services-home__arrow{

        width:47px;
        height:47px;

    }


    .mdn-services-card__content h3{

        font-size:25px;

    }

}


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

.mdn-services-home a:focus-visible,
.mdn-services-home button:focus-visible{

    outline:
        2px solid var(--mdns-red-bright);

    outline-offset:4px;

}


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

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

    .mdn-services-home *,
    .mdn-services-home *::before,
    .mdn-services-home *::after{

        animation-duration:.01ms !important;

        transition-duration:.01ms !important;

    }

}

/* ============================================================
   MDN GENERAL CONTRACTOR LLC
   HOME — SECTION 04
   HOW WE WORK
   LIGHT PREMIUM DESIGN
============================================================ */

:root{

    --mdnp-navy:#061a38;
    --mdnp-navy-dark:#020916;
    --mdnp-navy-mid:#0a3470;

    --mdnp-red:#d80b20;
    --mdnp-red-bright:#ff1834;
    --mdnp-red-soft:#ff5267;

    --mdnp-blue:#2478ff;
    --mdnp-blue-soft:#5b9cff;

    --mdnp-white:#ffffff;
    --mdnp-bg:#f5f8fc;
    --mdnp-bg-2:#edf3f9;

    --mdnp-text:#46566b;
    --mdnp-muted:#8492a5;

    --mdnp-border:#dce5ef;

    --mdnp-container:1480px;

}


/* ============================================================
   RESET
============================================================ */

.mdn-process,
.mdn-process *{
    box-sizing:border-box;
}


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

.mdn-process{

    width:100%;

    position:relative;

    overflow:hidden;

    padding:120px 0;

    background:

        radial-gradient(
            circle at 0% 0%,
            rgba(36,120,255,.07),
            transparent 28%
        ),

        radial-gradient(
            circle at 100% 100%,
            rgba(255,24,52,.055),
            transparent 28%
        ),

        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7f9fc 52%,
            #eef3f8 100%
        );

    color:var(--mdnp-text);

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

    font-size:14px;

}


/* red top accent */

.mdn-process::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--mdnp-red-bright),
            var(--mdnp-blue),
            transparent
        );

}


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

.mdn-process__grid{

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.6;

    background-image:

        linear-gradient(
            rgba(6,26,56,.028) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(6,26,56,.028) 1px,
            transparent 1px
        );

    background-size:58px 58px;

}


/* ============================================================
   GLOWS
============================================================ */

.mdn-process__glow{

    position:absolute;

    border-radius:50%;

    filter:blur(25px);

    pointer-events:none;

}


.mdn-process__glow--blue{

    width:450px;
    height:450px;

    left:-280px;
    top:-250px;

    background:
        radial-gradient(
            circle,
            rgba(36,120,255,.10),
            transparent 68%
        );

}


.mdn-process__glow--red{

    width:430px;
    height:430px;

    right:-260px;
    bottom:-260px;

    background:
        radial-gradient(
            circle,
            rgba(255,24,52,.09),
            transparent 68%
        );

}


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

.mdn-process__container{

    width:
        min(
            var(--mdnp-container),
            calc(100% - 70px)
        );

    margin:0 auto;

    position:relative;

    z-index:5;

}


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

.mdn-process__header{

    margin-bottom:58px;

    display:grid;

    grid-template-columns:
        minmax(0,1.1fr)
        minmax(300px,.7fr);

    gap:70px;

    align-items:end;

}


/* ============================================================
   EYEBROW
============================================================ */

.mdn-process__eyebrow{

    margin-bottom:17px;

    display:flex;

    align-items:center;

    gap:12px;

    color:var(--mdnp-red);

    font-size:14px;

    font-weight:800;

    letter-spacing:.08em;

    text-transform:uppercase;

}


.mdn-process__eyebrow span{

    width:43px;
    height:2px;

    position:relative;

    background:
        var(--mdnp-red-bright);

}


.mdn-process__eyebrow span::after{

    content:"";

    width:7px;
    height:7px;

    position:absolute;

    right:0;
    top:50%;

    transform:translateY(-50%);

    border-radius:50%;

    background:var(--mdnp-red-bright);

}


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

.mdn-process__title{

    max-width:820px;

    margin:0;

    color:var(--mdnp-navy);

    font-size:
        clamp(
            40px,
            4.2vw,
            66px
        );

    line-height:1.03;

    letter-spacing:-.045em;

    font-weight:800;

}


.mdn-process__title span{

    display:block;

    color:var(--mdnp-red);

}


/* ============================================================
   INTRO
============================================================ */

.mdn-process__intro{

    margin:0;

    color:var(--mdnp-text);

    font-size:16px;

    line-height:1.8;

    text-align:justify;

}


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

.mdn-process__layout{

    display:grid;

    grid-template-columns:
        minmax(0,.92fr)
        minmax(0,1.08fr);

    gap:
        clamp(
            50px,
            6vw,
            90px
        );

    align-items:center;

}


/* ============================================================
   VISUAL
============================================================ */

.mdn-process__visual{

    min-height:620px;

    position:relative;

}


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

.mdn-process__image{

    width:86%;
    height:570px;

    position:absolute;

    left:0;
    top:0;

    overflow:hidden;

    border:
        7px solid #fff;

    border-radius:
        5px 40px 5px 40px;

    background:#fff;

    box-shadow:
        0 30px 70px rgba(6,26,56,.15);

}


.mdn-process__image img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .8s ease;

}


.mdn-process__image:hover img{

    transform:scale(1.04);

}


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

.mdn-process__image-shade{

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            180deg,
            transparent 45%,
            rgba(2,9,22,.72) 100%
        );

}


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

.mdn-process__image-label{

    position:absolute;

    left:20px;
    bottom:20px;

    padding:11px 17px 11px 11px;

    display:flex;

    align-items:center;

    gap:13px;

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

    border-radius:14px;

    background:
        rgba(2,9,22,.82);

    backdrop-filter:blur(14px);

    color:#fff;

}


.mdn-process__image-label > span{

    width:47px;
    height:47px;

    flex:0 0 47px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:11px;

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #d80b20
        );

    font-size:15px;

    font-weight:800;

}


.mdn-process__image-label div{

    display:flex;

    flex-direction:column;

}


.mdn-process__image-label small{

    color:#9facbd;

    font-size:14px;

}


.mdn-process__image-label strong{

    margin-top:2px;

    color:#fff;

    font-size:14px;

}


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

.mdn-process__contact-card{

    min-width:285px;

    min-height:88px;

    padding:13px;

    position:absolute;

    right:0;
    top:55px;

    display:flex;

    align-items:center;

    gap:13px;

    border:
        1px solid var(--mdnp-border);

    border-radius:17px;

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

    box-shadow:
        0 20px 48px rgba(6,26,56,.14);

}


/* icon */

.mdn-process__contact-icon{

    width:55px;
    height:55px;

    flex:0 0 55px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #2478ff,
            #1255b8
        );

    font-size:16px;

}


/* copy */

.mdn-process__contact-copy{

    display:flex;

    flex-direction:column;

}


.mdn-process__contact-copy small{

    color:var(--mdnp-muted);

    font-size:14px;

}


.mdn-process__contact-copy a{

    margin-top:2px;

    color:var(--mdnp-navy);

    text-decoration:none;

    font-size:17px;

    font-weight:800;

}


.mdn-process__contact-copy span{

    margin-top:2px;

    color:var(--mdnp-red);

    font-size:14px;

    font-weight:700;

}


/* ============================================================
   SCHEDULE
============================================================ */

.mdn-process__schedule{

    min-width:280px;

    min-height:75px;

    padding:12px 16px;

    position:absolute;

    right:10px;
    bottom:0;

    display:flex;

    align-items:center;

    gap:12px;

    border:
        1px solid var(--mdnp-border);

    border-radius:15px;

    background:#fff;

    box-shadow:
        0 18px 42px rgba(6,26,56,.12);

}


.mdn-process__schedule > i{

    width:43px;
    height:43px;

    flex:0 0 43px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:11px;

    color:var(--mdnp-red);

    background:#fff1f3;

}


.mdn-process__schedule div{

    display:flex;

    flex-direction:column;

}


.mdn-process__schedule small{

    color:var(--mdnp-muted);

    font-size:14px;

}


.mdn-process__schedule strong{

    margin-top:3px;

    color:var(--mdnp-navy);

    font-size:14px;

}


/* ============================================================
   STEPS
============================================================ */

.mdn-process__steps{

    display:flex;

    flex-direction:column;

    gap:10px;

}


/* ============================================================
   STEP
============================================================ */

.mdn-process__step{

    overflow:hidden;

    border:
        1px solid var(--mdnp-border);

    border-radius:15px;

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

    box-shadow:
        0 8px 25px rgba(6,26,56,.035);

    transition:
        border-color .35s ease,
        box-shadow .35s ease,
        transform .35s ease;

}


.mdn-process__step.is-active{

    transform:translateX(-5px);

    border-color:
        rgba(255,24,52,.25);

    background:#fff;

    box-shadow:
        0 18px 40px rgba(6,26,56,.10);

}


/* ============================================================
   STEP BUTTON
============================================================ */

.mdn-process__step-button{

    width:100%;

    min-height:92px;

    padding:13px 16px;

    display:grid;

    grid-template-columns:
        44px 1fr 38px;

    align-items:center;

    gap:14px;

    border:0;

    background:transparent;

    cursor:pointer;

    font-family:inherit;

    text-align:left;

}


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

.mdn-process__step-number{

    color:#b3becb;

    font-size:14px;

    font-weight:800;

}


.mdn-process__step.is-active
.mdn-process__step-number{

    color:var(--mdnp-red);

}


/* ============================================================
   STEP MAIN
============================================================ */

.mdn-process__step-main{

    display:grid;

    grid-template-columns:
        48px 1fr;

    align-items:center;

    gap:13px;

}


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

.mdn-process__step-icon{

    width:48px;
    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    color:var(--mdnp-red);

    background:#fff2f4;

    border:
        1px solid rgba(255,24,52,.10);

    transition:
        color .3s ease,
        background .3s ease;

}


.mdn-process__step.is-active
.mdn-process__step-icon{

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #d80b20
        );

}


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

.mdn-process__step-heading{

    display:flex;

    flex-direction:column;

}


.mdn-process__step-heading small{

    color:var(--mdnp-blue);

    font-size:14px;

    font-weight:800;

}


.mdn-process__step-heading strong{

    margin-top:3px;

    color:var(--mdnp-navy);

    font-size:17px;

    font-weight:800;

}


/* ============================================================
   STEP TOGGLE
============================================================ */

.mdn-process__step-toggle{

    width:36px;
    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:10px;

    color:#8996a6;

    background:#f1f5f9;

}


.mdn-process__step.is-active
.mdn-process__step-toggle{

    color:#fff;

    background:var(--mdnp-red);

}


/* ============================================================
   STEP PANEL
============================================================ */

.mdn-process__step-panel{

    max-height:0;

    overflow:hidden;

    opacity:0;

    padding:
        0 80px 0 118px;

    transition:
        max-height .42s ease,
        opacity .32s ease,
        padding .42s ease;

}


.mdn-process__step.is-active
.mdn-process__step-panel{

    max-height:260px;

    opacity:1;

    padding-bottom:24px;

}


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

.mdn-process__step-panel p{

    margin:0;

    color:var(--mdnp-text);

    font-size:14px;

    line-height:1.75;

}


/* ============================================================
   PANEL LINK
============================================================ */

.mdn-process__step-panel a{

    margin-top:14px;

    display:inline-flex;

    align-items:center;

    gap:9px;

    color:var(--mdnp-red);

    text-decoration:none;

    font-size:14px;

    font-weight:800;

}


.mdn-process__step-panel a i{

    transition:
        transform .3s ease;

}


.mdn-process__step-panel a:hover i{

    transform:translateX(4px);

}


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

.mdn-process__cta{

    margin-top:9px;

    padding:18px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    border-radius:16px;

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(255,24,52,.16),
            transparent 40%
        ),

        linear-gradient(
            135deg,
            #020916,
            #061a38
        );

    box-shadow:
        0 18px 45px rgba(6,26,56,.18);

}


/* left */

.mdn-process__cta > div{

    display:flex;

    align-items:center;

    gap:12px;

}


.mdn-process__cta-icon{

    width:48px;
    height:48px;

    flex:0 0 48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #d80b20
        );

}


.mdn-process__cta > div > div{

    display:flex;

    flex-direction:column;

}


.mdn-process__cta small{

    color:var(--mdnp-blue-soft);

    font-size:14px;

    font-weight:800;

}


.mdn-process__cta strong{

    margin-top:3px;

    color:#fff;

    font-size:14px;

}


/* CTA button */

.mdn-process__cta > a{

    min-height:50px;

    padding:0 18px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    flex:0 0 auto;

    border-radius:11px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #d80b20
        );

    text-decoration:none;

    font-size:14px;

    font-weight:800;

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.mdn-process__cta > a:hover{

    transform:translateY(-3px);

    box-shadow:
        0 12px 30px rgba(255,24,52,.28);

}


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

@media(max-width:1050px){

    .mdn-process{

        padding:95px 0;

    }


    .mdn-process__container{

        width:
            calc(100% - 46px);

    }


    .mdn-process__header{

        grid-template-columns:1fr;

        gap:25px;

    }


    .mdn-process__intro{

        max-width:800px;

    }


    .mdn-process__layout{

        grid-template-columns:1fr;

        gap:70px;

    }


    .mdn-process__visual{

        width:
            min(
                720px,
                100%
            );

        margin:0 auto;

    }

}


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

@media(max-width:700px){

    .mdn-process{

        padding:78px 0;

    }


    .mdn-process__container{

        width:
            calc(100% - 30px);

    }


    .mdn-process__title{

        font-size:
            clamp(
                37px,
                10vw,
                50px
            );

    }


    .mdn-process__intro{

        font-size:15px;

        text-align:left;

    }


    .mdn-process__visual{

        min-height:500px;

    }


    .mdn-process__image{

        width:90%;
        height:430px;

        border-width:5px;

    }


    .mdn-process__contact-card{

        min-width:245px;

        right:0;

        top:28px;

    }


    .mdn-process__schedule{

        min-width:250px;

        right:0;

    }


    .mdn-process__step-button{

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

        padding:12px;

    }


    .mdn-process__step-main{

        grid-template-columns:
            42px 1fr;

        gap:10px;

    }


    .mdn-process__step-icon{

        width:42px;
        height:42px;

    }


    .mdn-process__step-heading strong{

        font-size:15px;

    }


    .mdn-process__step-panel{

        padding-left:75px;
        padding-right:20px;

    }


    .mdn-process__step.is-active
    .mdn-process__step-panel{

        padding-bottom:21px;

    }


    .mdn-process__cta{

        align-items:stretch;

        flex-direction:column;

    }


    .mdn-process__cta > a{

        width:100%;

    }

}


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

@media(max-width:460px){

    .mdn-process__visual{

        min-height:450px;

    }


    .mdn-process__image{

        width:94%;
        height:375px;

    }


    .mdn-process__contact-card{

        min-width:210px;

    }


    .mdn-process__contact-copy a{

        font-size:15px;

    }


    .mdn-process__schedule{

        min-width:235px;

    }


    .mdn-process__step-number{

        display:none;

    }


    .mdn-process__step-button{

        grid-template-columns:
            1fr 34px;

    }


    .mdn-process__step-panel{

        padding-left:64px;

    }

}


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

.mdn-process button:focus-visible,
.mdn-process a:focus-visible{

    outline:
        2px solid var(--mdnp-red-bright);

    outline-offset:4px;

}



/* ============================================================
   MDN GENERAL CONTRACTOR LLC
   HOME — DYNAMIC PROJECTS GALLERY
============================================================ */

:root{

    --mdng-navy:#061a38;
    --mdng-navy-dark:#020916;
    --mdng-navy-mid:#0a3470;

    --mdng-red:#d80b20;
    --mdng-red-bright:#ff1834;
    --mdng-red-soft:#ff5267;

    --mdng-blue:#2478ff;

    --mdng-white:#ffffff;

    --mdng-text:#47576b;
    --mdng-muted:#8694a6;

    --mdng-border:#dce5ef;

    --mdng-container:1480px;

}


/* ============================================================
   RESET
============================================================ */

.mdn-projects,
.mdn-projects *,
.mdn-project-lightbox,
.mdn-project-lightbox *{

    box-sizing:border-box;

}


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

.mdn-projects{

    width:100%;

    position:relative;

    overflow:hidden;

    padding:120px 0 105px;

    background:

        radial-gradient(
            circle at 0% 100%,
            rgba(36,120,255,.07),
            transparent 28%
        ),

        radial-gradient(
            circle at 100% 0%,
            rgba(255,24,52,.06),
            transparent 28%
        ),

        linear-gradient(
            135deg,
            #ffffff,
            #f8fafd 55%,
            #eff4f9
        );

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

    font-size:14px;

}


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

.mdn-projects__background{

    position:absolute;

    width:700px;
    height:700px;

    right:-460px;
    top:-300px;

    border-radius:50%;

    border:
        1px solid rgba(6,26,56,.07);

}


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

.mdn-projects__grid{

    position:absolute;

    inset:0;

    opacity:.55;

    pointer-events:none;

    background-image:

        linear-gradient(
            rgba(6,26,56,.028) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(6,26,56,.028) 1px,
            transparent 1px
        );

    background-size:
        58px 58px;

}


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

.mdn-projects::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:3px;

    background:
        linear-gradient(
            90deg,
            var(--mdng-blue),
            var(--mdng-red-bright),
            transparent
        );

}


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

.mdn-projects__container{

    width:
        min(
            var(--mdng-container),
            calc(100% - 70px)
        );

    margin:0 auto;

    position:relative;

    z-index:5;

}


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

.mdn-projects__header{

    margin-bottom:47px;

    display:grid;

    grid-template-columns:
        minmax(0,1.1fr)
        minmax(300px,.75fr);

    align-items:end;

    gap:65px;

}


/* ============================================================
   EYEBROW
============================================================ */

.mdn-projects__eyebrow{

    margin-bottom:17px;

    display:flex;

    align-items:center;

    gap:12px;

    color:var(--mdng-red);

    text-transform:uppercase;

    letter-spacing:.08em;

    font-size:14px;

    font-weight:800;

}


.mdn-projects__eyebrow span{

    width:43px;
    height:2px;

    position:relative;

    background:
        var(--mdng-red-bright);

}


.mdn-projects__eyebrow span::after{

    content:"";

    width:7px;
    height:7px;

    position:absolute;

    right:0;
    top:50%;

    transform:
        translateY(-50%);

    border-radius:50%;

    background:
        var(--mdng-red-bright);

}


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

.mdn-projects__title{

    margin:0;

    color:
        var(--mdng-navy);

    font-size:
        clamp(
            40px,
            4.3vw,
            66px
        );

    font-weight:800;

    line-height:1.03;

    letter-spacing:-.045em;

}


.mdn-projects__title span{

    display:block;

    color:
        var(--mdng-red);

}


/* ============================================================
   HEADER RIGHT
============================================================ */

.mdn-projects__header-right{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:20px;

}


.mdn-projects__header-right p{

    margin:0;

    color:
        var(--mdng-text);

    font-size:16px;

    line-height:1.8;

    text-align:justify;

}


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

.mdn-projects__arrows{

    display:flex;

    gap:8px;

}


.mdn-projects__arrow{

    width:50px;
    height:50px;

    padding:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border:
        1px solid var(--mdng-border);

    border-radius:12px;

    color:
        var(--mdng-navy);

    background:
        #ffffff;

    cursor:pointer;

    font-size:14px;

    box-shadow:
        0 8px 20px rgba(6,26,56,.07);

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease;

}


.mdn-projects__arrow:hover{

    transform:
        translateY(-3px);

    color:#fff;

    background:
        var(--mdng-navy);

}


.mdn-projects__arrow--next{

    color:#fff;

    border-color:
        transparent;

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #d80b20
        );

}


/* ============================================================
   VIEWPORT
============================================================ */

.mdn-projects__viewport{

    width:100%;

    overflow:hidden;

    cursor:grab;

    touch-action:
        pan-y;

}


.mdn-projects__viewport.is-dragging{

    cursor:grabbing;

}


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

.mdn-projects__track{

    display:flex;

    gap:18px;

    will-change:transform;

    transition:
        transform .6s cubic-bezier(.22,.8,.22,1);

}


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

.mdn-project-card{

    flex:
        0 0
        calc(
            (100% - 36px) / 3
        );

    height:520px;

    min-width:0;

}


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

.mdn-project-card__button{

    width:100%;
    height:100%;

    padding:0;

    position:relative;

    overflow:hidden;

    display:block;

    border:
        1px solid rgba(6,26,56,.10);

    border-radius:20px;

    background:
        var(--mdng-navy);

    box-shadow:
        0 22px 55px rgba(6,26,56,.11);

    cursor:pointer;

    font-family:inherit;

    text-align:left;

    transition:
        transform .4s ease,
        box-shadow .4s ease;

}


.mdn-project-card__button:hover{

    transform:
        translateY(-7px);

    box-shadow:
        0 30px 65px rgba(6,26,56,.18);

}


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

.mdn-project-card__button > img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transform:
        scale(1.02);

    transition:
        transform .8s ease,
        filter .5s ease;

}


.mdn-project-card__button:hover > img{

    transform:
        scale(1.08);

}


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

.mdn-project-card__overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            180deg,
            rgba(2,9,22,.04) 30%,
            rgba(2,9,22,.20) 52%,
            rgba(2,9,22,.88) 100%
        );

}


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

.mdn-project-card__number{

    position:absolute;

    top:20px;
    left:20px;

    min-width:42px;
    height:37px;

    padding:0 10px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    border-radius:10px;

    color:#fff;

    background:
        rgba(2,9,22,.60);

    backdrop-filter:
        blur(12px);

    font-size:14px;

    font-weight:800;

}


/* ============================================================
   ZOOM
============================================================ */

.mdn-project-card__zoom{

    width:45px;
    height:45px;

    position:absolute;

    top:20px;
    right:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #d80b20
        );

    box-shadow:
        0 10px 25px rgba(255,24,52,.22);

    transition:
        transform .35s ease;

}


.mdn-project-card__button:hover
.mdn-project-card__zoom{

    transform:
        scale(1.08);

}


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

.mdn-project-card__bottom{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    padding:
        25px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}


.mdn-project-card__bottom small{

    color:
        var(--mdng-red-soft);

    font-size:14px;

    font-weight:800;

    letter-spacing:.07em;

}


.mdn-project-card__bottom strong{

    margin-top:5px;

    color:#fff;

    font-size:25px;

    font-weight:800;

}


.mdn-project-card__bottom > span{

    margin-top:13px;

    display:inline-flex;

    align-items:center;

    gap:9px;

    color:#fff;

    font-size:14px;

    font-weight:700;

}


.mdn-project-card__bottom > span i{

    transition:
        transform .3s ease;

}


.mdn-project-card__button:hover
.mdn-project-card__bottom > span i{

    transform:
        translateX(4px);

}


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

.mdn-projects__footer{

    margin-top:35px;

    display:grid;

    grid-template-columns:
        auto 1fr auto;

    align-items:center;

    gap:27px;

}


/* ============================================================
   COUNTER
============================================================ */

.mdn-projects__counter{

    display:flex;

    align-items:center;

    gap:10px;

}


.mdn-projects__counter strong{

    color:
        var(--mdng-red);

    font-size:20px;

    font-weight:800;

}


.mdn-projects__counter span{

    width:32px;
    height:1px;

    background:
        #c6d0dc;

}


.mdn-projects__counter small{

    color:
        var(--mdng-muted);

    font-size:14px;

}


/* ============================================================
   PROGRESS
============================================================ */

.mdn-projects__progress{

    width:100%;
    height:3px;

    overflow:hidden;

    border-radius:20px;

    background:
        #dde5ed;

}


.mdn-projects__progress span{

    width:20%;
    height:100%;

    display:block;

    border-radius:20px;

    background:
        linear-gradient(
            90deg,
            #2478ff,
            #ff1834
        );

    transition:
        width .4s ease,
        transform .5s ease;

}


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

.mdn-projects__view-all{

    min-height:54px;

    padding:
        0 21px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    border-radius:12px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #d80b20
        );

    box-shadow:
        0 12px 30px rgba(255,24,52,.18);

    text-decoration:none;

    font-size:14px;

    font-weight:800;

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.mdn-projects__view-all:hover{

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 38px rgba(255,24,52,.27);

}


/* ============================================================
   EMPTY
============================================================ */

.mdn-projects__empty{

    min-height:260px;

    padding:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:22px;

    border:
        1px dashed #cbd5e1;

    border-radius:20px;

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

}


.mdn-projects__empty > span{

    width:65px;
    height:65px;

    flex:0 0 65px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    color:#fff;

    background:
        var(--mdng-navy);

    font-size:21px;

}


.mdn-projects__empty h3{

    margin:
        0 0 7px;

    color:
        var(--mdng-navy);

    font-size:24px;

}


.mdn-projects__empty p{

    margin:0;

    color:
        var(--mdng-text);

    font-size:14px;

}


/* ============================================================
   LIGHTBOX
============================================================ */

.mdn-project-lightbox{

    position:fixed;

    inset:0;

    z-index:10050;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:30px;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .3s ease,
        visibility .3s ease;

}


.mdn-project-lightbox.is-open{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}


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

.mdn-project-lightbox__overlay{

    position:absolute;

    inset:0;

    padding:0;

    border:0;

    background:
        rgba(1,5,13,.91);

    backdrop-filter:
        blur(12px);

    cursor:pointer;

}


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

.mdn-project-lightbox__content{

    width:
        min(
            1250px,
            92vw
        );

    height:
        min(
            820px,
            86vh
        );

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:center;

}


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

.mdn-project-lightbox__image{

    width:100%;
    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

}


.mdn-project-lightbox__image img{

    max-width:100%;
    max-height:100%;

    object-fit:contain;

    border-radius:15px;

    box-shadow:
        0 30px 80px rgba(0,0,0,.50);

}


/* ============================================================
   LIGHTBOX CLOSE
============================================================ */

.mdn-project-lightbox__close{

    width:48px;
    height:48px;

    position:absolute;

    top:-10px;
    right:-10px;

    z-index:4;

    display:flex;

    align-items:center;

    justify-content:center;

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

    border-radius:50%;

    color:#fff;

    background:
        var(--mdng-red);

    cursor:pointer;

    font-size:18px;

}


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

.mdn-project-lightbox__arrow{

    width:50px;
    height:50px;

    position:absolute;

    z-index:4;

    top:50%;

    transform:
        translateY(-50%);

    display:flex;

    align-items:center;

    justify-content:center;

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

    border-radius:50%;

    color:#fff;

    background:
        rgba(2,9,22,.72);

    cursor:pointer;

}


.mdn-project-lightbox__arrow--prev{

    left:-70px;

}


.mdn-project-lightbox__arrow--next{

    right:-70px;

}


/* ============================================================
   LIGHTBOX COUNTER
============================================================ */

.mdn-project-lightbox__counter{

    position:absolute;

    left:50%;
    bottom:-45px;

    transform:
        translateX(-50%);

    color:#fff;

    font-size:14px;

    font-weight:700;

}


/* ============================================================
   BODY LOCK
============================================================ */

body.mdn-lightbox-open{

    overflow:hidden;

}


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

@media(max-width:1050px){

    .mdn-projects{

        padding:
            95px 0;

    }


    .mdn-projects__container{

        width:
            calc(100% - 46px);

    }


    .mdn-projects__header{

        grid-template-columns:1fr;

        gap:25px;

    }


    .mdn-projects__header-right p{

        max-width:800px;

    }


    .mdn-project-card{

        flex:
            0 0
            calc(
                (100% - 18px) / 2
            );

    }


    .mdn-project-lightbox__arrow--prev{

        left:15px;

    }


    .mdn-project-lightbox__arrow--next{

        right:15px;

    }

}


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

@media(max-width:700px){

    .mdn-projects{

        padding:
            78px 0;

    }


    .mdn-projects__container{

        width:
            calc(100% - 30px);

    }


    .mdn-projects__title{

        font-size:
            clamp(
                37px,
                10vw,
                50px
            );

    }


    .mdn-projects__header-right p{

        font-size:15px;

        text-align:left;

    }


    .mdn-project-card{

        flex:
            0 0
            88%;

        height:470px;

    }


    .mdn-projects__footer{

        grid-template-columns:
            auto 1fr;

    }


    .mdn-projects__view-all{

        grid-column:
            1 / -1;

        width:100%;

    }


    .mdn-project-lightbox{

        padding:14px;

    }


    .mdn-project-lightbox__content{

        width:100%;

        height:82vh;

    }


    .mdn-project-lightbox__close{

        top:5px;
        right:5px;

    }


    .mdn-project-lightbox__arrow{

        width:44px;
        height:44px;

    }


    .mdn-project-lightbox__arrow--prev{

        left:5px;

    }


    .mdn-project-lightbox__arrow--next{

        right:5px;

    }

}


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

@media(max-width:430px){

    .mdn-project-card{

        flex-basis:92%;

        height:440px;

    }


    .mdn-project-card__bottom strong{

        font-size:22px;

    }

}


/* ============================================================
   MDN GENERAL CONTRACTOR LLC
   PARALLAX BACKGROUNDS — SERVICES + PROJECTS
   ------------------------------------------------------------
   - Services: fondo fotográfico oscuro con parallax.
   - Projects: fondo fotográfico claro con parallax.
   - Desktop: background-attachment: fixed.
   - Tablet/mobile: fallback estable para evitar saltos en iOS.
   - No requiere modificar el HTML existente.
============================================================ */


/* ============================================================
   SECTION 03 — SERVICES PARALLAX
============================================================ */

.mdn-services-home{
    position:relative;
    isolation:isolate;
    background:#020916;
}

.mdn-services-home__background{
    position:absolute;
    inset:0;
    z-index:0;

    background-image:
        url("https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=2400&q=90");

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

    /* PARALLAX DESKTOP */
    background-attachment:fixed;

    transform:none;
    pointer-events:none;
}

.mdn-services-home__overlay{
    z-index:1;

    background:
        linear-gradient(
            90deg,
            rgba(1,5,13,.96) 0%,
            rgba(3,17,39,.91) 35%,
            rgba(4,23,50,.80) 65%,
            rgba(2,9,22,.88) 100%
        ),
        linear-gradient(
            0deg,
            rgba(1,5,13,.94) 0%,
            rgba(1,5,13,.34) 50%,
            rgba(1,5,13,.67) 100%
        );

    pointer-events:none;
}

.mdn-services-home__grid{
    z-index:2;
}

.mdn-services-home__glow{
    z-index:3;
}

.mdn-services-home__container{
    position:relative;
    z-index:10;
}


/* ============================================================
   PROJECTS GALLERY — LIGHT PARALLAX BACKGROUND
============================================================ */

.mdn-projects{
    position:relative;
    isolation:isolate;

    /* fallback mientras carga la imagen */
    background:#f5f8fc;
}

.mdn-projects__background{
    position:absolute;
    inset:0;
    z-index:0;

    width:auto;
    height:auto;

    right:auto;
    top:auto;

    border:0;
    border-radius:0;

    background-image:
        url("https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=2400&q=90");

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

    /* PARALLAX DESKTOP */
    background-attachment:fixed;

    pointer-events:none;
}

/*
 * Capa clara sobre la fotografía.
 * Mantiene el aspecto luminoso de la galería y deja ver el fondo.
 */
.mdn-projects__background::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.93) 0%,
            rgba(248,250,253,.88) 48%,
            rgba(239,244,249,.84) 100%
        ),
        radial-gradient(
            circle at 8% 15%,
            rgba(36,120,255,.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 94% 88%,
            rgba(255,24,52,.07),
            transparent 32%
        );
}

.mdn-projects__grid{
    z-index:1;

    opacity:.42;

    background-image:
        linear-gradient(
            rgba(6,26,56,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(6,26,56,.035) 1px,
            transparent 1px
        );
}

.mdn-projects::before{
    z-index:3;
}

.mdn-projects__container{
    position:relative;
    z-index:5;
}


/* ============================================================
   EXTRA DEPTH / PARALLAX VISUAL POLISH
============================================================ */

.mdn-services-home__background,
.mdn-projects__background{
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}


/* ============================================================
   TABLET / MOBILE PARALLAX FALLBACK
   ------------------------------------------------------------
   background-attachment: fixed genera saltos en varios navegadores
   móviles, especialmente Safari/iOS. En pantallas pequeñas usamos
   scroll normal para conservar fluidez y estabilidad.
============================================================ */

@media (max-width:1050px){

    .mdn-services-home__background,
    .mdn-projects__background{
        background-attachment:scroll;
    }

    .mdn-services-home__background{
        background-position:center center;
    }

    .mdn-projects__background{
        background-position:center center;
    }

}


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

@media (max-width:700px){

    .mdn-services-home__background{
        background-position:58% center;
    }

    .mdn-projects__background{
        background-position:center center;
    }

    .mdn-projects__background::after{
        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,.95) 0%,
                rgba(248,250,253,.92) 52%,
                rgba(239,244,249,.89) 100%
            );
    }

}


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

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

    .mdn-services-home__background,
    .mdn-projects__background{
        background-attachment:scroll !important;
    }

}



/* ============================================================
   MDN GENERAL CONTRACTOR LLC
   HOME — PREMIUM CTA PARALLAX
============================================================ */

:root{

    --mdnc-navy-1000:#01050d;
    --mdnc-navy-950:#020916;
    --mdnc-navy-900:#031127;
    --mdnc-navy-850:#061a38;
    --mdnc-navy-800:#08234b;

    --mdnc-red-dark:#9c0715;
    --mdnc-red:#d80b20;
    --mdnc-red-bright:#ff1834;
    --mdnc-red-soft:#ff5267;

    --mdnc-blue:#2478ff;
    --mdnc-blue-soft:#5b9cff;

    --mdnc-white:#ffffff;
    --mdnc-gray:#c4ceda;
    --mdnc-muted:#94a2b4;

    --mdnc-container:1480px;

}


/* ============================================================
   RESET
============================================================ */

.mdn-cta-parallax,
.mdn-cta-parallax *{
    box-sizing:border-box;
}


/* ============================================================
   MAIN SECTION
============================================================ */

.mdn-cta-parallax{

    width:100%;

    min-height:720px;

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    padding:115px 0;

    color:#ffffff;

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

    font-size:14px;


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

    background-image:
        url("https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=2200&q=90");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    background-attachment:fixed;

}


/* ============================================================
   TOP ACCENT
============================================================ */

.mdn-cta-parallax::before{

    content:"";

    position:absolute;

    z-index:8;

    top:0;
    left:0;

    width:100%;
    height:3px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #2478ff 17%,
            #ff1834 52%,
            #2478ff 84%,
            transparent 100%
        );

}


/* ============================================================
   DECORATIVE DIAGONAL
============================================================ */

.mdn-cta-parallax::after{

    content:"";

    width:2px;
    height:950px;

    position:absolute;

    z-index:5;

    right:17%;
    top:-260px;

    transform:rotate(29deg);

    pointer-events:none;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,24,52,.75),
            transparent
        );

    box-shadow:
        0 0 22px rgba(255,24,52,.24);

}


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

.mdn-cta-parallax__overlay{

    position:absolute;

    inset:0;

    z-index:1;

    background:

        linear-gradient(
            90deg,
            rgba(1,5,13,.96) 0%,
            rgba(2,9,22,.91) 35%,
            rgba(3,17,39,.76) 65%,
            rgba(2,9,22,.84) 100%
        ),

        linear-gradient(
            0deg,
            rgba(1,5,13,.90) 0%,
            rgba(2,9,22,.25) 47%,
            rgba(2,9,22,.63) 100%
        );

}


/* ============================================================
   GRID TEXTURE
============================================================ */

.mdn-cta-parallax__grid{

    position:absolute;

    inset:0;

    z-index:2;

    pointer-events:none;

    opacity:.23;

    background-image:

        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size:
        58px 58px;

}


/* ============================================================
   GLOWS
============================================================ */

.mdn-cta-parallax__glow{

    position:absolute;

    z-index:3;

    border-radius:50%;

    pointer-events:none;

    filter:blur(25px);

}


.mdn-cta-parallax__glow--red{

    width:550px;
    height:550px;

    top:-330px;
    right:-210px;

    background:
        radial-gradient(
            circle,
            rgba(255,24,52,.30),
            transparent 68%
        );

}


.mdn-cta-parallax__glow--blue{

    width:500px;
    height:500px;

    bottom:-330px;
    left:-280px;

    background:
        radial-gradient(
            circle,
            rgba(36,120,255,.20),
            transparent 68%
        );

}


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

.mdn-cta-parallax__container{

    width:
        min(
            var(--mdnc-container),
            calc(100% - 70px)
        );

    margin:0 auto;

    position:relative;

    z-index:10;

    display:grid;

    grid-template-columns:
        minmax(0,1.12fr)
        minmax(360px,.70fr);

    align-items:center;

    gap:
        clamp(
            60px,
            7vw,
            110px
        );

}


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

.mdn-cta-parallax__content{

    max-width:850px;

}


/* ============================================================
   EYEBROW
============================================================ */

.mdn-cta-parallax__eyebrow{

    margin-bottom:18px;

    display:flex;

    align-items:center;

    gap:12px;

    color:
        var(--mdnc-red-soft);

    font-size:14px;

    font-weight:800;

    letter-spacing:.09em;

    text-transform:uppercase;

}


.mdn-cta-parallax__eyebrow > span{

    width:46px;
    height:2px;

    position:relative;

    flex:0 0 46px;

    background:
        var(--mdnc-red-bright);

    box-shadow:
        0 0 12px rgba(255,24,52,.45);

}


.mdn-cta-parallax__eyebrow > span::after{

    content:"";

    width:7px;
    height:7px;

    position:absolute;

    right:0;
    top:50%;

    transform:
        translateY(-50%);

    border-radius:50%;

    background:
        var(--mdnc-red-bright);

}


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

.mdn-cta-parallax__title{

    max-width:850px;

    margin:
        0 0 26px;

    color:#ffffff;

    font-size:
        clamp(
            45px,
            5vw,
            76px
        );

    line-height:.99;

    letter-spacing:-.05em;

    font-weight:800;

}


.mdn-cta-parallax__title span{

    display:block;

    margin-top:8px;

    color:
        var(--mdnc-red-bright);

    text-shadow:
        0 0 35px rgba(255,24,52,.18);

}


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

.mdn-cta-parallax__description{

    max-width:760px;

    margin:
        0 0 29px;

    padding-left:20px;

    position:relative;

    color:#c5d0dd;

    font-size:16px;

    line-height:1.85;

    text-align:justify;

}


.mdn-cta-parallax__description::before{

    content:"";

    width:3px;

    position:absolute;

    left:0;
    top:5px;
    bottom:5px;

    border-radius:10px;

    background:
        linear-gradient(
            to bottom,
            var(--mdnc-red-bright),
            rgba(255,24,52,.12)
        );

}


/* ============================================================
   SERVICE CHIPS
============================================================ */

.mdn-cta-parallax__services{

    max-width:760px;

    display:flex;

    flex-wrap:wrap;

    gap:9px;

}


.mdn-cta-parallax__services > span{

    min-height:39px;

    padding:
        0 13px;

    display:inline-flex;

    align-items:center;

    gap:8px;

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

    border-radius:30px;

    color:#e3e9f0;

    background:
        rgba(2,9,22,.48);

    backdrop-filter:
        blur(10px);

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

    font-size:14px;

    font-weight:650;

}


.mdn-cta-parallax__services i{

    width:21px;
    height:21px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    color:#ffffff;

    background:
        rgba(255,24,52,.85);

    font-size:9px;

}


/* ============================================================
   ACTIONS
============================================================ */

.mdn-cta-parallax__actions{

    margin-top:31px;

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:11px;

}


/* ============================================================
   BUTTON BASE
============================================================ */

.mdn-cta-parallax__button{

    min-height:59px;

    padding:
        0 23px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:11px;

    border-radius:13px;

    color:#ffffff;

    text-decoration:none;

    font-size:14px;

    font-weight:800;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease,
        border-color .3s ease;

}


/* ============================================================
   PRIMARY BUTTON
============================================================ */

.mdn-cta-parallax__button--primary{

    position:relative;

    overflow:hidden;

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

    background:
        linear-gradient(
            135deg,
            #ff5267 0%,
            #ff1834 35%,
            #d80b20 70%,
            #9c0715 100%
        );

    box-shadow:
        0 17px 42px rgba(255,24,52,.26);

}


.mdn-cta-parallax__button--primary::before{

    content:"";

    width:34px;
    height:190%;

    position:absolute;

    top:-45%;
    left:-75px;

    transform:
        rotate(25deg);

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

    transition:
        left .65s ease;

}


.mdn-cta-parallax__button--primary:hover{

    transform:
        translateY(-4px);

    box-shadow:
        0 23px 52px rgba(255,24,52,.35);

}


.mdn-cta-parallax__button--primary:hover::before{

    left:130%;

}


.mdn-cta-parallax__button--primary > *{

    position:relative;

    z-index:2;

}


/* ============================================================
   GLASS BUTTON
============================================================ */

.mdn-cta-parallax__button--glass{

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

    background:
        rgba(3,17,39,.55);

    backdrop-filter:
        blur(14px);

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

}


.mdn-cta-parallax__button--glass > i{

    width:34px;
    height:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:9px;

    background:
        linear-gradient(
            135deg,
            #2478ff,
            #1255b8
        );

}


.mdn-cta-parallax__button--glass:hover{

    transform:
        translateY(-4px);

    border-color:
        rgba(36,120,255,.45);

    background:
        rgba(6,26,56,.78);

}


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

.mdn-cta-parallax__contact{

    width:100%;

    max-width:480px;

    margin-left:auto;

    padding:30px;

    position:relative;

    overflow:hidden;

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

    border-radius:23px;

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(255,24,52,.18),
            transparent 34%
        ),

        radial-gradient(
            circle at 0% 100%,
            rgba(36,120,255,.12),
            transparent 36%
        ),

        linear-gradient(
            145deg,
            rgba(3,17,39,.88),
            rgba(1,5,13,.78)
        );

    backdrop-filter:
        blur(20px);

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

    box-shadow:
        0 35px 80px rgba(0,5,20,.40);

}


/* top accent */

.mdn-cta-parallax__contact::before{

    content:"";

    width:130px;
    height:3px;

    position:absolute;

    top:0;
    left:30px;

    background:
        linear-gradient(
            90deg,
            #ff1834,
            #2478ff
        );

    box-shadow:
        0 0 15px rgba(255,24,52,.45);

}


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

.mdn-cta-parallax__contact-top{

    display:flex;

    align-items:center;

    gap:15px;

}


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

.mdn-cta-parallax__contact-logo{

    width:62px;
    height:62px;

    flex:0 0 62px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:15px;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #d80b20
        );

    box-shadow:
        0 12px 30px rgba(255,24,52,.25);

    font-size:19px;

    font-weight:800;

}


/* ============================================================
   CONTACT TOP TEXT
============================================================ */

.mdn-cta-parallax__contact-top > div{

    display:flex;

    flex-direction:column;

}


.mdn-cta-parallax__contact-top small{

    color:
        var(--mdnc-red-soft);

    font-size:14px;

    font-weight:800;

    letter-spacing:.055em;

}


.mdn-cta-parallax__contact-top strong{

    margin-top:5px;

    color:#ffffff;

    font-size:17px;

    line-height:1.35;

}


/* ============================================================
   DIVIDER
============================================================ */

.mdn-cta-parallax__line{

    width:100%;
    height:1px;

    margin:
        24px 0 15px;

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

}


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

.mdn-cta-parallax__contact-item{

    width:100%;

    min-height:72px;

    padding:
        10px 9px;

    display:grid;

    grid-template-columns:
        48px 1fr auto;

    align-items:center;

    gap:12px;

    border-bottom:
        1px solid rgba(255,255,255,.075);

    color:#ffffff;

    text-decoration:none;

    transition:
        background .3s ease,
        padding .3s ease;

}


a.mdn-cta-parallax__contact-item:hover{

    padding-left:14px;

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

}


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

.mdn-cta-parallax__contact-icon{

    width:48px;
    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:
        1px solid rgba(255,24,52,.20);

    border-radius:12px;

    color:
        var(--mdnc-red-bright);

    background:
        rgba(255,24,52,.08);

    font-size:15px;

}


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

.mdn-cta-parallax__contact-item > div{

    min-width:0;

    display:flex;

    flex-direction:column;

}


.mdn-cta-parallax__contact-item small{

    color:
        var(--mdnc-muted);

    font-size:14px;

}


.mdn-cta-parallax__contact-item strong{

    margin-top:3px;

    overflow:hidden;

    color:#ffffff;

    font-size:14px;

    font-weight:800;

    text-overflow:ellipsis;

}


.mdn-cta-parallax__contact-item > i{

    color:
        #718198;

    font-size:14px;

    transition:
        transform .3s ease,
        color .3s ease;

}


a.mdn-cta-parallax__contact-item:hover > i{

    color:
        var(--mdnc-red-bright);

    transform:
        translateX(4px);

}


/* ============================================================
   LANGUAGE
============================================================ */

.mdn-cta-parallax__language{

    margin-top:18px;

    padding:15px;

    display:flex;

    align-items:center;

    gap:12px;

    border:
        1px solid rgba(36,120,255,.16);

    border-radius:13px;

    background:
        rgba(36,120,255,.06);

}


.mdn-cta-parallax__language > span{

    width:40px;
    height:40px;

    flex:0 0 40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:10px;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #2478ff,
            #1255b8
        );

}


.mdn-cta-parallax__language > div{

    display:flex;

    flex-direction:column;

}


.mdn-cta-parallax__language small{

    color:
        #96a7bb;

    font-size:14px;

}


.mdn-cta-parallax__language strong{

    margin-top:2px;

    color:#ffffff;

    font-size:14px;

}


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

.mdn-cta-parallax__contact-button{

    width:100%;

    min-height:57px;

    margin-top:19px;

    padding:
        0 10px 0 19px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

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

    border-radius:12px;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #ff1834 40%,
            #d80b20
        );

    box-shadow:
        0 13px 32px rgba(255,24,52,.20);

    text-decoration:none;

    font-size:14px;

    font-weight:800;

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.mdn-cta-parallax__contact-button > span{

    width:39px;
    height:39px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:9px;

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

}


.mdn-cta-parallax__contact-button:hover{

    transform:
        translateY(-3px);

    box-shadow:
        0 19px 42px rgba(255,24,52,.30);

}


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

@media(max-width:1100px){

    .mdn-cta-parallax{

        min-height:auto;

        padding:
            95px 0;

    }


    .mdn-cta-parallax__container{

        width:
            calc(100% - 46px);

        grid-template-columns:
            1fr;

        gap:55px;

    }


    .mdn-cta-parallax__contact{

        max-width:700px;

        margin:
            0;

    }

}


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

@media(max-width:760px){

    /*
     * Safari/iOS y varios navegadores móviles
     * no manejan bien background-attachment: fixed.
     *
     * Dejamos la imagen estable para evitar saltos.
     */

    .mdn-cta-parallax{

        min-height:auto;

        padding:
            78px 0;

        background-attachment:
            scroll;

        background-position:
            60% center;

    }


    .mdn-cta-parallax__container{

        width:
            calc(100% - 30px);

        gap:45px;

    }


    .mdn-cta-parallax__overlay{

        background:

            linear-gradient(
                90deg,
                rgba(1,5,13,.94),
                rgba(3,17,39,.78)
            ),

            linear-gradient(
                0deg,
                rgba(1,5,13,.90),
                rgba(1,5,13,.35)
            );

    }


    .mdn-cta-parallax__title{

        font-size:
            clamp(
                39px,
                11vw,
                55px
            );

    }


    .mdn-cta-parallax__description{

        font-size:15px;

        text-align:left;

    }


    .mdn-cta-parallax__services{

        gap:7px;

    }


    .mdn-cta-parallax__actions{

        width:100%;

        align-items:stretch;

        flex-direction:column;

    }


    .mdn-cta-parallax__button{

        width:100%;

    }


    .mdn-cta-parallax__contact{

        padding:24px;

    }

}


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

@media(max-width:480px){

    .mdn-cta-parallax{

        padding:
            68px 0;

    }


    .mdn-cta-parallax__container{

        width:
            calc(100% - 24px);

    }


    .mdn-cta-parallax__title{

        font-size:38px;

    }


    .mdn-cta-parallax__services{

        align-items:flex-start;

    }


    .mdn-cta-parallax__services > span{

        min-height:37px;

    }


    .mdn-cta-parallax__contact{

        padding:
            22px 17px;

        border-radius:18px;

    }


    .mdn-cta-parallax__contact-logo{

        width:54px;
        height:54px;

        flex-basis:54px;

    }


    .mdn-cta-parallax__contact-top strong{

        font-size:15px;

    }


    .mdn-cta-parallax__contact-item{

        grid-template-columns:
            44px 1fr auto;

        gap:10px;

    }


    .mdn-cta-parallax__contact-icon{

        width:44px;
        height:44px;

    }


    .mdn-cta-parallax__contact-item strong{

        white-space:normal;

        word-break:break-word;

    }

}


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

.mdn-cta-parallax a:focus-visible{

    outline:
        2px solid var(--mdnc-red-bright);

    outline-offset:4px;

}


/* ============================================================
   REDUCED MOTION / PARALLAX OFF
============================================================ */

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

    .mdn-cta-parallax{

        background-attachment:
            scroll;

    }


    .mdn-cta-parallax *,
    .mdn-cta-parallax *::before,
    .mdn-cta-parallax *::after{

        transition-duration:
            .01ms !important;

    }

}

/* ============================================================
   MDN GENERAL CONTRACTOR LLC
   PREMIUM COMPLETE FOOTER
   BACKGROUND + PARALLAX
============================================================ */

:root{

    --mdnf-navy-1000:#01050d;
    --mdnf-navy-950:#020916;
    --mdnf-navy-900:#031127;
    --mdnf-navy-850:#061a38;
    --mdnf-navy-800:#08234b;

    --mdnf-red-dark:#9c0715;
    --mdnf-red:#d80b20;
    --mdnf-red-bright:#ff1834;
    --mdnf-red-soft:#ff5267;

    --mdnf-blue:#2478ff;
    --mdnf-blue-soft:#5b9cff;

    --mdnf-white:#ffffff;
    --mdnf-soft:#edf2f8;

    --mdnf-gray:#b3bfce;
    --mdnf-muted:#8493a7;

    --mdnf-border:rgba(255,255,255,.10);

    --mdnf-container:1480px;

}


/* ============================================================
   RESET
============================================================ */

.mdn-footer,
.mdn-footer *{
    box-sizing:border-box;
}


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

.mdn-footer{

width:100%;

position:relative;

overflow:hidden;

color:#ffffff;

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

font-size:14px;


    /* ========================================================
       BACKGROUND IMAGE + PARALLAX
    ======================================================== */

background-image:
        url("https://images.unsplash.com/photo-1487958449943-2429e8be8625?auto=format&fit=crop&w=2200&q=90");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

background-attachment:fixed;
}


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

.mdn-footer__overlay{

position:absolute;

inset:0;

z-index:1;

opacity: .9;

pointer-events:none;

background:

        linear-gradient(
            90deg,
            rgba(1,5,13,.98) 0%,
            rgba(2,9,22,.94) 35%,
            rgba(3,17,39,.90) 67%,
            rgba(1,5,13,.96) 100%
        ),

        linear-gradient(
            0deg,
            rgba(1,5,13,.99) 0%,
            rgba(1,5,13,.74) 48%,
            rgba(2,9,22,.86) 100%
        );
}


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

.mdn-footer__grid{

    position:absolute;

    inset:0;

    z-index:2;

    pointer-events:none;

    opacity:.22;

    background-image:

        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size:
        58px 58px;

}


/* ============================================================
   GLOWS
============================================================ */

.mdn-footer__glow{

    position:absolute;

    z-index:3;

    border-radius:50%;

    pointer-events:none;

    filter:blur(30px);

}


.mdn-footer__glow--red{

    width:600px;
    height:600px;

    right:-320px;
    top:-250px;

    background:
        radial-gradient(
            circle,
            rgba(255,24,52,.24),
            transparent 68%
        );

}


.mdn-footer__glow--blue{

    width:540px;
    height:540px;

    left:-330px;
    bottom:-290px;

    background:
        radial-gradient(
            circle,
            rgba(36,120,255,.17),
            transparent 68%
        );

}


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

.mdn-footer__container{

    width:
        min(
            var(--mdnf-container),
            calc(100% - 70px)
        );

    margin:0 auto;

    position:relative;

    z-index:10;

}


/* ============================================================
   TOP CTA WRAPPER
============================================================ */

.mdn-footer__cta-wrap{

    position:relative;

    z-index:10;

    padding-top:75px;

}


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

.mdn-footer__cta{

    min-height:150px;

    padding:
        28px 34px;

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

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

    border-radius:22px;

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(255,24,52,.19),
            transparent 32%
        ),

        radial-gradient(
            circle at 0% 100%,
            rgba(36,120,255,.12),
            transparent 36%
        ),

        linear-gradient(
            135deg,
            rgba(3,17,39,.90),
            rgba(1,5,13,.80)
        );

    backdrop-filter:blur(18px);

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

    box-shadow:
        0 28px 70px rgba(0,5,20,.30);

}


/* Accent line */

.mdn-footer__cta::before{

    content:"";

    width:200px;
    height:3px;

    position:absolute;

    top:0;
    left:34px;

    background:
        linear-gradient(
            90deg,
            var(--mdnf-red-bright),
            var(--mdnf-blue),
            transparent
        );

}


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

.mdn-footer__cta-copy{

    display:flex;

    align-items:center;

    gap:19px;

}


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

.mdn-footer__cta-icon{

    width:70px;
    height:70px;

    flex:0 0 70px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    border-radius:18px;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #d80b20
        );

    box-shadow:
        0 15px 35px rgba(255,24,52,.23);

    font-size:23px;

}


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

.mdn-footer__cta-copy > div:last-child{

    display:flex;

    flex-direction:column;

}


.mdn-footer__cta-copy span{

    margin-bottom:6px;

    color:
        var(--mdnf-red-soft);

    font-size:14px;

    font-weight:800;

    letter-spacing:.09em;

}


.mdn-footer__cta-copy h2{

    margin:0;

    color:#ffffff;

    font-size:
        clamp(
            27px,
            2.5vw,
            39px
        );

    line-height:1.1;

    letter-spacing:-.035em;

    font-weight:700;

}


.mdn-footer__cta-copy h2 strong{

    color:
        var(--mdnf-red-bright);

    font-weight:800;

}


/* ============================================================
   CTA ACTIONS
============================================================ */

.mdn-footer__cta-actions{

    display:flex;

    align-items:center;

    gap:11px;

    flex:0 0 auto;

}


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

.mdn-footer__cta-phone{

    min-height:60px;

    padding:
        7px 18px 7px 8px;

    display:flex;

    align-items:center;

    gap:12px;

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

    border-radius:13px;

    color:#ffffff;

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

    text-decoration:none;

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease;

}


.mdn-footer__cta-phone:hover{

    transform:translateY(-3px);

    border-color:
        rgba(36,120,255,.38);

    background:
        rgba(36,120,255,.09);

}


.mdn-footer__cta-phone > span{

    width:44px;
    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:11px;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #2478ff,
            #1255b8
        );

    box-shadow:
        0 9px 24px rgba(36,120,255,.20);

}


.mdn-footer__cta-phone > div{

    display:flex;

    flex-direction:column;

}


.mdn-footer__cta-phone small{

    color:#95a4b7;

    font-size:14px;

}


.mdn-footer__cta-phone strong{

    margin-top:2px;

    color:#ffffff;

    font-size:16px;

    font-weight:800;

}


/* ============================================================
   CTA BUTTON
============================================================ */

.mdn-footer__cta-button{

    min-height:60px;

    padding:
        0 23px;

    position:relative;

    overflow:hidden;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:11px;

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

    border-radius:13px;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #ff5267 0%,
            #ff1834 38%,
            #d80b20 70%,
            #9c0715
        );

    box-shadow:
        0 15px 38px rgba(255,24,52,.25);

    text-decoration:none;

    font-size:14px;

    font-weight:800;

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.mdn-footer__cta-button::before{

    content:"";

    width:32px;
    height:190%;

    position:absolute;

    top:-45%;
    left:-70px;

    transform:rotate(24deg);

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

    transition:
        left .65s ease;

}


.mdn-footer__cta-button:hover{

    transform:translateY(-3px);

    box-shadow:
        0 22px 48px rgba(255,24,52,.35);

}


.mdn-footer__cta-button:hover::before{

    left:130%;

}


.mdn-footer__cta-button > *{

    position:relative;

    z-index:2;

}


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

.mdn-footer__main{

    position:relative;

    z-index:10;

    padding:
        75px 0 65px;

}


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

.mdn-footer__columns{

    display:grid;

    grid-template-columns:
        minmax(280px,1.2fr)
        minmax(160px,.65fr)
        minmax(300px,1.15fr)
        minmax(270px,.95fr);

    gap:
        clamp(
            35px,
            4vw,
            65px
        );

}


/* ============================================================
   COLUMN
============================================================ */

.mdn-footer__column{

    min-width:0;

}


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

.mdn-footer__logo{

    width:fit-content;

    display:flex;

    align-items:center;

    gap:13px;

    color:#ffffff;

    text-decoration:none;

}


/* Logo image */

.mdn-footer__logo-image{

width: 245px;

height: 80px;

display:flex;

filter: brightness(0)invert(1);

align-items:center;

justify-content:center;
}


.mdn-footer__logo-image img{

    width:100%;
    height:100%;

    display:block;

    object-fit:contain;

    filter:
        drop-shadow(
            0 8px 20px rgba(255,24,52,.16)
        );

}


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

.mdn-footer__logo-copy{

    display:flex;

    flex-direction:column;

}


.mdn-footer__logo-copy strong{

    color:#ffffff;

    font-size:28px;

    font-weight:800;

    line-height:1;

    letter-spacing:.02em;

}


.mdn-footer__logo-copy small{

    margin-top:5px;

    color:
        var(--mdnf-red-soft);

    font-size:14px;

    font-weight:700;

}


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

.mdn-footer__company-text{

    max-width:350px;

    margin:
        23px 0 0;

    color:
        var(--mdnf-gray);

    font-size:14px;

    line-height:1.8;

    text-align:justify;

}


/* ============================================================
   TAGS
============================================================ */

.mdn-footer__tags{

    margin-top:22px;

    display:flex;

    flex-wrap:wrap;

    gap:7px;

}


.mdn-footer__tags span{

    min-height:36px;

    padding:
        0 11px;

    display:inline-flex;

    align-items:center;

    gap:7px;

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

    border-radius:30px;

    color:#d6dee8;

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

    font-size:14px;

}


.mdn-footer__tags i{

    color:
        var(--mdnf-red-bright);

}


/* ============================================================
   SPANISH ASSISTANCE
============================================================ */

.mdn-footer__spanish{

    width:fit-content;

    margin-top:23px;

    padding:
        10px 14px 10px 9px;

    display:flex;

    align-items:center;

    gap:10px;

    border:
        1px solid rgba(36,120,255,.16);

    border-radius:12px;

    background:
        rgba(36,120,255,.06);

}


.mdn-footer__spanish > span{

    width:39px;
    height:39px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex:0 0 39px;

    border-radius:10px;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #2478ff,
            #1255b8
        );

}


.mdn-footer__spanish > div{

    display:flex;

    flex-direction:column;

}


.mdn-footer__spanish small{

    color:#8fa1b6;

    font-size:14px;

}


.mdn-footer__spanish strong{

    margin-top:2px;

    color:#ffffff;

    font-size:14px;

}


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

.mdn-footer__heading{

    min-height:64px;

    margin-bottom:21px;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

}


.mdn-footer__heading > span{

    width:37px;
    height:2px;

    margin-bottom:11px;

    position:relative;

    background:
        var(--mdnf-red-bright);

}


.mdn-footer__heading > span::after{

    content:"";

    width:7px;
    height:7px;

    position:absolute;

    right:0;
    top:50%;

    transform:
        translateY(-50%);

    border-radius:50%;

    background:
        var(--mdnf-red-bright);

}


.mdn-footer__heading h3{

    margin:0;

    color:#ffffff;

    font-size:18px;

    font-weight:800;

}


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

.mdn-footer__links{

    display:flex;

    flex-direction:column;

    gap:4px;

}


.mdn-footer__links a{

    min-height:42px;

    padding:
        0 5px;

    display:flex;

    align-items:center;

    gap:9px;

    border-bottom:
        1px solid rgba(255,255,255,.055);

    color:
        var(--mdnf-gray);

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    transition:
        color .3s ease,
        padding .3s ease,
        border-color .3s ease;

}


.mdn-footer__links a i{

    color:
        var(--mdnf-red);

    font-size:10px;

}


.mdn-footer__links a:hover{

    padding-left:10px;

    color:#ffffff;

    border-color:
        rgba(255,24,52,.16);

}


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

.mdn-footer__services{

    display:grid;

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

    gap:7px;

}


.mdn-footer__services a{

    min-height:51px;

    padding:
        7px 8px;

    display:flex;

    align-items:center;

    gap:9px;

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

    border-radius:10px;

    color:
        var(--mdnf-gray);

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

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    line-height:1.3;

    transition:
        color .3s ease,
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;

}


.mdn-footer__services a:hover{

    transform:
        translateY(-2px);

    color:#ffffff;

    border-color:
        rgba(255,24,52,.20);

    background:
        rgba(255,24,52,.06);

}


.mdn-footer__services a > span{

    width:34px;
    height:34px;

    flex:0 0 34px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:9px;

    color:
        var(--mdnf-red-soft);

    background:
        rgba(255,24,52,.07);

    font-size:13px;

}


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

.mdn-footer__contact{

    display:flex;

    flex-direction:column;

}


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

.mdn-footer__contact-item{

    min-height:71px;

    padding:
        10px 0;

    display:flex;

    align-items:center;

    gap:11px;

    border-bottom:
        1px solid rgba(255,255,255,.07);

    color:#ffffff;

    text-decoration:none;

}


.mdn-footer__contact-item > span{

    width:45px;
    height:45px;

    flex:0 0 45px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:
        1px solid rgba(255,24,52,.17);

    border-radius:11px;

    color:
        var(--mdnf-red-bright);

    background:
        rgba(255,24,52,.07);

}


.mdn-footer__contact-item > div{

    min-width:0;

    display:flex;

    flex-direction:column;

}


.mdn-footer__contact-item small{

    color:
        var(--mdnf-muted);

    font-size:14px;

}


.mdn-footer__contact-item strong{

    margin-top:3px;

    color:#ffffff;

    font-size:14px;

    font-weight:800;

    word-break:break-word;

}


.mdn-footer__contact-item em{

    margin-top:2px;

    color:
        var(--mdnf-red-soft);

    font-size:14px;

    font-style:normal;

    font-weight:700;

}


a.mdn-footer__contact-item{

    transition:
        padding .3s ease,
        background .3s ease;

}


a.mdn-footer__contact-item:hover{

    padding-left:7px;

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

}


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

.mdn-footer__contact-button{

    width:100%;

    min-height:54px;

    margin-top:18px;

    padding:
        0 9px 0 18px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

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

    border-radius:12px;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            rgba(255,24,52,.92),
            rgba(176,7,26,.95)
        );

    text-decoration:none;

    font-size:14px;

    font-weight:800;

    box-shadow:
        0 12px 30px rgba(255,24,52,.16);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.mdn-footer__contact-button i{

    width:37px;
    height:37px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:9px;

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

}


.mdn-footer__contact-button:hover{

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 38px rgba(255,24,52,.25);

}


/* ============================================================
   SERVICE STRIP
============================================================ */

.mdn-footer__service-strip{

    position:relative;

    z-index:10;

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

    border-bottom:
        1px solid rgba(255,255,255,.08);

    background:
        rgba(1,5,13,.52);

    backdrop-filter:
        blur(15px);

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

}


/* ============================================================
   SERVICE STRIP INNER
============================================================ */

.mdn-footer__service-strip-inner{

    min-height:78px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:
        13px 23px;

}


.mdn-footer__service-strip-inner > div{

    display:flex;

    align-items:center;

    gap:8px;

    color:#c4ceda;

    font-size:14px;

    font-weight:700;

}


.mdn-footer__service-strip-inner i{

    color:
        var(--mdnf-red-bright);

}


.mdn-footer__strip-dot{

    width:4px;
    height:4px;

    border-radius:50%;

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

}


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

.mdn-footer__bottom{

    position:relative;

    z-index:10;

    background:
        rgba(0,3,10,.78);

}


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

.mdn-footer__bottom-inner{

    min-height:83px;

    display:grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items:center;

    gap:25px;

}


/* Copyright */

.mdn-footer__bottom-inner p{

    margin:0;

    color:
        #8e9bad;

    font-size:14px;

    line-height:1.5;

}


.mdn-footer__bottom-inner p strong{

    color:#d7dee7;

}


/* ============================================================
   CENTER
============================================================ */

.mdn-footer__bottom-center{

    display:flex;

    align-items:center;

    gap:8px;

    color:
        #8391a4;

    font-size:14px;

}


.mdn-footer__bottom-center span{

    color:
        var(--mdnf-red-bright);

}


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

.mdn-footer__back-top{

    justify-self:end;

    min-height:42px;

    padding:
        0 7px 0 14px;

    display:inline-flex;

    align-items:center;

    gap:10px;

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

    border-radius:10px;

    color:
        #c5ced9;

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

    text-decoration:none;

    font-size:14px;

    font-weight:700;

    transition:
        color .3s ease,
        border-color .3s ease,
        transform .3s ease;

}


.mdn-footer__back-top i{

    width:30px;
    height:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:8px;

    color:#ffffff;

    background:
        var(--mdnf-red);

}


.mdn-footer__back-top:hover{

    transform:
        translateY(-3px);

    color:#ffffff;

    border-color:
        rgba(255,24,52,.24);

}


/* ============================================================
   LAPTOP
============================================================ */

@media(max-width:1250px){

    .mdn-footer__container{

        width:
            calc(100% - 50px);

    }


    .mdn-footer__columns{

        grid-template-columns:
            minmax(260px,1fr)
            minmax(140px,.6fr)
            minmax(280px,1fr)
            minmax(250px,.9fr);

        gap:35px;

    }


    .mdn-footer__services{

        grid-template-columns:1fr;

    }

}


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

@media(max-width:980px){

    .mdn-footer__cta{

        align-items:flex-start;

        flex-direction:column;

    }


    .mdn-footer__cta-actions{

        width:100%;

    }


    .mdn-footer__columns{

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

        gap:
            55px 45px;

    }


    .mdn-footer__services{

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

    }


    .mdn-footer__bottom-inner{

        grid-template-columns:
            1fr auto;

    }


    .mdn-footer__bottom-center{

        display:none;

    }

}


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

@media(max-width:700px){

    /*
     * Fixed backgrounds are unreliable on many
     * mobile browsers, especially Safari/iOS.
     */

    .mdn-footer{

        background-attachment:scroll;

        background-position:center;

    }


    .mdn-footer__container{

        width:
            calc(100% - 30px);

    }


    .mdn-footer__cta-wrap{

        padding-top:55px;

    }


    .mdn-footer__cta{

        min-height:auto;

        padding:
            24px 20px;

        border-radius:17px;

    }


    .mdn-footer__cta-copy{

        align-items:flex-start;

        flex-direction:column;

    }


    .mdn-footer__cta-icon{

        width:60px;
        height:60px;

        flex-basis:60px;

    }


    .mdn-footer__cta-copy h2{

        font-size:
            clamp(
                27px,
                8vw,
                36px
            );

    }


    .mdn-footer__cta-actions{

        align-items:stretch;

        flex-direction:column;

    }


    .mdn-footer__cta-phone,
    .mdn-footer__cta-button{

        width:100%;

    }


    /* MAIN */

    .mdn-footer__main{

        padding:
            65px 0 55px;

    }


    .mdn-footer__columns{

        grid-template-columns:
            1fr;

        gap:47px;

    }


    .mdn-footer__heading{

        min-height:auto;

    }


    .mdn-footer__company-text{

        max-width:100%;

        text-align:left;

    }


    .mdn-footer__services{

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

    }


    /* service strip */

    .mdn-footer__service-strip-inner{

        padding:
            20px 0;

        justify-content:flex-start;

    }


    .mdn-footer__strip-dot{

        display:none;

    }


    .mdn-footer__service-strip-inner > div{

        width:
            calc(50% - 12px);

    }


    /* BOTTOM */

    .mdn-footer__bottom-inner{

        min-height:auto;

        padding:
            25px 0;

        grid-template-columns:1fr;

        gap:18px;

    }


    .mdn-footer__back-top{

        justify-self:start;

    }

}


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

@media(max-width:480px){

    .mdn-footer__container{

        width:
            calc(100% - 24px);

    }


    .mdn-footer__services{

        grid-template-columns:1fr;

    }


    .mdn-footer__service-strip-inner > div{

        width:100%;

    }


    .mdn-footer__logo-image{

width: 217px;

height: 79px;

}


    .mdn-footer__logo-copy strong{

        font-size:25px;

    }


    .mdn-footer__cta{

        padding:
            22px 17px;

    }

}


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

.mdn-footer a:focus-visible{

    outline:
        2px solid var(--mdnf-red-bright);

    outline-offset:4px;

}


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

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

    .mdn-footer{

        background-attachment:scroll;

    }


    .mdn-footer *,
    .mdn-footer *::before,
    .mdn-footer *::after{

        transition-duration:.01ms !important;

    }

}


/* ============================================================
   MDN GENERAL CONTRACTOR LLC
   PROJECT LIGHTBOX / POPUP — FINAL REPAIR OVERRIDES
   ------------------------------------------------------------
   Este bloque se coloca al FINAL del CSS completo para:
   - mantener compatibilidad con el lightbox existente;
   - mostrar correctamente cualquier imagen cargada por PHP;
   - trabajar con el JS reparado que usa img.currentSrc / img.src;
   - mejorar cierre, flechas, contador y visualización responsive;
   - admitir opcionalmente loader, top bar y caption.
============================================================ */

.mdn-project-lightbox{
    position:fixed;
    inset:0;
    z-index:99999;

    width:100%;
    height:100dvh;

    padding:30px 88px;

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

    opacity:0;
    visibility:hidden;
    pointer-events:none;

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

    background:transparent;

    transition:
        opacity .30s ease,
        visibility .30s ease;
}


.mdn-project-lightbox.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}


/* ============================================================
   BACKDROP
============================================================ */

.mdn-project-lightbox__overlay{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    padding:0;
    margin:0;

    border:0;

    cursor:pointer;

    background:
        radial-gradient(
            circle at 92% 5%,
            rgba(255,24,52,.14),
            transparent 30%
        ),
        radial-gradient(
            circle at 5% 95%,
            rgba(36,120,255,.12),
            transparent 30%
        ),
        rgba(1,5,13,.94);

    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);
}


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

.mdn-project-lightbox__content{
    width:min(1400px,100%);
    height:min(860px,88dvh);

    position:relative;
    z-index:3;

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

    pointer-events:auto;
}


/* ============================================================
   OPTIONAL TOP AREA
   Compatible aunque el HTML actual no lo incluya.
============================================================ */

.mdn-project-lightbox__top{
    position:absolute;
    z-index:20;

    top:0;
    left:0;
    right:0;

    min-height:52px;

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

    gap:20px;

    pointer-events:none;
}


.mdn-project-lightbox__brand{
    display:flex;
    align-items:center;
    gap:11px;

    pointer-events:auto;
}


.mdn-project-lightbox__brand > span{
    width:48px;
    height:48px;

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

    border-radius:12px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #d80b20
        );

    box-shadow:
        0 10px 26px rgba(255,24,52,.25);

    font-size:15px;
    font-weight:800;
}


.mdn-project-lightbox__brand > div{
    display:flex;
    flex-direction:column;
}


.mdn-project-lightbox__brand small{
    color:#ff5267;
    font-size:14px;
    font-weight:800;
}


.mdn-project-lightbox__brand strong{
    margin-top:2px;

    color:#fff;

    font-size:14px;
    font-weight:800;
}


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

.mdn-project-lightbox__image{
    width:100%;
    height:calc(100% - 100px);

    position:relative;

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

    overflow:hidden;

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

    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            rgba(3,17,39,.86),
            rgba(1,5,13,.82)
        );

    box-shadow:
        0 35px 90px rgba(0,0,0,.48);
}


/*
 * IMPORTANTE:
 * No usamos width:100% + height:100% al mismo tiempo.
 * La imagen conserva su proporción real dentro del popup.
 */
.mdn-project-lightbox__image img{
    display:block;

    width:auto;
    height:auto;

    max-width:100%;
    max-height:100%;

    object-fit:contain;
    object-position:center;

    border-radius:15px;

    opacity:1;

    transform:scale(1);

    box-shadow:
        0 24px 70px rgba(0,0,0,.34);

    transition:
        opacity .30s ease,
        transform .38s ease;
}


/*
 * Compatible con el JS reparado.
 */
.mdn-project-lightbox__image img.is-loaded{
    opacity:1;
    transform:scale(1);
}


/* ============================================================
   OPTIONAL LOADER
============================================================ */

.mdn-project-lightbox__loader{
    position:absolute;
    z-index:10;

    inset:0;

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

    opacity:0;
    visibility:hidden;

    pointer-events:none;

    background:
        rgba(2,9,22,.18);

    transition:
        opacity .2s ease,
        visibility .2s ease;
}


.mdn-project-lightbox__loader.is-visible{
    opacity:1;
    visibility:visible;
}


.mdn-project-lightbox__loader i{
    color:#ff1834;

    font-size:30px;

    animation:
        mdnProjectLightboxSpin .8s linear infinite;
}


@keyframes mdnProjectLightboxSpin{
    to{
        transform:rotate(360deg);
    }
}


/* ============================================================
   CLOSE BUTTON
============================================================ */

.mdn-project-lightbox__close{
    width:50px;
    height:50px;

    position:absolute;

    top:-12px;
    right:-12px;

    z-index:30;

    padding:0;

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

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

    border-radius:50%;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #d80b20
        );

    box-shadow:
        0 12px 30px rgba(255,24,52,.25);

    cursor:pointer;

    font-size:18px;

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


.mdn-project-lightbox__close:hover{
    transform:rotate(90deg);

    background:#ff1834;

    box-shadow:
        0 15px 36px rgba(255,24,52,.35);
}


/* If the enhanced top wrapper is present */
.mdn-project-lightbox__top
.mdn-project-lightbox__close{
    position:relative;

    top:auto;
    right:auto;

    pointer-events:auto;
}


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

.mdn-project-lightbox__arrow{
    width:56px;
    height:56px;

    position:absolute;

    z-index:25;

    top:50%;

    padding:0;

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

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

    border-radius:50%;

    color:#fff;

    background:
        rgba(3,17,39,.80);

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

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

    cursor:pointer;

    font-size:15px;

    transform:
        translateY(-50%);

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease;
}


.mdn-project-lightbox__arrow:hover{
    border-color:
        rgba(255,24,52,.55);

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #d80b20
        );
}


.mdn-project-lightbox__arrow--prev{
    left:-73px;
}


.mdn-project-lightbox__arrow--prev:hover{
    transform:
        translateY(-50%)
        translateX(-3px);
}


.mdn-project-lightbox__arrow--next{
    right:-73px;
}


.mdn-project-lightbox__arrow--next:hover{
    transform:
        translateY(-50%)
        translateX(3px);
}


/* ============================================================
   COUNTER
   Compatible con:
   01 / 10
   y con estructura strong/span/small opcional.
============================================================ */

.mdn-project-lightbox__counter{
    position:absolute;

    left:50%;
    bottom:-42px;

    z-index:20;

    transform:
        translateX(-50%);

    display:flex;
    align-items:center;

    gap:8px;

    color:#fff;

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


.mdn-project-lightbox__counter strong{
    color:#ff1834;

    font-size:20px;
    font-weight:800;
}


.mdn-project-lightbox__counter span{
    color:
        rgba(255,255,255,.35);
}


.mdn-project-lightbox__counter small{
    color:#98a6b8;

    font-size:14px;
}


/* ============================================================
   OPTIONAL BOTTOM AREA
============================================================ */

.mdn-project-lightbox__bottom{
    min-height:50px;

    position:absolute;

    left:0;
    right:0;
    bottom:0;

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

    gap:20px;

    pointer-events:none;
}


.mdn-project-lightbox__bottom
.mdn-project-lightbox__counter{
    position:relative;

    left:auto;
    bottom:auto;

    transform:none;

    pointer-events:auto;
}


.mdn-project-lightbox__caption{
    color:#8796aa;

    font-size:14px;
    font-weight:600;
}


/* ============================================================
   BODY LOCK
============================================================ */

body.mdn-lightbox-open{
    overflow:hidden;
}


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

@media(max-width:1050px){

    .mdn-project-lightbox{
        padding:
            25px 72px;
    }


    .mdn-project-lightbox__content{
        width:100%;
        height:min(820px,88dvh);
    }


    .mdn-project-lightbox__arrow--prev{
        left:-60px;
    }


    .mdn-project-lightbox__arrow--next{
        right:-60px;
    }

}


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

@media(max-width:760px){

    .mdn-project-lightbox{
        padding:
            14px;
    }


    .mdn-project-lightbox__content{
        width:100%;
        height:
            calc(100dvh - 28px);

        padding:
            58px 0 72px;
    }


    .mdn-project-lightbox__image{
        width:100%;
        height:100%;

        border-radius:14px;
    }


    .mdn-project-lightbox__image img{
        max-width:100%;
        max-height:100%;

        border-radius:11px;
    }


    .mdn-project-lightbox__close{
        width:45px;
        height:45px;

        top:5px;
        right:5px;
    }


    .mdn-project-lightbox__top{
        top:4px;
    }


    .mdn-project-lightbox__top
    .mdn-project-lightbox__close{
        top:auto;
        right:auto;
    }


    .mdn-project-lightbox__brand > span{
        width:42px;
        height:42px;
    }


    .mdn-project-lightbox__brand small{
        display:none;
    }


    /*
     * Flechas abajo en móvil para no tapar la fotografía.
     */
    .mdn-project-lightbox__arrow{
        width:45px;
        height:45px;

        top:auto;
        bottom:9px;

        transform:none;
    }


    .mdn-project-lightbox__arrow--prev{
        left:
            calc(50% - 59px);
    }


    .mdn-project-lightbox__arrow--next{
        right:
            calc(50% - 59px);
    }


    .mdn-project-lightbox__arrow--prev:hover,
    .mdn-project-lightbox__arrow--next:hover{
        transform:none;
    }


    .mdn-project-lightbox__counter{
        bottom:18px;
    }


    /*
     * Si se usa el bottom mejorado, dejamos el contador
     * dentro del flujo para no chocar con las flechas.
     */
    .mdn-project-lightbox__bottom{
        bottom:0;

        min-height:58px;

        align-items:flex-start;
        justify-content:flex-start;

        flex-direction:column;

        gap:3px;
    }


    .mdn-project-lightbox__bottom
    .mdn-project-lightbox__counter{
        bottom:auto;
    }


    .mdn-project-lightbox__caption{
        display:none;
    }

}


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

@media(max-width:430px){

    .mdn-project-lightbox{
        padding:
            10px;
    }


    .mdn-project-lightbox__content{
        height:
            calc(100dvh - 20px);

        padding:
            55px 0 70px;
    }


    .mdn-project-lightbox__image{
        border-radius:12px;
    }


    .mdn-project-lightbox__arrow{
        width:43px;
        height:43px;
    }


    .mdn-project-lightbox__arrow--prev{
        left:
            calc(50% - 55px);
    }


    .mdn-project-lightbox__arrow--next{
        right:
            calc(50% - 55px);
    }

}


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

.mdn-project-lightbox button:focus-visible{
    outline:
        2px solid #ff1834;

    outline-offset:4px;
}


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

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

    .mdn-project-lightbox *,
    .mdn-project-lightbox *::before,
    .mdn-project-lightbox *::after{
        animation-duration:.01ms !important;
        transition-duration:.01ms !important;
    }

}



/* ============================================================
   MDN GENERAL CONTRACTOR LLC
   ABOUT US
   PREMIUM 2030
============================================================ */

:root{

    --mdnab-navy-1000:#01050d;
    --mdnab-navy-950:#020916;
    --mdnab-navy-900:#031127;
    --mdnab-navy-850:#061a38;
    --mdnab-navy-800:#08234b;

    --mdnab-red-dark:#9c0715;
    --mdnab-red:#d80b20;
    --mdnab-red-bright:#ff1834;
    --mdnab-red-soft:#ff5267;

    --mdnab-blue:#2478ff;
    --mdnab-blue-dark:#1255b8;

    --mdnab-white:#ffffff;
    --mdnab-light:#f7f9fc;
    --mdnab-light-2:#eef3f8;

    --mdnab-text:#45556a;
    --mdnab-muted:#8190a2;

    --mdnab-border:#dce5ef;

    --mdnab-container:1480px;

}


/* ============================================================
   RESET
============================================================ */

.mdn-about-page-hero *,
.mdn-about-company *,
.mdn-about-solutions *,
.mdn-about-services *,
.mdn-about-process *,
.mdn-about-cta *{
    box-sizing:border-box;
}


/* ============================================================
   SECTION 01
   HERO
============================================================ */

.mdn-about-page-hero{

    min-height:650px;

    position:relative;

    overflow:hidden;

    display:flex;
    align-items:center;

    padding:105px 0 115px;

    color:#fff;

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

    background-image:
        url("https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=2200&q=90");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    background-attachment:fixed;

}


.mdn-about-page-hero::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:3px;

    z-index:10;

    background:
        linear-gradient(
            90deg,
            #2478ff,
            #ff1834 50%,
            transparent
        );

}


/* overlay */

.mdn-about-page-hero__overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            90deg,
            rgba(1,5,13,.98) 0%,
            rgba(2,9,22,.94) 35%,
            rgba(3,17,39,.76) 68%,
            rgba(2,9,22,.65) 100%
        ),

        linear-gradient(
            0deg,
            rgba(1,5,13,.91),
            rgba(1,5,13,.18)
        );

}


/* grid */

.mdn-about-page-hero__grid{

    position:absolute;

    inset:0;

    opacity:.25;

    background-image:

        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size:
        58px 58px;

}


/* glows */

.mdn-about-page-hero__glow{

    position:absolute;

    border-radius:50%;

    filter:blur(28px);

    pointer-events:none;

}


.mdn-about-page-hero__glow--red{

    width:580px;
    height:580px;

    right:-300px;
    top:-280px;

    background:
        radial-gradient(
            circle,
            rgba(255,24,52,.30),
            transparent 68%
        );

}


.mdn-about-page-hero__glow--blue{

    width:500px;
    height:500px;

    left:-300px;
    bottom:-330px;

    background:
        radial-gradient(
            circle,
            rgba(36,120,255,.20),
            transparent 68%
        );

}


/* container */

.mdn-about-page-hero__container{

    width:
        min(
            var(--mdnab-container),
            calc(100% - 70px)
        );

    margin:0 auto;

    position:relative;

    z-index:5;

}


/* breadcrumb */

.mdn-about-page-hero__breadcrumb{

    margin-bottom:57px;

    display:flex;
    align-items:center;

    gap:12px;

    color:#9eaabc;

    font-size:14px;

}


.mdn-about-page-hero__breadcrumb a{

    color:#fff;

    text-decoration:none;

    font-weight:700;

}


.mdn-about-page-hero__breadcrumb i{

    color:
        var(--mdnab-red-bright);

    font-size:10px;

}


/* content */

.mdn-about-page-hero__content{

    max-width:870px;

}


/* eyebrow */

.mdn-about-page-hero__eyebrow,
.mdn-about-company__eyebrow,
.mdn-about-solutions__eyebrow,
.mdn-about-services__eyebrow,
.mdn-about-process__eyebrow,
.mdn-about-cta__eyebrow{

    margin-bottom:17px;

    display:flex;
    align-items:center;

    gap:12px;

    color:
        var(--mdnab-red-soft);

    font-size:14px;

    font-weight:800;

    letter-spacing:.09em;

}


.mdn-about-page-hero__eyebrow > span,
.mdn-about-company__eyebrow > span,
.mdn-about-solutions__eyebrow > span,
.mdn-about-services__eyebrow > span,
.mdn-about-process__eyebrow > span,
.mdn-about-cta__eyebrow > span{

    width:44px;
    height:2px;

    position:relative;

    background:
        var(--mdnab-red-bright);

}


.mdn-about-page-hero__eyebrow > span::after,
.mdn-about-company__eyebrow > span::after,
.mdn-about-solutions__eyebrow > span::after,
.mdn-about-services__eyebrow > span::after,
.mdn-about-process__eyebrow > span::after,
.mdn-about-cta__eyebrow > span::after{

    content:"";

    width:7px;
    height:7px;

    position:absolute;

    right:0;
    top:50%;

    transform:
        translateY(-50%);

    border-radius:50%;

    background:
        var(--mdnab-red-bright);

}


/* title */

.mdn-about-page-hero__title{

    max-width:900px;

    margin:
        0 0 25px;

    color:#fff;

    font-size:
        clamp(
            52px,
            5.8vw,
            88px
        );

    line-height:.96;

    letter-spacing:-.055em;

    font-weight:800;

}


.mdn-about-page-hero__title span{

    display:block;

    margin-top:8px;

    color:
        var(--mdnab-red-bright);

}


/* description */

.mdn-about-page-hero__description{

    max-width:720px;

    margin:
        0 0 31px;

    padding-left:19px;

    border-left:
        3px solid var(--mdnab-red-bright);

    color:#c6d0dd;

    font-size:16px;

    line-height:1.85;

    text-align:justify;

}


/* buttons */

.mdn-about-page-hero__actions{

    display:flex;

    flex-wrap:wrap;

    gap:11px;

}


.mdn-about-page-hero__button{

    min-height:58px;

    padding:
        0 23px;

    display:inline-flex;

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

    gap:11px;

    border-radius:13px;

    color:#fff;

    text-decoration:none;

    font-size:14px;

    font-weight:800;

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.mdn-about-page-hero__button--red{

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #ff1834,
            #d80b20
        );

    box-shadow:
        0 17px 40px rgba(255,24,52,.25);

}


.mdn-about-page-hero__button--glass{

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

    background:
        rgba(3,17,39,.54);

    backdrop-filter:blur(12px);

}


.mdn-about-page-hero__button:hover{

    transform:
        translateY(-3px);

}


/* info card */

.mdn-about-page-hero__info{

    width:310px;

    padding:25px;

    position:absolute;

    right:0;
    bottom:0;

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

    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            rgba(3,17,39,.88),
            rgba(1,5,13,.76)
        );

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 30px 75px rgba(0,0,0,.32);

}


.mdn-about-page-hero__info-top{

    display:flex;
    align-items:center;

    gap:12px;

}


.mdn-about-page-hero__info-top > span{

    width:55px;
    height:55px;

    flex:0 0 55px;

    display:flex;

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

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #d80b20
        );

    font-size:17px;

    font-weight:800;

}


.mdn-about-page-hero__info-top > div,
.mdn-about-page-hero__info-item > div{

    display:flex;
    flex-direction:column;

}


.mdn-about-page-hero__info small{

    color:#8e9bae;

    font-size:14px;

}


.mdn-about-page-hero__info strong{

    margin-top:3px;

    color:#fff;

    font-size:14px;

    line-height:1.4;

}


.mdn-about-page-hero__info-line{

    height:1px;

    margin:
        20px 0 12px;

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

}


.mdn-about-page-hero__info-item{

    min-height:60px;

    display:flex;
    align-items:center;

    gap:12px;

    border-bottom:
        1px solid rgba(255,255,255,.06);

}


.mdn-about-page-hero__info-item > i{

    width:37px;

    color:
        var(--mdnab-red-bright);

    text-align:center;

}


/* ============================================================
   SECTION 02
============================================================ */

.mdn-about-company{

    position:relative;

    overflow:hidden;

    padding:
        125px 0;

    color:
        var(--mdnab-text);

    background:
        linear-gradient(
            135deg,
            #fff,
            #f7f9fc 55%,
            #eef3f8
        );

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

}


.mdn-about-company__grid,
.mdn-about-services__grid{

    position:absolute;

    inset:0;

    opacity:.55;

    background-image:

        linear-gradient(
            rgba(6,26,56,.03) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(6,26,56,.03) 1px,
            transparent 1px
        );

    background-size:
        58px 58px;

}


/* glows */

.mdn-about-company__glow{

    position:absolute;

    border-radius:50%;

    filter:blur(30px);

}


.mdn-about-company__glow--blue{

    width:480px;
    height:480px;

    left:-300px;
    bottom:-250px;

    background:
        radial-gradient(
            circle,
            rgba(36,120,255,.09),
            transparent 68%
        );

}


.mdn-about-company__glow--red{

    width:430px;
    height:430px;

    right:-260px;
    top:-200px;

    background:
        radial-gradient(
            circle,
            rgba(255,24,52,.08),
            transparent 68%
        );

}


/* container */

.mdn-about-company__container{

    width:
        min(
            var(--mdnab-container),
            calc(100% - 70px)
        );

    margin:0 auto;

    position:relative;

    z-index:4;

    display:grid;

    grid-template-columns:
        minmax(0,.92fr)
        minmax(0,1.08fr);

    align-items:center;

    gap:
        clamp(
            60px,
            7vw,
            110px
        );

}


/* visual */

.mdn-about-company__visual{

    min-height:680px;

    position:relative;

}


.mdn-about-company__image-main{

    width:82%;
    height:590px;

    margin:0;

    position:absolute;

    left:0;
    top:0;

    overflow:hidden;

    border:
        7px solid #fff;

    border-radius:
        4px 42px 4px 42px;

    box-shadow:
        0 35px 80px rgba(6,26,56,.16);

}


.mdn-about-company__image-main img,
.mdn-about-company__image-small img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:
        transform .8s ease;

}


.mdn-about-company__image-main:hover img,
.mdn-about-company__image-small:hover img{

    transform:
        scale(1.05);

}


.mdn-about-company__image-shade{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(2,9,22,.50)
        );

}


.mdn-about-company__image-small{

    width:46%;
    height:270px;

    margin:0;

    position:absolute;

    right:0;
    bottom:0;

    overflow:hidden;

    border:
        7px solid #fff;

    border-radius:
        25px 4px 25px 4px;

    box-shadow:
        0 25px 60px rgba(6,26,56,.17);

}


.mdn-about-company__badge{

    min-width:270px;

    min-height:82px;

    padding:
        12px 17px 12px 11px;

    position:absolute;

    top:50px;
    right:-10px;

    display:flex;
    align-items:center;

    gap:12px;

    border:
        1px solid #dce5ef;

    border-radius:16px;

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

    box-shadow:
        0 22px 55px rgba(6,26,56,.15);

}


.mdn-about-company__badge > span{

    width:52px;
    height:52px;

    flex:0 0 52px;

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

    border-radius:13px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #d80b20
        );

}


.mdn-about-company__badge > div{

    display:flex;
    flex-direction:column;

}


.mdn-about-company__badge small{

    color:
        var(--mdnab-red);

    font-size:14px;

    font-weight:800;

}


.mdn-about-company__badge strong{

    margin-top:3px;

    color:
        var(--mdnab-navy-850);

    font-size:14px;

}


.mdn-about-company__number{

    position:absolute;

    left:-30px;
    bottom:-20px;

    z-index:-1;

    color:
        rgba(6,26,56,.055);

    font-size:
        clamp(
            120px,
            12vw,
            195px
        );

    line-height:1;

    font-weight:800;

}


/* content */

.mdn-about-company__title,
.mdn-about-services__title{

    margin:
        0 0 25px;

    color:
        var(--mdnab-navy-850);

    font-size:
        clamp(
            40px,
            4.2vw,
            64px
        );

    line-height:1.03;

    letter-spacing:-.045em;

    font-weight:800;

}


.mdn-about-company__title span,
.mdn-about-services__title span{

    color:
        var(--mdnab-red);

}


.mdn-about-company__lead{

    margin:
        0 0 17px;

    color:
        var(--mdnab-navy-850);

    font-size:17px;

    line-height:1.8;

    font-weight:650;

    text-align:justify;

}


.mdn-about-company__text{

    margin:
        0 0 28px;

    color:
        var(--mdnab-text);

    font-size:16px;

    line-height:1.85;

    text-align:justify;

}


/* feature cards */

.mdn-about-company__features{

    display:grid;

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

    gap:10px;

}


.mdn-about-company__feature{

    min-height:90px;

    padding:13px;

    display:flex;

    align-items:center;

    gap:12px;

    border:
        1px solid #e3e9f0;

    border-radius:14px;

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

    box-shadow:
        0 8px 25px rgba(6,26,56,.04);

}


.mdn-about-company__feature > span{

    width:48px;
    height:48px;

    flex:0 0 48px;

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

    border-radius:12px;

    color:
        var(--mdnab-red);

    background:
        #fff1f3;

}


.mdn-about-company__feature > div{

    display:flex;
    flex-direction:column;

}


.mdn-about-company__feature small{

    color:
        var(--mdnab-blue-dark);

    font-size:14px;

    font-weight:800;

}


.mdn-about-company__feature strong{

    margin-top:4px;

    color:
        var(--mdnab-navy-850);

    font-size:14px;

}


/* bottom contact */

.mdn-about-company__contact{

    margin-top:30px;

    display:flex;
    align-items:center;

    flex-wrap:wrap;

    gap:20px;

}


.mdn-about-company__button{

    min-height:58px;

    padding:
        0 23px;

    display:inline-flex;

    align-items:center;

    gap:11px;

    border-radius:13px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #ff1834,
            #d80b20
        );

    box-shadow:
        0 15px 35px rgba(255,24,52,.20);

    text-decoration:none;

    font-size:14px;

    font-weight:800;

}


.mdn-about-company__phone{

    display:flex;
    align-items:center;

    gap:11px;

    color:
        var(--mdnab-navy-850);

    text-decoration:none;

}


.mdn-about-company__phone > span{

    width:48px;
    height:48px;

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

    border-radius:12px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #2478ff,
            #1255b8
        );

}


.mdn-about-company__phone > div{

    display:flex;
    flex-direction:column;

}


.mdn-about-company__phone small{

    color:
        var(--mdnab-muted);

    font-size:14px;

}


.mdn-about-company__phone strong{

    margin-top:2px;

    color:
        var(--mdnab-navy-850);

    font-size:17px;

}


/* ============================================================
   SECTION 03
   PARALLAX SOLUTIONS
============================================================ */

.mdn-about-solutions{

    position:relative;

    overflow:hidden;

    padding:
        120px 0;

    color:#fff;

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

    background-image:
        url("https://images.unsplash.com/photo-1541888946425-d81bb19240f5?auto=format&fit=crop&w=2200&q=90");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    background-attachment:fixed;

}


.mdn-about-solutions__overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            90deg,
            rgba(1,5,13,.96),
            rgba(3,17,39,.88)
        ),

        rgba(1,5,13,.56);

}


.mdn-about-solutions__grid,
.mdn-about-cta__grid{

    position:absolute;

    inset:0;

    opacity:.22;

    background-image:

        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size:
        58px 58px;

}


.mdn-about-solutions__container{

    width:
        min(
            var(--mdnab-container),
            calc(100% - 70px)
        );

    margin:0 auto;

    position:relative;

    z-index:3;

}


.mdn-about-solutions__header{

    margin-bottom:50px;

    display:grid;

    grid-template-columns:
        1fr .70fr;

    align-items:end;

    gap:70px;

}


.mdn-about-solutions__title{

    margin:0;

    color:#fff;

    font-size:
        clamp(
            40px,
            4.2vw,
            66px
        );

    line-height:1.02;

    letter-spacing:-.045em;

}


.mdn-about-solutions__title span{

    display:block;

    color:
        var(--mdnab-red-bright);

}


.mdn-about-solutions__header > p{

    margin:0;

    color:#c3ceda;

    font-size:16px;

    line-height:1.8;

    text-align:justify;

}


/* groups */

.mdn-about-solutions__groups{

    display:grid;

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

    gap:18px;

}


.mdn-about-solutions__group{

    min-height:410px;

    padding:29px;

    position:relative;

    overflow:hidden;

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

    border-radius:19px;

    background:
        linear-gradient(
            145deg,
            rgba(3,17,39,.79),
            rgba(1,5,13,.68)
        );

    backdrop-filter:
        blur(14px);

    box-shadow:
        0 25px 60px rgba(0,0,0,.20);

    transition:
        transform .35s ease,
        border-color .35s ease;

}


.mdn-about-solutions__group:hover{

    transform:
        translateY(-7px);

    border-color:
        rgba(255,24,52,.36);

}


.mdn-about-solutions__number{

    position:absolute;

    top:20px;
    right:23px;

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

    font-size:14px;

    font-weight:800;

}


.mdn-about-solutions__icon{

    width:57px;
    height:57px;

    margin-bottom:25px;

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

    border-radius:15px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #d80b20
        );

    box-shadow:
        0 12px 30px rgba(255,24,52,.22);

    font-size:18px;

}


.mdn-about-solutions__group > small{

    color:
        var(--mdnab-red-soft);

    font-size:14px;

    font-weight:800;

}


.mdn-about-solutions__group h3{

    margin:
        7px 0 14px;

    color:#fff;

    font-size:27px;

    line-height:1.15;

}


.mdn-about-solutions__group p{

    margin:
        0 0 25px;

    color:#bfcad8;

    font-size:14px;

    line-height:1.75;

}


.mdn-about-solutions__group > div:last-child{

    display:flex;
    flex-direction:column;

}


.mdn-about-solutions__group a{

    min-height:44px;

    display:flex;
    align-items:center;

    border-bottom:
        1px solid rgba(255,255,255,.07);

    color:#e5eaf1;

    text-decoration:none;

    font-size:14px;

    font-weight:700;

    transition:
        color .3s ease,
        padding .3s ease;

}


.mdn-about-solutions__group a::before{

    content:"";

    width:6px;
    height:6px;

    margin-right:9px;

    border-radius:50%;

    background:
        var(--mdnab-red-bright);

}


.mdn-about-solutions__group a:hover{

    padding-left:5px;

    color:
        var(--mdnab-red-soft);

}


/* ============================================================
   SECTION 04
   SERVICES GRID
============================================================ */

.mdn-about-services{

    position:relative;

    overflow:hidden;

    padding:
        120px 0;

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

    background:
        linear-gradient(
            135deg,
            #fff,
            #f8fafd,
            #eff4f9
        );

}


.mdn-about-services__container{

    width:
        min(
            var(--mdnab-container),
            calc(100% - 70px)
        );

    margin:0 auto;

    position:relative;

    z-index:3;

}


.mdn-about-services__header{

    margin-bottom:45px;

    display:grid;

    grid-template-columns:
        1fr .75fr;

    align-items:end;

    gap:70px;

}


.mdn-about-services__header > p{

    margin:0;

    color:
        var(--mdnab-text);

    font-size:16px;

    line-height:1.8;

    text-align:justify;

}


.mdn-about-services__grid-cards{

    display:grid;

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

    gap:13px;

}


.mdn-about-service-card{

    min-height:185px;

    padding:23px;

    position:relative;

    overflow:hidden;

    display:flex;
    flex-direction:column;

    justify-content:flex-end;

    border:
        1px solid #e1e8f0;

    border-radius:16px;

    color:
        var(--mdnab-navy-850);

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

    box-shadow:
        0 10px 30px rgba(6,26,56,.05);

    text-decoration:none;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}


.mdn-about-service-card:hover{

    transform:
        translateY(-6px);

    border-color:
        rgba(255,24,52,.25);

    box-shadow:
        0 22px 50px rgba(6,26,56,.12);

}


.mdn-about-service-card__number{

    position:absolute;

    top:20px;
    right:20px;

    color:#b5bfca;

    font-size:14px;

    font-weight:800;

}


.mdn-about-service-card__icon{

    width:48px;
    height:48px;

    position:absolute;

    top:20px;
    left:20px;

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

    border-radius:12px;

    color:
        var(--mdnab-red);

    background:#fff1f3;

    transition:
        color .3s ease,
        background .3s ease;

}


.mdn-about-service-card:hover
.mdn-about-service-card__icon{

    color:#fff;

    background:
        var(--mdnab-red);

}


.mdn-about-service-card > small{

    margin-bottom:5px;

    color:
        var(--mdnab-blue-dark);

    font-size:14px;

    font-weight:800;

}


.mdn-about-service-card > strong{

    padding-right:35px;

    color:
        var(--mdnab-navy-850);

    font-size:20px;

    line-height:1.25;

}


.mdn-about-service-card > i{

    position:absolute;

    right:21px;
    bottom:24px;

    color:
        var(--mdnab-red);

    transition:
        transform .3s ease;

}


.mdn-about-service-card:hover > i{

    transform:
        translateX(5px);

}


/* ============================================================
   SECTION 05
   PROCESS
============================================================ */

.mdn-about-process{

    padding:
        115px 0;

    position:relative;

    overflow:hidden;

    color:#fff;

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

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(255,24,52,.14),
            transparent 30%
        ),

        radial-gradient(
            circle at 0% 100%,
            rgba(36,120,255,.13),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #01050d,
            #031127,
            #061a38
        );

}


.mdn-about-process__container{

    width:
        min(
            var(--mdnab-container),
            calc(100% - 70px)
        );

    margin:0 auto;

    display:grid;

    grid-template-columns:
        .72fr 1.28fr;

    gap:
        clamp(
            55px,
            7vw,
            100px
        );

}


.mdn-about-process__intro h2{

    margin:
        0 0 22px;

    font-size:
        clamp(
            39px,
            4vw,
            61px
        );

    line-height:1.02;

    letter-spacing:-.045em;

}


.mdn-about-process__intro h2 span{

    display:block;

    color:
        var(--mdnab-red-bright);

}


.mdn-about-process__intro > p{

    margin:
        0 0 28px;

    color:#bdc8d6;

    font-size:16px;

    line-height:1.8;

    text-align:justify;

}


.mdn-about-process__call{

    width:fit-content;

    display:flex;
    align-items:center;

    gap:12px;

    color:#fff;

    text-decoration:none;

}


.mdn-about-process__call > span{

    width:50px;
    height:50px;

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

    border-radius:13px;

    background:
        linear-gradient(
            135deg,
            #2478ff,
            #1255b8
        );

}


.mdn-about-process__call > div{

    display:flex;
    flex-direction:column;

}


.mdn-about-process__call small{

    color:#8797aa;

    font-size:14px;

}


.mdn-about-process__call strong{

    margin-top:2px;

    font-size:17px;

}


/* process steps */

.mdn-about-process__steps{

    display:grid;

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

    gap:12px;

}


.mdn-about-process__steps article{

    min-height:245px;

    padding:25px;

    position:relative;

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

    border-radius:17px;

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

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease;

}


.mdn-about-process__steps article:hover{

    transform:
        translateY(-5px);

    border-color:
        rgba(255,24,52,.24);

    background:
        rgba(255,24,52,.04);

}


.mdn-about-process__step-number{

    position:absolute;

    top:20px;
    right:20px;

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

    font-size:14px;

    font-weight:800;

}


.mdn-about-process__step-icon{

    width:48px;
    height:48px;

    margin-bottom:22px;

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

    border-radius:12px;

    color:
        var(--mdnab-red-bright);

    background:
        rgba(255,24,52,.09);

    border:
        1px solid rgba(255,24,52,.15);

}


.mdn-about-process__steps small{

    color:
        var(--mdnab-red-soft);

    font-size:14px;

    font-weight:800;

}


.mdn-about-process__steps h3{

    margin:
        6px 0 11px;

    color:#fff;

    font-size:21px;

}


.mdn-about-process__steps p{

    margin:0;

    color:#9eadbf;

    font-size:14px;

    line-height:1.7;

}


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

.mdn-about-cta{

    padding:
        115px 0;

    position:relative;

    overflow:hidden;

    color:#fff;

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

    background-image:
        url("https://images.unsplash.com/photo-1487958449943-2429e8be8625?auto=format&fit=crop&w=2200&q=90");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    background-attachment:fixed;

}


.mdn-about-cta__overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            90deg,
            rgba(1,5,13,.97),
            rgba(3,17,39,.80),
            rgba(1,5,13,.88)
        );

}


.mdn-about-cta__container{

    width:
        min(
            var(--mdnab-container),
            calc(100% - 70px)
        );

    margin:0 auto;

    position:relative;

    z-index:3;

    display:grid;

    grid-template-columns:
        1.12fr .68fr;

    align-items:center;

    gap:
        clamp(
            60px,
            8vw,
            120px
        );

}


.mdn-about-cta__content h2{

    margin:
        0 0 24px;

    max-width:820px;

    font-size:
        clamp(
            43px,
            4.8vw,
            72px
        );

    line-height:1;

    letter-spacing:-.05em;

}


.mdn-about-cta__content h2 span{

    display:block;

    margin-top:7px;

    color:
        var(--mdnab-red-bright);

}


.mdn-about-cta__content > p{

    max-width:720px;

    margin:
        0 0 30px;

    color:#c4ceda;

    font-size:16px;

    line-height:1.8;

    text-align:justify;

}


.mdn-about-cta__actions{

    display:flex;

    flex-wrap:wrap;

    gap:11px;

}


.mdn-about-cta__primary,
.mdn-about-cta__secondary{

    min-height:58px;

    padding:
        0 22px;

    display:inline-flex;

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

    gap:10px;

    border-radius:13px;

    color:#fff;

    text-decoration:none;

    font-size:14px;

    font-weight:800;

}


.mdn-about-cta__primary{

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #ff1834,
            #d80b20
        );

    box-shadow:
        0 16px 40px rgba(255,24,52,.24);

}


.mdn-about-cta__secondary{

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

    background:
        rgba(3,17,39,.55);

}


/* contact card */

.mdn-about-cta__card{

    padding:29px;

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

    border-radius:21px;

    background:
        linear-gradient(
            145deg,
            rgba(3,17,39,.88),
            rgba(1,5,13,.78)
        );

    backdrop-filter:
        blur(18px);

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

}


.mdn-about-cta__card-head{

    display:flex;
    align-items:center;

    gap:13px;

}


.mdn-about-cta__card-head > span{

    width:58px;
    height:58px;

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

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #d80b20
        );

    font-weight:800;

}


.mdn-about-cta__card-head > div,
.mdn-about-cta__card > a > div,
.mdn-about-cta__card-item > div,
.mdn-about-cta__language > div{

    display:flex;
    flex-direction:column;

}


.mdn-about-cta__card small{

    color:#8f9daf;

    font-size:14px;

}


.mdn-about-cta__card strong{

    margin-top:3px;

    color:#fff;

    font-size:14px;

}


.mdn-about-cta__divider{

    height:1px;

    margin:
        22px 0 12px;

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

}


.mdn-about-cta__card > a,
.mdn-about-cta__card-item{

    min-height:70px;

    display:flex;
    align-items:center;

    gap:12px;

    border-bottom:
        1px solid rgba(255,255,255,.07);

    color:#fff;

    text-decoration:none;

}


.mdn-about-cta__card > a > span,
.mdn-about-cta__card-item > span{

    width:43px;
    height:43px;

    flex:0 0 43px;

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

    border-radius:11px;

    color:
        var(--mdnab-red-bright);

    background:
        rgba(255,24,52,.08);

}


.mdn-about-cta__card-item em{

    margin-top:2px;

    color:
        var(--mdnab-red-soft);

    font-size:14px;

    font-style:normal;

}


.mdn-about-cta__language{

    margin-top:18px;

    padding:14px;

    display:flex;
    align-items:center;

    gap:12px;

    border:
        1px solid rgba(36,120,255,.18);

    border-radius:12px;

    background:
        rgba(36,120,255,.07);

}


.mdn-about-cta__language > i{

    width:38px;
    height:38px;

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

    border-radius:10px;

    background:
        linear-gradient(
            135deg,
            #2478ff,
            #1255b8
        );

}


/* ============================================================
   REVEAL
============================================================ */

.mdn-about-reveal{

    opacity:0;

    transform:
        translateY(28px);

    transition:
        opacity .75s ease,
        transform .75s ease;

}


.mdn-about-reveal.is-visible{

    opacity:1;

    transform:
        translateY(0);

}


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

@media(max-width:1050px){

    .mdn-about-page-hero__container,
    .mdn-about-company__container,
    .mdn-about-solutions__container,
    .mdn-about-services__container,
    .mdn-about-process__container,
    .mdn-about-cta__container{

        width:
            calc(100% - 46px);

    }


    .mdn-about-page-hero__info{

        display:none;

    }


    .mdn-about-company__container,
    .mdn-about-cta__container{

        grid-template-columns:1fr;

        gap:65px;

    }


    .mdn-about-company__visual{

        width:min(760px,100%);

        margin:0 auto;

    }


    .mdn-about-solutions__header,
    .mdn-about-services__header{

        grid-template-columns:1fr;

        gap:22px;

    }


    .mdn-about-process__container{

        grid-template-columns:1fr;

    }

}


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

@media(max-width:850px){

    .mdn-about-solutions__groups{

        grid-template-columns:1fr;

    }


    .mdn-about-solutions__group{

        min-height:auto;

    }


    .mdn-about-services__grid-cards{

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

    }

}


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

@media(max-width:700px){

    .mdn-about-page-hero,
    .mdn-about-solutions,
    .mdn-about-cta{

        background-attachment:scroll;

    }


    .mdn-about-page-hero{

        min-height:620px;

        padding:
            75px 0 85px;

        background-position:
            58% center;

    }


    .mdn-about-page-hero__container,
    .mdn-about-company__container,
    .mdn-about-solutions__container,
    .mdn-about-services__container,
    .mdn-about-process__container,
    .mdn-about-cta__container{

        width:
            calc(100% - 30px);

    }


    .mdn-about-page-hero__breadcrumb{

        margin-bottom:40px;

    }


    .mdn-about-page-hero__title{

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

    }


    .mdn-about-page-hero__description{

        font-size:15px;

        text-align:left;

    }


    .mdn-about-page-hero__actions{

        align-items:stretch;

        flex-direction:column;

    }


    .mdn-about-page-hero__button{

        width:100%;

    }


    /* company */

    .mdn-about-company,
    .mdn-about-solutions,
    .mdn-about-services,
    .mdn-about-process,
    .mdn-about-cta{

        padding:
            80px 0;

    }


    .mdn-about-company__visual{

        min-height:520px;

    }


    .mdn-about-company__image-main{

        width:89%;
        height:445px;

        border-width:5px;

    }


    .mdn-about-company__image-small{

        width:49%;
        height:200px;

        border-width:5px;

    }


    .mdn-about-company__badge{

        min-width:0;

        width:230px;

        top:25px;
        right:0;

    }


    .mdn-about-company__title,
    .mdn-about-services__title,
    .mdn-about-solutions__title{

        font-size:
            clamp(
                36px,
                10vw,
                50px
            );

    }


    .mdn-about-company__lead,
    .mdn-about-company__text,
    .mdn-about-solutions__header > p,
    .mdn-about-services__header > p,
    .mdn-about-process__intro > p,
    .mdn-about-cta__content > p{

        text-align:left;

    }


    .mdn-about-company__features{

        grid-template-columns:1fr;

    }


    .mdn-about-company__contact{

        align-items:flex-start;

        flex-direction:column;

    }


    .mdn-about-services__grid-cards{

        grid-template-columns:1fr;

    }


    .mdn-about-process__steps{

        grid-template-columns:1fr;

    }


    .mdn-about-cta__actions{

        flex-direction:column;

    }


    .mdn-about-cta__primary,
    .mdn-about-cta__secondary{

        width:100%;

    }

}


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

@media(max-width:480px){

    .mdn-about-page-hero__container,
    .mdn-about-company__container,
    .mdn-about-solutions__container,
    .mdn-about-services__container,
    .mdn-about-process__container,
    .mdn-about-cta__container{

        width:
            calc(100% - 24px);

    }


    .mdn-about-page-hero__title{

        font-size:39px;

    }


    .mdn-about-company__visual{

        min-height:455px;

    }


    .mdn-about-company__image-main{

        width:94%;
        height:380px;

    }


    .mdn-about-company__image-small{

        height:165px;

    }


    .mdn-about-company__badge{

        width:200px;

    }


    .mdn-about-company__badge strong{

        font-size:14px;

    }


    .mdn-about-cta__card{

        padding:
            23px 17px;

    }

}


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

.mdn-about-page-hero a:focus-visible,
.mdn-about-company a:focus-visible,
.mdn-about-solutions a:focus-visible,
.mdn-about-services a:focus-visible,
.mdn-about-process a:focus-visible,
.mdn-about-cta a:focus-visible{

    outline:
        2px solid var(--mdnab-red-bright);

    outline-offset:4px;

}


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

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

    .mdn-about-page-hero,
    .mdn-about-solutions,
    .mdn-about-cta{

        background-attachment:scroll;

    }


    .mdn-about-reveal{

        opacity:1;

        transform:none;

    }


    .mdn-about-page-hero *,
    .mdn-about-company *,
    .mdn-about-solutions *,
    .mdn-about-services *,
    .mdn-about-process *,
    .mdn-about-cta *{

        transition-duration:.01ms !important;

    }

}


/* ============================================================
   MDN GENERAL CONTRACTOR LLC
   PROJECTS PAGE
   CLEAN GALLERY + IMAGE BREADCRUMB
============================================================ */

:root{

    --mdnpg-navy-1000:#01050d;
    --mdnpg-navy-950:#020916;
    --mdnpg-navy-900:#031127;
    --mdnpg-navy-850:#061a38;

    --mdnpg-red:#d80b20;
    --mdnpg-red-bright:#ff1834;
    --mdnpg-red-soft:#ff5267;

    --mdnpg-blue:#2478ff;

    --mdnpg-white:#ffffff;

    --mdnpg-light:#f7f9fc;
    --mdnpg-light-2:#eef3f8;

    --mdnpg-text:#45556a;
    --mdnpg-muted:#8290a2;

    --mdnpg-border:#dde5ee;

    --mdnpg-container:1480px;

}


/* ============================================================
   RESET
============================================================ */

.mdn-projects-breadcrumb *,
.mdn-project-gallery *,
.mdn-project-gallery-lightbox *{

    box-sizing:border-box;

}


/* ============================================================
   SECTION 01
   BREADCRUMB WITH IMAGE
============================================================ */

.mdn-projects-breadcrumb{

min-height: 361px;

position:relative;

overflow:hidden;

display:flex;

align-items:center;

padding: 90px 0 30px;

color:#ffffff;

background:
        var(--mdnpg-navy-950);

font-family:
        "Manrope",
        Arial,
        sans-serif;
}


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

.mdn-projects-breadcrumb__background{

    position:absolute;

    inset:0;

    background-image:
        url("https://images.unsplash.com/photo-1541888946425-d81bb19240f5?auto=format&fit=crop&w=2200&q=90");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    transform:
        scale(1.03);

}


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

.mdn-projects-breadcrumb__overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            90deg,
            rgba(1,5,13,.98) 0%,
            rgba(2,9,22,.94) 35%,
            rgba(3,17,39,.76) 66%,
            rgba(2,9,22,.62) 100%
        ),

        linear-gradient(
            0deg,
            rgba(1,5,13,.90),
            rgba(1,5,13,.12)
        );

}


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

.mdn-projects-breadcrumb__grid{

    position:absolute;

    inset:0;

    opacity:.24;

    pointer-events:none;

    background-image:

        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size:
        58px 58px;

}


/* ============================================================
   TOP ACCENT
============================================================ */

.mdn-projects-breadcrumb::before{

    content:"";

    width:100%;
    height:3px;

    position:absolute;

    top:0;
    left:0;

    z-index:10;

    background:
        linear-gradient(
            90deg,
            #2478ff,
            #ff1834 48%,
            transparent
        );

}


/* ============================================================
   DECORATIVE LINE
============================================================ */

.mdn-projects-breadcrumb::after{

    content:"";

    width:2px;
    height:800px;

    position:absolute;

    z-index:4;

    right:17%;
    top:-250px;

    transform:
        rotate(27deg);

    pointer-events:none;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,24,52,.72),
            transparent
        );

    box-shadow:
        0 0 20px rgba(255,24,52,.22);

}


/* ============================================================
   GLOWS
============================================================ */

.mdn-projects-breadcrumb__glow{

    position:absolute;

    border-radius:50%;

    filter:blur(28px);

    pointer-events:none;

}


.mdn-projects-breadcrumb__glow--red{

    width:570px;
    height:570px;

    top:-310px;
    right:-270px;

    background:
        radial-gradient(
            circle,
            rgba(255,24,52,.30),
            transparent 68%
        );

}


.mdn-projects-breadcrumb__glow--blue{

    width:500px;
    height:500px;

    left:-290px;
    bottom:-330px;

    background:
        radial-gradient(
            circle,
            rgba(36,120,255,.20),
            transparent 68%
        );

}


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

.mdn-projects-breadcrumb__container{

    width:
        min(
            var(--mdnpg-container),
            calc(100% - 70px)
        );

    margin:
        0 auto;

    position:relative;

    z-index:6;

}


/* ============================================================
   BREADCRUMB NAV
============================================================ */

.mdn-projects-breadcrumb__nav{

    margin-bottom:52px;

    display:flex;

    align-items:center;

    gap:11px;

    color:#98a6b8;

    font-size:14px;

}


.mdn-projects-breadcrumb__nav a{

    color:#ffffff;

    text-decoration:none;

    font-weight:700;

}


.mdn-projects-breadcrumb__nav a:hover{

    color:
        var(--mdnpg-red-soft);

}


.mdn-projects-breadcrumb__nav i{

    color:
        var(--mdnpg-red-bright);

    font-size:9px;

}


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

.mdn-projects-breadcrumb__layout{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:60px;

}


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

.mdn-projects-breadcrumb__content{

    max-width:860px;

}


/* ============================================================
   EYEBROW
============================================================ */

.mdn-projects-breadcrumb__eyebrow,
.mdn-project-gallery__eyebrow{

    margin-bottom:17px;

    display:flex;

    align-items:center;

    gap:12px;

    color:
        var(--mdnpg-red-soft);

    font-size:14px;

    font-weight:800;

    letter-spacing:.09em;

}


.mdn-projects-breadcrumb__eyebrow > span,
.mdn-project-gallery__eyebrow > span{

    width:44px;
    height:2px;

    position:relative;

    background:
        var(--mdnpg-red-bright);

}


.mdn-projects-breadcrumb__eyebrow > span::after,
.mdn-project-gallery__eyebrow > span::after{

    content:"";

    width:7px;
    height:7px;

    position:absolute;

    top:50%;
    right:0;

    transform:
        translateY(-50%);

    border-radius:50%;

    background:
        var(--mdnpg-red-bright);

}


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

.mdn-projects-breadcrumb h1{

    margin:
        0 0 22px;

    color:#ffffff;

    font-size:
        clamp(
            52px,
            5.6vw,
            84px
        );

    line-height:.97;

    letter-spacing:-.055em;

    font-weight:800;

}


.mdn-projects-breadcrumb h1 span{

    color:
        var(--mdnpg-red-bright);

}


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

.mdn-projects-breadcrumb__content > p{

    max-width:670px;

    margin:
        0 0 29px;

    padding-left:18px;

    border-left:
        3px solid var(--mdnpg-red-bright);

    color:#c4ceda;

    font-size:16px;

    line-height:1.8;

}


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

.mdn-projects-breadcrumb__button{

    min-height:56px;

    padding:
        0 22px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:11px;

    border-radius:13px;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #ff1834,
            #d80b20
        );

    box-shadow:
        0 16px 38px rgba(255,24,52,.24);

    text-decoration:none;

    font-size:14px;

    font-weight:800;

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.mdn-projects-breadcrumb__button:hover{

    transform:
        translateY(-3px);

    box-shadow:
        0 21px 45px rgba(255,24,52,.33);

}


/* ============================================================
   COUNTER
============================================================ */

.mdn-projects-breadcrumb__counter{

    min-width:230px;

    padding:
        17px;

    display:flex;

    align-items:center;

    gap:14px;

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

    border-radius:16px;

    background:
        rgba(3,17,39,.66);

    backdrop-filter:
        blur(16px);

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

    box-shadow:
        0 25px 60px rgba(0,0,0,.26);

}


.mdn-projects-breadcrumb__counter > span{

    width:54px;
    height:54px;

    flex:
        0 0 54px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:13px;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #2478ff,
            #1255b8
        );

    font-size:17px;

}


.mdn-projects-breadcrumb__counter > div{

    display:flex;

    flex-direction:column;

}


.mdn-projects-breadcrumb__counter small{

    color:
        var(--mdnpg-red-soft);

    font-size:14px;

    font-weight:800;

}


.mdn-projects-breadcrumb__counter strong{

    margin-top:3px;

    color:#ffffff;

    font-size:23px;

    line-height:1;

}


.mdn-projects-breadcrumb__counter em{

    margin-left:4px;

    color:#b9c4d1;

    font-size:14px;

    font-style:normal;

    font-weight:600;

}


/* ============================================================
   SECTION 02
   CLEAN GALLERY
============================================================ */

.mdn-project-gallery{

    width:100%;

    padding:
        110px 0 120px;

    position:relative;

    overflow:hidden;

    /*
     * NO IMAGE BACKGROUND.
     * Clean surface so project photographs are the focus.
     */
    background:
        #ffffff;

    color:
        var(--mdnpg-text);

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

}


/* subtle solid transition only */

.mdn-project-gallery::before{

    content:"";

    width:100%;
    height:1px;

    position:absolute;

    top:0;
    left:0;

    background:
        #e8edf3;

}


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

.mdn-project-gallery__container{

    width:
        min(
            var(--mdnpg-container),
            calc(100% - 70px)
        );

    margin:
        0 auto;

}


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

.mdn-project-gallery__header{

    margin-bottom:43px;

    display:grid;

    grid-template-columns:
        1fr .75fr;

    align-items:end;

    gap:70px;

}


/* ============================================================
   GALLERY EYEBROW
============================================================ */

.mdn-project-gallery__eyebrow{

    color:
        var(--mdnpg-red);

}


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

.mdn-project-gallery__header h2{

    margin:0;

    color:
        var(--mdnpg-navy-850);

    font-size:
        clamp(
            40px,
            4.2vw,
            62px
        );

    line-height:1.03;

    letter-spacing:-.045em;

    font-weight:800;

}


.mdn-project-gallery__header h2 span{

    color:
        var(--mdnpg-red);

}


/* ============================================================
   HEADER RIGHT
============================================================ */

.mdn-project-gallery__header-right{

    display:flex;

    align-items:flex-end;

    gap:24px;

}


.mdn-project-gallery__header-right > p{

    margin:0;

    flex:1;

    color:
        var(--mdnpg-text);

    font-size:15px;

    line-height:1.75;

    text-align:justify;

}


/* ============================================================
   TOTAL
============================================================ */

.mdn-project-gallery__total{

    min-width:84px;

    padding-left:20px;

    border-left:
        1px solid var(--mdnpg-border);

    display:flex;

    flex-direction:column;

}


.mdn-project-gallery__total strong{

    color:
        var(--mdnpg-red);

    font-size:28px;

    font-weight:800;

}


.mdn-project-gallery__total span{

    color:
        var(--mdnpg-muted);

    font-size:14px;

}


/* ============================================================
   STANDARD GALLERY GRID
============================================================ */

.mdn-project-gallery__grid{

    display:grid;

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

    gap:18px;

}


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

.mdn-project-gallery-card{

    width:100%;

    min-width:0;

}


/* ============================================================
   BUTTON
   STANDARD 4:3 FORMAT
============================================================ */

.mdn-project-gallery-card__button{

    width:100%;

    aspect-ratio:
        4 / 3;

    padding:0;

    position:relative;

    overflow:hidden;

    display:block;

    border:
        1px solid var(--mdnpg-border);

    border-radius:16px;

    color:#ffffff;

    background:
        var(--mdnpg-light-2);

    cursor:pointer;

    box-shadow:
        0 10px 30px rgba(6,26,56,.075);

    text-align:left;

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}


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

.mdn-project-gallery-card__button > img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    object-position:center;

    transform:
        scale(1.002);

    transition:
        transform .7s ease,
        filter .4s ease;

}


.mdn-project-gallery-card__button:hover{

    transform:
        translateY(-6px);

    border-color:
        rgba(216,11,32,.28);

    box-shadow:
        0 23px 52px rgba(6,26,56,.15);

}


.mdn-project-gallery-card__button:hover > img{

    transform:
        scale(1.06);

}


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

.mdn-project-gallery-card__overlay{

    position:absolute;

    inset:0;

    z-index:2;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(2,9,22,.05) 0%,
            rgba(2,9,22,.02) 45%,
            rgba(2,9,22,.73) 100%
        );

    transition:
        background .35s ease;

}


.mdn-project-gallery-card__button:hover
.mdn-project-gallery-card__overlay{

    background:
        linear-gradient(
            180deg,
            rgba(2,9,22,.02) 0%,
            rgba(2,9,22,.04) 40%,
            rgba(2,9,22,.83) 100%
        );

}


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

.mdn-project-gallery-card__number{

    min-width:37px;
    height:32px;

    padding:
        0 9px;

    position:absolute;

    z-index:5;

    top:16px;
    left:16px;

    display:flex;

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

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

    border-radius:8px;

    color:#ffffff;

    background:
        rgba(2,9,22,.65);

    backdrop-filter:
        blur(10px);

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

    font-size:14px;

    font-weight:800;

}


/* ============================================================
   ZOOM
============================================================ */

.mdn-project-gallery-card__zoom{

    width:45px;
    height:45px;

    position:absolute;

    z-index:5;

    top:15px;
    right:15px;

    display:flex;

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

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

    border-radius:11px;

    color:#ffffff;

    background:
        rgba(2,9,22,.64);

    backdrop-filter:
        blur(10px);

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

    font-size:14px;

    transition:
        transform .3s ease,
        background .3s ease;

}


.mdn-project-gallery-card__button:hover
.mdn-project-gallery-card__zoom{

    transform:
        scale(1.08);

    background:
        var(--mdnpg-red);

}


/* ============================================================
   CAPTION
============================================================ */

.mdn-project-gallery-card__caption{

    position:absolute;

    z-index:5;

    left:18px;
    right:18px;
    bottom:17px;

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:20px;

}


.mdn-project-gallery-card__caption small{

    color:
        #ff6678;

    font-size:14px;

    font-weight:800;

    letter-spacing:.06em;

}


.mdn-project-gallery-card__caption strong{

    color:#ffffff;

    font-size:14px;

    font-weight:800;

}


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

.mdn-project-gallery__footer{

    margin-top:39px;

    padding-top:25px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    border-top:
        1px solid var(--mdnpg-border);

}


.mdn-project-gallery__footer > div{

    display:flex;

    align-items:center;

    gap:9px;

    color:
        var(--mdnpg-muted);

    font-size:14px;

}


.mdn-project-gallery__footer > div i{

    color:
        var(--mdnpg-red);

}


.mdn-project-gallery__footer strong{

    color:
        var(--mdnpg-navy-850);

}


.mdn-project-gallery__footer > a{

    min-height:53px;

    padding:
        0 20px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    border-radius:12px;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #d80b20
        );

    box-shadow:
        0 13px 30px rgba(216,11,32,.16);

    text-decoration:none;

    font-size:14px;

    font-weight:800;

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.mdn-project-gallery__footer > a:hover{

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 38px rgba(216,11,32,.24);

}


/* ============================================================
   EMPTY GALLERY
============================================================ */

.mdn-project-gallery__empty{

    min-height:290px;

    padding:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;

    border:
        1px solid var(--mdnpg-border);

    border-radius:17px;

    background:
        var(--mdnpg-light);

}


.mdn-project-gallery__empty > span{

    width:65px;
    height:65px;

    flex:
        0 0 65px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:15px;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #d80b20
        );

    font-size:22px;

}


.mdn-project-gallery__empty h3{

    margin:
        0 0 6px;

    color:
        var(--mdnpg-navy-850);

    font-size:24px;

}


.mdn-project-gallery__empty p{

    margin:0;

    color:
        var(--mdnpg-text);

    font-size:15px;

    line-height:1.7;

}


/* ============================================================
   LIGHTBOX
============================================================ */

.mdn-project-gallery-lightbox{

    position:fixed;

    inset:0;

    z-index:999999;

    width:100%;
    height:100dvh;

    padding:
        28px 90px;

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

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

    transition:
        opacity .3s ease,
        visibility .3s ease;

}


/* ============================================================
   OPEN
============================================================ */

.mdn-project-gallery-lightbox.is-open{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}


/* ============================================================
   BACKDROP
============================================================ */

.mdn-project-gallery-lightbox__backdrop{

    width:100%;
    height:100%;

    position:absolute;

    inset:0;

    z-index:1;

    padding:0;

    border:0;

    background:

        radial-gradient(
            circle at 95% 0%,
            rgba(255,24,52,.12),
            transparent 28%
        ),

        radial-gradient(
            circle at 0% 100%,
            rgba(36,120,255,.08),
            transparent 30%
        ),

        rgba(1,5,13,.96);

    backdrop-filter:
        blur(14px);

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

    cursor:pointer;

}


/* ============================================================
   CLOSE X
   FIXED + ALWAYS VISIBLE
============================================================ */

.mdn-project-gallery-lightbox__close{

    width:56px;
    height:56px;

    position:fixed;

    z-index:1000002;

    top:23px;
    right:23px;

    padding:0;

    display:flex;

    align-items:center;

    justify-content:center;

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

    border-radius:50%;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #ff5267 0%,
            #ff1834 45%,
            #b4071b 100%
        );

    box-shadow:
        0 15px 40px rgba(0,0,0,.36),
        0 0 0 5px rgba(255,255,255,.045);

    cursor:pointer;

    font-size:21px;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:
        scale(.82);

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .3s ease,
        box-shadow .3s ease;

}


.mdn-project-gallery-lightbox.is-open
.mdn-project-gallery-lightbox__close{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:
        scale(1);

}


.mdn-project-gallery-lightbox__close i{

    pointer-events:none;

}


.mdn-project-gallery-lightbox__close:hover{

    transform:
        scale(1.08)
        rotate(90deg);

    box-shadow:
        0 18px 46px rgba(255,24,52,.35),
        0 0 0 6px rgba(255,255,255,.06);

}


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

.mdn-project-gallery-lightbox__content{

    width:
        min(
            1400px,
            100%
        );

    height:
        min(
            860px,
            90dvh
        );

    position:relative;

    z-index:5;

    display:flex;

    align-items:center;

    justify-content:center;

}


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

.mdn-project-gallery-lightbox__brand{

    position:absolute;

    z-index:20;

    top:0;
    left:0;

    display:flex;

    align-items:center;

    gap:11px;

}


.mdn-project-gallery-lightbox__brand > span{

    width:47px;
    height:47px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:11px;

    color:#ffffff;

    background:
        var(--mdnpg-red);

    box-shadow:
        0 10px 26px rgba(255,24,52,.22);

    font-size:14px;

    font-weight:800;

}


.mdn-project-gallery-lightbox__brand > div{

    display:flex;

    flex-direction:column;

}


.mdn-project-gallery-lightbox__brand small{

    color:
        var(--mdnpg-red-soft);

    font-size:14px;

    font-weight:800;

}


.mdn-project-gallery-lightbox__brand strong{

    margin-top:2px;

    color:#ffffff;

    font-size:14px;

}


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

.mdn-project-gallery-lightbox__image{

    width:100%;
    height:
        calc(100% - 110px);

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

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

    border-radius:17px;

    background:
        #050a14;

    box-shadow:
        0 35px 90px rgba(0,0,0,.48);

}


/* ============================================================
   FULL IMAGE
   NEVER CROPPED
============================================================ */

.mdn-project-gallery-lightbox__image img{

    display:block;

    width:auto;
    height:auto;

    max-width:100%;
    max-height:100%;

    object-fit:contain;

    object-position:center;

}


/* ============================================================
   LOADER
============================================================ */

.mdn-project-gallery-lightbox__loader{

    position:absolute;

    inset:0;

    z-index:8;

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}


.mdn-project-gallery-lightbox__loader.is-visible{

    opacity:1;

    visibility:visible;

}


.mdn-project-gallery-lightbox__loader i{

    color:
        var(--mdnpg-red-bright);

    font-size:30px;

    animation:
        mdnProjectGalleryLoader
        .8s linear infinite;

}


@keyframes mdnProjectGalleryLoader{

    to{

        transform:
            rotate(360deg);

    }

}


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

.mdn-project-gallery-lightbox__arrow{

    width:56px;
    height:56px;

    position:absolute;

    z-index:25;

    top:50%;

    padding:0;

    display:flex;

    align-items:center;

    justify-content:center;

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

    border-radius:50%;

    color:#ffffff;

    background:
        rgba(6,26,56,.78);

    backdrop-filter:
        blur(12px);

    cursor:pointer;

    transform:
        translateY(-50%);

    font-size:15px;

    transition:
        background .3s ease,
        transform .3s ease;

}


.mdn-project-gallery-lightbox__arrow:hover{

    background:
        var(--mdnpg-red);

}


.mdn-project-gallery-lightbox__arrow--prev{

    left:-72px;

}


.mdn-project-gallery-lightbox__arrow--next{

    right:-72px;

}


.mdn-project-gallery-lightbox__arrow--prev:hover{

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

}


.mdn-project-gallery-lightbox__arrow--next:hover{

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

}


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

.mdn-project-gallery-lightbox__bottom{

    min-height:50px;

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

}


/* ============================================================
   COUNTER
============================================================ */

.mdn-project-gallery-lightbox__counter{

    display:flex;

    align-items:center;

    gap:8px;

}


.mdn-project-gallery-lightbox__counter strong{

    color:
        var(--mdnpg-red-bright);

    font-size:20px;

}


.mdn-project-gallery-lightbox__counter span{

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

}


.mdn-project-gallery-lightbox__counter small{

    color:#8d9bad;

    font-size:14px;

}


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

.mdn-project-gallery-lightbox__company{

    color:#8d9bad;

    font-size:14px;

}


/* ============================================================
   BODY LOCK
============================================================ */

body.mdn-project-gallery-open{

    overflow:hidden;

}


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

@media(max-width:1050px){

    .mdn-projects-breadcrumb__container,
    .mdn-project-gallery__container{

        width:
            calc(100% - 46px);

    }


    .mdn-project-gallery__grid{

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

    }


    .mdn-project-gallery-lightbox{

        padding:
            25px 70px;

    }


    .mdn-project-gallery-lightbox__arrow--prev{

        left:-58px;

    }


    .mdn-project-gallery-lightbox__arrow--next{

        right:-58px;

    }

}


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

@media(max-width:700px){

    /* BREADCRUMB */

    .mdn-projects-breadcrumb{

        min-height:530px;

        padding:
            65px 0 75px;

    }


    .mdn-projects-breadcrumb__background{

        background-position:
            58% center;

    }


    .mdn-projects-breadcrumb__container,
    .mdn-project-gallery__container{

        width:
            calc(100% - 30px);

    }


    .mdn-projects-breadcrumb__nav{

        margin-bottom:38px;

    }


    .mdn-projects-breadcrumb__layout{

        align-items:flex-start;

        flex-direction:column;

        gap:30px;

    }


    .mdn-projects-breadcrumb h1{

        font-size:
            clamp(
                42px,
                12vw,
                59px
            );

    }


    .mdn-projects-breadcrumb__content > p{

        font-size:15px;

    }


    .mdn-projects-breadcrumb__counter{

        min-width:0;

    }


    /* GALLERY */

    .mdn-project-gallery{

        padding:
            75px 0 85px;

    }


    .mdn-project-gallery__header{

        grid-template-columns:1fr;

        gap:20px;

    }


    .mdn-project-gallery__header-right{

        align-items:flex-start;

        flex-direction:column;

    }


    .mdn-project-gallery__header-right > p{

        text-align:left;

    }


    .mdn-project-gallery__total{

        padding-left:0;

        border-left:0;

    }


    .mdn-project-gallery__grid{

        grid-template-columns:1fr;

        gap:14px;

    }


    /*
     * Standard ratio maintained on mobile.
     */
    .mdn-project-gallery-card__button{

        aspect-ratio:
            4 / 3;

    }


    .mdn-project-gallery__footer{

        align-items:flex-start;

        flex-direction:column;

    }


    /* LIGHTBOX */

    .mdn-project-gallery-lightbox{

        padding:
            10px;

    }


    .mdn-project-gallery-lightbox__content{

        width:100%;

        height:
            calc(100dvh - 20px);

        padding:
            57px 0 70px;

    }


    .mdn-project-gallery-lightbox__image{

        width:100%;
        height:100%;

        border-radius:11px;

    }


    /* X */

    .mdn-project-gallery-lightbox__close{

        width:49px;
        height:49px;

        top:13px;
        right:13px;

        font-size:19px;

    }


    /* brand */

    .mdn-project-gallery-lightbox__brand{

        top:5px;
        left:4px;

    }


    .mdn-project-gallery-lightbox__brand > span{

        width:43px;
        height:43px;

    }


    .mdn-project-gallery-lightbox__brand small{

        display:none;

    }


    /* arrows */

    .mdn-project-gallery-lightbox__arrow{

        width:45px;
        height:45px;

        top:auto;

        bottom:7px;

        transform:none;

    }


    .mdn-project-gallery-lightbox__arrow--prev{

        left:
            calc(50% - 59px);

    }


    .mdn-project-gallery-lightbox__arrow--next{

        right:
            calc(50% - 59px);

    }


    .mdn-project-gallery-lightbox__arrow--prev:hover,
    .mdn-project-gallery-lightbox__arrow--next:hover{

        transform:none;

    }


    .mdn-project-gallery-lightbox__bottom{

        align-items:flex-start;

    }


    .mdn-project-gallery-lightbox__company{

        display:none;

    }

}


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

@media(max-width:480px){

    .mdn-projects-breadcrumb__container,
    .mdn-project-gallery__container{

        width:
            calc(100% - 24px);

    }


    .mdn-projects-breadcrumb h1{

        font-size:40px;

    }


    .mdn-project-gallery-card__caption{

        left:14px;
        right:14px;
        bottom:14px;

    }


    .mdn-project-gallery-lightbox__close{

        width:46px;
        height:46px;

        top:9px;
        right:9px;

    }


    .mdn-project-gallery-lightbox__content{

        height:
            calc(100dvh - 16px);

    }

}


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

.mdn-projects-breadcrumb a:focus-visible,
.mdn-project-gallery button:focus-visible,
.mdn-project-gallery a:focus-visible,
.mdn-project-gallery-lightbox button:focus-visible{

    outline:
        2px solid var(--mdnpg-red-bright);

    outline-offset:4px;

}


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

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

    .mdn-project-gallery *,
    .mdn-project-gallery-lightbox *,
    .mdn-projects-breadcrumb *{

        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;

    }

}


/* ============================================================
   MDN GENERAL CONTRACTOR LLC
   CONTACT US
============================================================ */

:root{

    --mdnc-navy-1000:#01050d;
    --mdnc-navy-950:#020916;
    --mdnc-navy-900:#031127;
    --mdnc-navy-850:#061a38;

    --mdnc-red:#d80b20;
    --mdnc-red-bright:#ff1834;
    --mdnc-red-soft:#ff5267;

    --mdnc-blue:#2478ff;

    --mdnc-white:#ffffff;

    --mdnc-light:#f7f9fc;
    --mdnc-light-2:#eef3f8;

    --mdnc-text:#45556a;
    --mdnc-muted:#8290a2;

    --mdnc-border:#dde5ee;

    --mdnc-container:1480px;

}


/* ============================================================
   RESET
============================================================ */

.mdn-contact-hero *,
.mdn-contact-main *,
.mdn-contact-result *{
    box-sizing:border-box;
}


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

.mdn-contact-hero{

min-height: 510px;

position:relative;

overflow:hidden;

display:flex;

align-items:center;

padding: 5px 0 10px;

color:#fff;

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

background:
        var(--mdnc-navy-950);
}


.mdn-contact-hero__background{

    position:absolute;

    inset:0;

    background-image:
        url("https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&w=2200&q=90");

    background-size:cover;

    background-position:center;

    transform:scale(1.03);

}


.mdn-contact-hero__overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            90deg,
            rgba(1,5,13,.98),
            rgba(3,17,39,.91) 44%,
            rgba(3,17,39,.66)
        ),

        linear-gradient(
            0deg,
            rgba(1,5,13,.90),
            rgba(1,5,13,.12)
        );

}


.mdn-contact-hero__grid{

    position:absolute;

    inset:0;

    opacity:.23;

    background-image:

        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size:
        58px 58px;

}


.mdn-contact-hero::before{

    content:"";

    position:absolute;

    z-index:10;

    top:0;
    left:0;

    width:100%;
    height:3px;

    background:
        linear-gradient(
            90deg,
            #2478ff,
            #ff1834,
            transparent
        );

}


.mdn-contact-hero__glow{

    position:absolute;

    border-radius:50%;

    filter:blur(30px);

}


.mdn-contact-hero__glow--red{

    width:550px;
    height:550px;

    right:-300px;
    top:-300px;

    background:
        radial-gradient(
            circle,
            rgba(255,24,52,.30),
            transparent 68%
        );

}


.mdn-contact-hero__glow--blue{

    width:500px;
    height:500px;

    left:-300px;
    bottom:-320px;

    background:
        radial-gradient(
            circle,
            rgba(36,120,255,.18),
            transparent 68%
        );

}


.mdn-contact-hero__container,
.mdn-contact-main__container{

    width:
        min(
            var(--mdnc-container),
            calc(100% - 70px)
        );

    margin:0 auto;

    position:relative;

    z-index:5;

}


/* ============================================================
   BREADCRUMB
============================================================ */

.mdn-contact-hero__breadcrumb{

    margin-bottom:52px;

    display:flex;

    align-items:center;

    gap:11px;

    color:#9ca9b9;

    font-size:14px;

}


.mdn-contact-hero__breadcrumb a{

    color:#fff;

    text-decoration:none;

    font-weight:700;

}


.mdn-contact-hero__breadcrumb i{

    color:
        var(--mdnc-red-bright);

    font-size:9px;

}


/* ============================================================
   HERO LAYOUT
============================================================ */

.mdn-contact-hero__layout{

    display:grid;

    grid-template-columns:
        1fr 350px;

    align-items:end;

    gap:90px;

}


.mdn-contact-hero__content{

    max-width:850px;

}


.mdn-contact-hero__eyebrow,
.mdn-contact-info__eyebrow{

    margin-bottom:16px;

    display:flex;

    align-items:center;

    gap:12px;

    color:
        var(--mdnc-red-soft);

    font-size:14px;

    font-weight:800;

    letter-spacing:.09em;

}


.mdn-contact-hero__eyebrow > span,
.mdn-contact-info__eyebrow > span{

    width:44px;
    height:2px;

    position:relative;

    background:
        var(--mdnc-red-bright);

}


.mdn-contact-hero__eyebrow > span::after,
.mdn-contact-info__eyebrow > span::after{

    content:"";

    width:7px;
    height:7px;

    position:absolute;

    right:0;
    top:50%;

    transform:
        translateY(-50%);

    border-radius:50%;

    background:
        var(--mdnc-red-bright);

}


.mdn-contact-hero h1{

    margin:
        0 0 23px;

    color:#fff;

    font-size:
        clamp(
            52px,
            5.6vw,
            84px
        );

    line-height:.97;

    letter-spacing:-.055em;

}


.mdn-contact-hero h1 span{

    display:block;

    color:
        var(--mdnc-red-bright);

}


.mdn-contact-hero__content > p{

    max-width:680px;

    margin:0;

    padding-left:19px;

    border-left:
        3px solid var(--mdnc-red-bright);

    color:#c5cfdb;

    font-size:16px;

    line-height:1.8;

}


/* ============================================================
   HERO CONTACT CARD
============================================================ */

.mdn-contact-hero__card{

    padding:25px;

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

    border-radius:19px;

    background:
        rgba(3,17,39,.73);

    backdrop-filter:blur(17px);

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

}


.mdn-contact-hero__card-brand{

    display:flex;

    align-items:center;

    gap:12px;

}


.mdn-contact-hero__card-brand > span{

    width:55px;
    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:13px;

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #d80b20
        );

    font-weight:800;

}


.mdn-contact-hero__card-brand > div,
.mdn-contact-hero__card > a > div{

    display:flex;

    flex-direction:column;

}


.mdn-contact-hero__card small{

    color:#8d9bad;

    font-size:14px;

}


.mdn-contact-hero__card strong{

    margin-top:3px;

    color:#fff;

    font-size:14px;

}


.mdn-contact-hero__card-line{

    height:1px;

    margin:
        20px 0 10px;

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

}


.mdn-contact-hero__card > a{

    min-height:67px;

    display:flex;

    align-items:center;

    gap:11px;

    border-bottom:
        1px solid rgba(255,255,255,.07);

    color:#fff;

    text-decoration:none;

}


.mdn-contact-hero__card > a:last-child{

    border-bottom:0;

}


.mdn-contact-hero__card > a > span{

    width:42px;
    height:42px;

    flex:0 0 42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:10px;

    color:
        var(--mdnc-red-bright);

    background:
        rgba(255,24,52,.08);

}


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

.mdn-contact-main{

    padding:
        115px 0 125px;

    background:
        linear-gradient(
            135deg,
            #fff,
            #f8fafd,
            #f0f4f9
        );

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

}


.mdn-contact-main__container{

    display:grid;

    grid-template-columns:
        minmax(300px,.78fr)
        minmax(0,1.22fr);

    align-items:start;

    gap:
        clamp(
            55px,
            7vw,
            105px
        );

}


/* ============================================================
   LEFT INFO
============================================================ */

.mdn-contact-info{

    position:sticky;

    top:120px;

}


.mdn-contact-info__eyebrow{

    color:
        var(--mdnc-red);

}


.mdn-contact-info > h2{

    margin:
        0 0 22px;

    color:
        var(--mdnc-navy-850);

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

    line-height:1.03;

    letter-spacing:-.045em;

}


.mdn-contact-info > h2 span{

    display:block;

    color:
        var(--mdnc-red);

}


.mdn-contact-info > p{

    margin:
        0 0 28px;

    color:
        var(--mdnc-text);

    font-size:16px;

    line-height:1.8;

    text-align:justify;

}


/* ============================================================
   INFO ITEMS
============================================================ */

.mdn-contact-info__items{

    display:flex;

    flex-direction:column;

    gap:9px;

}


.mdn-contact-info__item{

    min-height:88px;

    padding:14px;

    display:grid;

    grid-template-columns:
        49px 1fr auto;

    align-items:center;

    gap:13px;

    border:
        1px solid #e1e8f0;

    border-radius:14px;

    color:
        var(--mdnc-navy-850);

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

    text-decoration:none;

    box-shadow:
        0 8px 25px rgba(6,26,56,.04);

}


.mdn-contact-info__item > span{

    width:49px;
    height:49px;

    display:flex;

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

    border-radius:12px;

    color:
        var(--mdnc-red);

    background:
        #fff0f2;

}


.mdn-contact-info__item > div{

    display:flex;

    flex-direction:column;

}


.mdn-contact-info__item small{

    color:
        var(--mdnc-red);

    font-size:14px;

    font-weight:800;

}


.mdn-contact-info__item strong{

    margin-top:3px;

    color:
        var(--mdnc-navy-850);

    font-size:15px;

}


.mdn-contact-info__item em{

    margin-top:4px;

    color:
        var(--mdnc-muted);

    font-size:14px;

    font-style:normal;

}


.mdn-contact-info__item > i{

    color:#a0acba;

}


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

.mdn-contact-info__services{

    margin-top:25px;

    padding-top:22px;

    border-top:
        1px solid var(--mdnc-border);

}


.mdn-contact-info__services > span{

    display:block;

    margin-bottom:13px;

    color:
        var(--mdnc-navy-850);

    font-size:14px;

    font-weight:800;

}


.mdn-contact-info__services > div{

    display:flex;

    flex-wrap:wrap;

    gap:7px;

}


.mdn-contact-info__services small{

    min-height:34px;

    padding:
        0 11px;

    display:inline-flex;

    align-items:center;

    border:
        1px solid #e1e7ee;

    border-radius:30px;

    color:
        var(--mdnc-text);

    background:#fff;

    font-size:14px;

}


/* ============================================================
   FORM WRAPPER
============================================================ */

.mdn-contact-form-wrap{

    padding:
        39px;

    border:
        1px solid #dfe7ef;

    border-radius:22px;

    background:#fff;

    box-shadow:
        0 30px 80px rgba(6,26,56,.10);

}


.mdn-contact-form-wrap__head{

    margin-bottom:31px;

    padding-bottom:25px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    border-bottom:
        1px solid #e7ecf2;

}


.mdn-contact-form-wrap__head > div > span{

    color:
        var(--mdnc-red);

    font-size:14px;

    font-weight:800;

}


.mdn-contact-form-wrap__head h2{

    margin:
        6px 0 0;

    color:
        var(--mdnc-navy-850);

    font-size:
        clamp(
            28px,
            3vw,
            41px
        );

    line-height:1.1;

}


.mdn-contact-form-wrap__secure{

    min-height:40px;

    padding:
        0 13px;

    display:flex;

    align-items:center;

    gap:8px;

    border:
        1px solid rgba(36,120,255,.12);

    border-radius:10px;

    color:
        var(--mdnc-blue);

    background:
        rgba(36,120,255,.05);

    font-size:14px;

    font-weight:700;

}


/* ============================================================
   FORM
============================================================ */

.mdn-contact-form{

    display:flex;

    flex-direction:column;

    gap:21px;

}


.mdn-contact-form__row{

    display:grid;

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

    gap:18px;

}


/* ============================================================
   FIELD
============================================================ */

.mdn-contact-field{

    min-width:0;

}


.mdn-contact-field > label{

    display:block;

    margin-bottom:9px;

    color:
        var(--mdnc-navy-850);

    font-size:14px;

    font-weight:800;

}


.mdn-contact-field > label span{

    color:
        var(--mdnc-red-bright);

}


/* ============================================================
   INPUT CONTROL
============================================================ */

.mdn-contact-field__control{

    min-height:58px;

    position:relative;

    display:flex;

    align-items:center;

    border:
        1px solid #dce4ed;

    border-radius:12px;

    background:
        #fafbfd;

    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;

}


.mdn-contact-field__control:focus-within{

    border-color:
        rgba(36,120,255,.48);

    background:#fff;

    box-shadow:
        0 0 0 4px rgba(36,120,255,.07);

}


.mdn-contact-field__control > i{

    width:49px;

    flex:0 0 49px;

    color:
        var(--mdnc-red);

    text-align:center;

    font-size:14px;

}


.mdn-contact-field__control input,
.mdn-contact-field__control select,
.mdn-contact-field__control textarea{

    width:100%;

    border:0;

    outline:0;

    color:
        var(--mdnc-navy-850);

    background:transparent;

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

    font-size:14px;

}


.mdn-contact-field__control input,
.mdn-contact-field__control select{

    height:56px;

    padding:
        0 14px 0 0;

}


.mdn-contact-field__control select{

    cursor:pointer;

}


.mdn-contact-field__control--textarea{

    min-height:180px;

    align-items:flex-start;

}


.mdn-contact-field__control--textarea > i{

    padding-top:20px;

}


.mdn-contact-field__control textarea{

    min-height:178px;

    padding:
        18px 15px 18px 0;

    resize:vertical;

    line-height:1.65;

}


.mdn-contact-field__control input::placeholder,
.mdn-contact-field__control textarea::placeholder{

    color:#9ba7b5;

}


/* ============================================================
   FIELD ERROR
============================================================ */

.mdn-contact-field.is-error
.mdn-contact-field__control{

    border-color:
        rgba(255,24,52,.55);

    box-shadow:
        0 0 0 4px rgba(255,24,52,.06);

}


.mdn-contact-field__error{

    min-height:18px;

    margin-top:6px;

    display:block;

    color:
        var(--mdnc-red);

    font-size:14px;

}


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

.mdn-contact-field__bottom{

    display:flex;

    justify-content:space-between;

    gap:15px;

}


.mdn-contact-field__bottom > span{

    margin-top:6px;

    color:
        var(--mdnc-muted);

    font-size:14px;

}


/* ============================================================
   HONEYPOT
============================================================ */

.mdn-contact-hp{

    position:absolute !important;

    left:-99999px !important;

    width:1px !important;
    height:1px !important;

    overflow:hidden !important;

}


/* ============================================================
   FORM FOOTER
============================================================ */

.mdn-contact-form__footer{

    margin-top:5px;

    padding-top:23px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    border-top:
        1px solid #e8edf2;

}


.mdn-contact-form__footer > div{

    display:flex;

    align-items:center;

    gap:8px;

    color:
        var(--mdnc-muted);

    font-size:14px;

}


.mdn-contact-form__footer > div i{

    color:
        var(--mdnc-blue);

}


/* ============================================================
   SUBMIT
============================================================ */

.mdn-contact-submit{

    min-width:220px;

    min-height:58px;

    padding:
        0 22px;

    position:relative;

    overflow:hidden;

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

    border-radius:13px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #ff1834,
            #d80b20
        );

    box-shadow:
        0 15px 36px rgba(255,24,52,.22);

    cursor:pointer;

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

    font-size:14px;

    font-weight:800;

}


.mdn-contact-submit__normal,
.mdn-contact-submit__loading{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

}


.mdn-contact-submit__loading{

    display:none;

}


.mdn-contact-submit.is-loading
.mdn-contact-submit__normal{

    display:none;

}


.mdn-contact-submit.is-loading
.mdn-contact-submit__loading{

    display:flex;

}


.mdn-contact-submit__loading i{

    animation:
        mdnContactSpin .8s linear infinite;

}


@keyframes mdnContactSpin{

    to{
        transform:rotate(360deg);
    }

}


/* ============================================================
   RESULT POPUP
============================================================ */

.mdn-contact-result{

    position:fixed;

    inset:0;

    z-index:999999;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

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

    transition:
        opacity .3s ease,
        visibility .3s ease;

}


.mdn-contact-result.is-open{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}


.mdn-contact-result__overlay{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    border:0;

    background:
        rgba(1,5,13,.90);

    backdrop-filter:blur(10px);

    cursor:pointer;

}


.mdn-contact-result__card{

    width:
        min(
            520px,
            100%
        );

    padding:
        42px 35px 35px;

    position:relative;

    z-index:2;

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

    border-radius:22px;

    color:#fff;

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(255,24,52,.18),
            transparent 36%
        ),

        linear-gradient(
            145deg,
            #031127,
            #01050d
        );

    box-shadow:
        0 35px 90px rgba(0,0,0,.45);

    text-align:center;

}


.mdn-contact-result__close{

    width:43px;
    height:43px;

    position:absolute;

    top:15px;
    right:15px;

    border:0;

    border-radius:50%;

    color:#fff;

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

    cursor:pointer;

    font-size:17px;

}


.mdn-contact-result__icon{

    width:75px;
    height:75px;

    margin:
        0 auto 22px;

    display:flex;

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

    border-radius:50%;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #2478ff,
            #1255b8
        );

    box-shadow:
        0 15px 40px rgba(36,120,255,.23);

    font-size:25px;

}


.mdn-contact-result.is-error
.mdn-contact-result__icon{

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #d80b20
        );

    box-shadow:
        0 15px 40px rgba(255,24,52,.23);

}


.mdn-contact-result__eyebrow{

    color:
        var(--mdnc-red-soft);

    font-size:14px;

    font-weight:800;

}


.mdn-contact-result h2{

    margin:
        8px 0 13px;

    color:#fff;

    font-size:34px;

}


.mdn-contact-result p{

    margin:
        0 auto 25px;

    color:#b9c4d2;

    font-size:15px;

    line-height:1.7;

}


.mdn-contact-result__button{

    min-height:52px;

    padding:
        0 20px;

    display:inline-flex;

    align-items:center;

    gap:9px;

    border:0;

    border-radius:11px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #d80b20
        );

    cursor:pointer;

    font-weight:800;

}


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

@media(max-width:1050px){

    .mdn-contact-hero__container,
    .mdn-contact-main__container{

        width:
            calc(100% - 46px);

    }


    .mdn-contact-hero__layout{

        grid-template-columns:1fr;

    }


    .mdn-contact-hero__card{

        width:
            min(
                500px,
                100%
            );

    }


    .mdn-contact-main__container{

        grid-template-columns:1fr;

    }


    .mdn-contact-info{

        position:relative;

        top:auto;

    }

}


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

@media(max-width:700px){

    .mdn-contact-hero{

        min-height:auto;

        padding:
            65px 0 75px;

    }


    .mdn-contact-hero__container,
    .mdn-contact-main__container{

        width:
            calc(100% - 30px);

    }


    .mdn-contact-hero h1{

        font-size:
            clamp(
                41px,
                12vw,
                58px
            );

    }


    .mdn-contact-main{

        padding:
            75px 0 85px;

    }


    .mdn-contact-form-wrap{

        padding:
            28px 20px;

    }


    .mdn-contact-form-wrap__head{

        align-items:flex-start;

        flex-direction:column;

    }


    .mdn-contact-form__row{

        grid-template-columns:1fr;

    }


    .mdn-contact-form__footer{

        align-items:flex-start;

        flex-direction:column;

    }


    .mdn-contact-submit{

        width:100%;

    }

}


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

@media(max-width:480px){

    .mdn-contact-hero__container,
    .mdn-contact-main__container{

        width:
            calc(100% - 24px);

    }


    .mdn-contact-hero h1{

        font-size:39px;

    }


    .mdn-contact-hero__card{

        padding:19px;

    }


    .mdn-contact-form-wrap{

        padding:
            25px 16px;

    }

}


/* ============================================================
   MDN GENERAL CONTRACTOR LLC
   SERVICES PAGE
============================================================ */

:root{

    --mdnsp-navy-1000:#01050d;
    --mdnsp-navy-950:#020916;
    --mdnsp-navy-900:#031127;
    --mdnsp-navy-850:#061a38;
    --mdnsp-navy-800:#08234b;

    --mdnsp-blue:#2478ff;
    --mdnsp-blue-dark:#1255b8;

    --mdnsp-red:#d80b20;
    --mdnsp-red-dark:#a20718;
    --mdnsp-red-bright:#ff1834;
    --mdnsp-red-soft:#ff5267;

    --mdnsp-white:#ffffff;

    --mdnsp-light:#f7f9fc;
    --mdnsp-light-2:#eef3f8;

    --mdnsp-title:#061a38;
    --mdnsp-text:#46566b;
    --mdnsp-muted:#7e8d9f;

    --mdnsp-border:#dde5ee;

    --mdnsp-container:1480px;

}


/* ============================================================
   RESET
============================================================ */

.mdn-services-page-hero *,
.mdn-services-page *,
.mdn-services-page-cta *{

    box-sizing:border-box;

}


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

.mdn-services-page-hero{

min-height: 510px;

position:relative;

overflow:hidden;

display:flex;

align-items:center;

padding: 5px 0 20px;

color:#fff;

background:
        var(--mdnsp-navy-950);

font-family:
        "Manrope",
        Arial,
        sans-serif;
}


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

.mdn-services-page-hero__background{

    position:absolute;

    inset:0;

    background-image:
        url("https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&w=2200&q=90");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    transform:
        scale(1.035);

}


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

.mdn-services-page-hero__overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            90deg,
            rgba(1,5,13,.98) 0%,
            rgba(2,9,22,.94) 34%,
            rgba(3,17,39,.77) 65%,
            rgba(3,17,39,.55) 100%
        ),

        linear-gradient(
            0deg,
            rgba(1,5,13,.90),
            rgba(1,5,13,.10)
        );

}


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

.mdn-services-page-hero__grid{

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.23;

    background-image:

        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size:
        58px 58px;

}


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

.mdn-services-page-hero::before{

    content:"";

    width:100%;
    height:3px;

    position:absolute;

    z-index:10;

    top:0;
    left:0;

    background:
        linear-gradient(
            90deg,
            var(--mdnsp-blue),
            var(--mdnsp-red-bright) 48%,
            transparent 90%
        );

}


/* ============================================================
   ARCHITECTURAL LINE
============================================================ */

.mdn-services-page-hero::after{

    content:"";

    width:2px;
    height:850px;

    position:absolute;

    z-index:4;

    top:-270px;
    right:17%;

    transform:
        rotate(27deg);

    pointer-events:none;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,24,52,.72),
            transparent
        );

    box-shadow:
        0 0 20px rgba(255,24,52,.23);

}


/* ============================================================
   GLOWS
============================================================ */

.mdn-services-page-hero__glow{

    position:absolute;

    pointer-events:none;

    border-radius:50%;

    filter:
        blur(28px);

}


.mdn-services-page-hero__glow--red{

    width:550px;
    height:550px;

    top:-310px;
    right:-270px;

    background:
        radial-gradient(
            circle,
            rgba(255,24,52,.30),
            transparent 68%
        );

}


.mdn-services-page-hero__glow--blue{

    width:500px;
    height:500px;

    left:-300px;
    bottom:-330px;

    background:
        radial-gradient(
            circle,
            rgba(36,120,255,.19),
            transparent 68%
        );

}


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

.mdn-services-page-hero__container,
.mdn-services-page__container,
.mdn-services-page-cta__container{

    width:
        min(
            var(--mdnsp-container),
            calc(100% - 70px)
        );

    margin:
        0 auto;

}


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

.mdn-services-page-hero__container{

    position:relative;

    z-index:6;

}


/* ============================================================
   BREADCRUMB
============================================================ */

.mdn-services-page-hero__breadcrumb{

    margin-bottom:52px;

    display:flex;

    align-items:center;

    gap:11px;

    color:#9ca9b9;

    font-size:14px;

}


.mdn-services-page-hero__breadcrumb a{

    color:#fff;

    text-decoration:none;

    font-weight:700;

}


.mdn-services-page-hero__breadcrumb a:hover{

    color:
        var(--mdnsp-red-soft);

}


.mdn-services-page-hero__breadcrumb i{

    color:
        var(--mdnsp-red-bright);

    font-size:9px;

}


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

.mdn-services-page-hero__content{

    max-width:920px;

}


/* ============================================================
   EYEBROW
============================================================ */

.mdn-services-page-hero__eyebrow{

    margin-bottom:17px;

    display:flex;

    align-items:center;

    gap:12px;

    color:
        var(--mdnsp-red-soft);

    font-size:14px;

    font-weight:800;

    letter-spacing:.09em;

}


.mdn-services-page-hero__eyebrow > span{

    width:44px;
    height:2px;

    position:relative;

    display:block;

    background:
        var(--mdnsp-red-bright);

}


.mdn-services-page-hero__eyebrow > span::after{

    content:"";

    width:7px;
    height:7px;

    position:absolute;

    top:50%;
    right:0;

    transform:
        translateY(-50%);

    border-radius:50%;

    background:
        var(--mdnsp-red-bright);

}


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

.mdn-services-page-hero h1{

    max-width:920px;

    margin:
        0 0 24px;

    color:#fff;

    font-size:
        clamp(
            52px,
            5.4vw,
            82px
        );

    font-weight:800;

    line-height:.98;

    letter-spacing:-.055em;

}


.mdn-services-page-hero h1 span{

    display:block;

    color:
        var(--mdnsp-red-bright);

}


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

.mdn-services-page-hero__content > p{

    max-width:720px;

    margin:
        0 0 28px;

    padding-left:19px;

    border-left:
        3px solid var(--mdnsp-red-bright);

    color:#c3cedb;

    font-size:16px;

    line-height:1.8;

}


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

.mdn-services-page-hero__button{

    min-height:56px;

    padding:
        0 22px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:11px;

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

    border-radius:13px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #ff1834 45%,
            #d80b20
        );

    box-shadow:
        0 15px 38px rgba(255,24,52,.24);

    text-decoration:none;

    font-size:14px;

    font-weight:800;

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.mdn-services-page-hero__button:hover{

    transform:
        translateY(-3px);

    box-shadow:
        0 20px 46px rgba(255,24,52,.32);

}


/* ============================================================
   MAIN SERVICES SECTION
============================================================ */

.mdn-services-page{

    padding:
        115px 0 125px;

    position:relative;

    background:
        #f7f9fc;

    color:
        var(--mdnsp-text);

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

}


/* ============================================================
   MAIN LAYOUT
============================================================ */

.mdn-services-page__container{

    display:grid;

    grid-template-columns:
        325px minmax(0,1fr);

    align-items:start;

    gap:
        clamp(
            45px,
            5vw,
            80px
        );

}


/* ============================================================
   SIDEBAR
============================================================ */

.mdn-services-sidebar{

    min-width:0;

}


/*
 * This is what makes the sidebar
 * follow the visitor while scrolling.
 */
.mdn-services-sidebar__inner{

    position:sticky;

    top:105px;

    padding:
        26px;

    border:
        1px solid var(--mdnsp-border);

    border-radius:20px;

    background:#fff;

    box-shadow:
        0 20px 55px rgba(6,26,56,.08);

}


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

.mdn-services-sidebar__heading{

    padding-bottom:21px;

    border-bottom:
        1px solid #e8edf3;

}


.mdn-services-sidebar__eyebrow{

    color:
        var(--mdnsp-red);

    font-size:14px;

    font-weight:800;

    letter-spacing:.08em;

}


.mdn-services-sidebar__heading h2{

    margin:
        6px 0 9px;

    color:
        var(--mdnsp-title);

    font-size:28px;

    line-height:1.12;

    letter-spacing:-.03em;

}


.mdn-services-sidebar__heading p{

    margin:0;

    color:
        var(--mdnsp-muted);

    font-size:14px;

    line-height:1.7;

}


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

.mdn-services-sidebar__toggle{

    width:100%;

    min-height:56px;

    margin-top:18px;

    padding:
        0 15px;

    display:none;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    border:
        1px solid #dce4ed;

    border-radius:12px;

    color:
        var(--mdnsp-title);

    background:
        #f7f9fc;

    cursor:pointer;

    font-family:inherit;

    font-size:14px;

    font-weight:800;

}


.mdn-services-sidebar__toggle > span{

    display:flex;

    align-items:center;

    gap:10px;

}


.mdn-services-sidebar__toggle > span i{

    color:
        var(--mdnsp-red);

}


.mdn-services-sidebar__toggle > i{

    transition:
        transform .3s ease;

}


.mdn-services-sidebar__toggle.is-open > i{

    transform:
        rotate(180deg);

}


/* ============================================================
   SIDEBAR NAV
============================================================ */

.mdn-services-sidebar__nav{

    margin-top:18px;

    display:flex;

    flex-direction:column;

    gap:5px;

}


/* ============================================================
   SIDEBAR LINKS
============================================================ */

.mdn-services-sidebar__nav > a{

    min-height:59px;

    padding:
        8px 9px;

    display:grid;

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

    align-items:center;

    gap:11px;

    border:
        1px solid transparent;

    border-radius:11px;

    color:
        var(--mdnsp-text);

    background:
        transparent;

    text-decoration:none;

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;

}


.mdn-services-sidebar__nav > a:hover{

    transform:
        translateX(3px);

    border-color:
        #e4eaf1;

    background:
        #f7f9fc;

}


/* ============================================================
   ACTIVE SIDEBAR ITEM
============================================================ */

.mdn-services-sidebar__nav > a.is-active{

    border-color:
        rgba(216,11,32,.13);

    background:
        linear-gradient(
            90deg,
            rgba(255,24,52,.075),
            rgba(36,120,255,.025)
        );

}


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

.mdn-services-sidebar__nav > a > span{

    width:40px;
    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:
        1px solid rgba(216,11,32,.10);

    border-radius:10px;

    color:
        var(--mdnsp-red);

    background:
        #fff2f4;

    font-size:14px;

    transition:
        color .3s ease,
        background .3s ease;

}


.mdn-services-sidebar__nav > a.is-active > span{

    color:#fff;

    background:
        linear-gradient(
            135deg,
            var(--mdnsp-red-soft),
            var(--mdnsp-red)
        );

}


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

.mdn-services-sidebar__nav > a > div{

    min-width:0;

    display:flex;

    flex-direction:column;

}


.mdn-services-sidebar__nav small{

    color:
        var(--mdnsp-muted);

    font-size:14px;

    line-height:1;

}


.mdn-services-sidebar__nav strong{

    margin-top:4px;

    overflow:hidden;

    color:
        var(--mdnsp-title);

    font-size:14px;

    font-weight:800;

    white-space:nowrap;

    text-overflow:ellipsis;

}


.mdn-services-sidebar__nav > a > i{

    color:#a2adba;

    font-size:12px;

    transition:
        color .3s ease,
        transform .3s ease;

}


.mdn-services-sidebar__nav > a:hover > i,
.mdn-services-sidebar__nav > a.is-active > i{

    color:
        var(--mdnsp-red);

    transform:
        translateX(3px);

}


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

.mdn-services-sidebar__contact{

    margin-top:23px;

    padding:
        17px;

    display:flex;

    align-items:center;

    gap:13px;

    border:
        1px solid rgba(36,120,255,.12);

    border-radius:14px;

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(255,24,52,.07),
            transparent 45%
        ),

        #f8fafd;

}


.mdn-services-sidebar__contact-icon{

    width:48px;
    height:48px;

    flex:
        0 0 48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            var(--mdnsp-blue),
            var(--mdnsp-blue-dark)
        );

}


.mdn-services-sidebar__contact > div{

    min-width:0;

    display:flex;

    flex-direction:column;

}


.mdn-services-sidebar__contact small{

    color:
        var(--mdnsp-red);

    font-size:14px;

    font-weight:800;

}


.mdn-services-sidebar__contact strong{

    margin-top:2px;

    color:
        var(--mdnsp-title);

    font-size:14px;

}


.mdn-services-sidebar__contact a{

    margin-top:3px;

    color:
        var(--mdnsp-blue-dark);

    text-decoration:none;

    font-size:15px;

    font-weight:800;

}


/* ============================================================
   MAIN COLUMN
============================================================ */

.mdn-services-page__main{

    min-width:0;

}


/* ============================================================
   INTRO
============================================================ */

.mdn-services-page__intro{

    margin-bottom:38px;

    display:grid;

    grid-template-columns:
        1fr .68fr;

    align-items:end;

    gap:60px;

}


.mdn-services-page__intro > div > span{

    color:
        var(--mdnsp-red);

    font-size:14px;

    font-weight:800;

    letter-spacing:.08em;

}


.mdn-services-page__intro h2{

    max-width:720px;

    margin:
        7px 0 0;

    color:
        var(--mdnsp-title);

    font-size:
        clamp(
            37px,
            3.8vw,
            58px
        );

    line-height:1.04;

    letter-spacing:-.045em;

}


.mdn-services-page__intro h2 strong{

    color:
        var(--mdnsp-red);

}


.mdn-services-page__intro > p{

    margin:0;

    color:
        var(--mdnsp-text);

    font-size:15px;

    line-height:1.8;

    text-align:justify;

}


/* ============================================================
   CARDS GRID
============================================================ */

.mdn-services-page__grid{

    display:grid;

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

    gap:20px;

}


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

.mdn-service-page-card{

    min-width:0;

    scroll-margin-top:125px;

}


/* ============================================================
   SERVICE LINK
============================================================ */

.mdn-service-page-card__link{

    min-height:100%;

    overflow:hidden;

    display:grid;

    grid-template-rows:
        230px 1fr;

    border:
        1px solid var(--mdnsp-border);

    border-radius:18px;

    color:
        var(--mdnsp-text);

    background:#fff;

    box-shadow:
        0 12px 35px rgba(6,26,56,.055);

    text-decoration:none;

    transition:
        transform .38s ease,
        box-shadow .38s ease,
        border-color .38s ease;

}


.mdn-service-page-card__link:hover{

    transform:
        translateY(-7px);

    border-color:
        rgba(216,11,32,.24);

    box-shadow:
        0 26px 60px rgba(6,26,56,.13);

}


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

.mdn-service-page-card__visual{

    height:230px;

    margin:0;

    position:relative;

    overflow:hidden;

    background:
        #e9eef4;

}


.mdn-service-page-card__visual img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transform:
        scale(1.01);

    transition:
        transform .7s ease;

}


.mdn-service-page-card__link:hover
.mdn-service-page-card__visual img{

    transform:
        scale(1.065);

}


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

.mdn-service-page-card__visual > span{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(2,9,22,.02),
            rgba(2,9,22,.24)
        );

}


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

.mdn-service-page-card__content{

    padding:
        23px 24px 25px;

}


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

.mdn-service-page-card__top{

    margin-bottom:18px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

}


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

.mdn-service-page-card__icon{

    width:50px;
    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:
        1px solid rgba(216,11,32,.10);

    border-radius:12px;

    color:
        var(--mdnsp-red);

    background:
        #fff1f3;

    font-size:16px;

    transition:
        color .3s ease,
        background .3s ease;

}


.mdn-service-page-card__link:hover
.mdn-service-page-card__icon{

    color:#fff;

    background:
        linear-gradient(
            135deg,
            var(--mdnsp-red-soft),
            var(--mdnsp-red)
        );

}


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

.mdn-service-page-card__top small{

    color:
        #a1acb9;

    font-size:14px;

    font-weight:800;

}


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

.mdn-service-page-card h3{

    margin:
        0 0 11px;

    color:
        var(--mdnsp-title);

    font-size:
        clamp(
            22px,
            2vw,
            28px
        );

    line-height:1.12;

    letter-spacing:-.025em;

}


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

.mdn-service-page-card p{

    margin:
        0 0 21px;

    color:
        var(--mdnsp-text);

    font-size:14px;

    line-height:1.72;

}


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

.mdn-service-page-card__action{

    display:flex;

    align-items:center;

    gap:10px;

    color:
        var(--mdnsp-title);

    font-size:14px;

    font-weight:800;

}


.mdn-service-page-card__action i{

    width:31px;
    height:31px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border-radius:8px;

    color:#fff;

    background:
        var(--mdnsp-red);

    transition:
        transform .3s ease;

}


.mdn-service-page-card__link:hover
.mdn-service-page-card__action i{

    transform:
        translateX(4px);

}


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

.mdn-services-page-cta{

    padding:
        62px 0;

    position:relative;

    overflow:hidden;

    color:#fff;

    background:

        radial-gradient(
            circle at 95% 0%,
            rgba(255,24,52,.18),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #020916,
            #061a38
        );

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

}


.mdn-services-page-cta__container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:50px;

}


.mdn-services-page-cta__container > div:first-child > span{

    color:
        var(--mdnsp-red-soft);

    font-size:14px;

    font-weight:800;

    letter-spacing:.08em;

}


.mdn-services-page-cta h2{

    margin:
        7px 0 0;

    color:#fff;

    font-size:
        clamp(
            30px,
            3vw,
            45px
        );

    line-height:1.1;

}


/* ============================================================
   CTA ACTIONS
============================================================ */

.mdn-services-page-cta__actions{

    display:flex;

    align-items:center;

    gap:13px;

}


/* ============================================================
   CTA PRIMARY
============================================================ */

.mdn-services-page-cta__primary{

    min-height:57px;

    padding:
        0 21px;

    display:inline-flex;

    align-items:center;

    gap:10px;

    border-radius:12px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            var(--mdnsp-red-soft),
            var(--mdnsp-red)
        );

    text-decoration:none;

    font-size:14px;

    font-weight:800;

}


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

.mdn-services-page-cta__phone{

    min-height:57px;

    padding:
        7px 15px;

    display:flex;

    align-items:center;

    gap:11px;

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

    border-radius:12px;

    color:#fff;

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

    text-decoration:none;

}


.mdn-services-page-cta__phone > i{

    width:38px;
    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:10px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            var(--mdnsp-blue),
            var(--mdnsp-blue-dark)
        );

}


.mdn-services-page-cta__phone > span{

    display:flex;

    flex-direction:column;

}


.mdn-services-page-cta__phone small{

    color:#8f9caf;

    font-size:14px;

}


.mdn-services-page-cta__phone strong{

    color:#fff;

    font-size:14px;

}


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

@media(max-width:1100px){

    .mdn-services-page-hero__container,
    .mdn-services-page__container,
    .mdn-services-page-cta__container{

        width:
            calc(100% - 46px);

    }


    .mdn-services-page__container{

        grid-template-columns:
            285px minmax(0,1fr);

        gap:35px;

    }


    .mdn-services-sidebar__inner{

        padding:20px;

    }


    .mdn-services-page__intro{

        grid-template-columns:1fr;

        gap:18px;

    }


    .mdn-services-page__grid{

        grid-template-columns:1fr;

    }

}


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

@media(max-width:850px){

    .mdn-services-page{

        padding:
            80px 0 90px;

    }


    .mdn-services-page__container{

        grid-template-columns:1fr;

        gap:45px;

    }


    /*
     * Sidebar no longer sticky on smaller screens.
     */
    .mdn-services-sidebar__inner{

        position:relative;

        top:auto;

    }


    .mdn-services-sidebar__heading p{

        max-width:620px;

    }


    /*
     * Show mobile selector.
     */
    .mdn-services-sidebar__toggle{

        display:flex;

    }


    /*
     * Collapsible navigation.
     */
    .mdn-services-sidebar__nav{

        max-height:0;

        margin-top:0;

        overflow:hidden;

        opacity:0;

        transition:
            max-height .45s ease,
            opacity .3s ease,
            margin-top .3s ease;

    }


    .mdn-services-sidebar__nav.is-open{

        max-height:800px;

        margin-top:14px;

        opacity:1;

    }


    .mdn-services-sidebar__contact{

        margin-top:18px;

    }


    .mdn-services-page-cta__container{

        align-items:flex-start;

        flex-direction:column;

    }

}


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

@media(max-width:700px){

    .mdn-services-page-hero{

        min-height:520px;

        padding:
            65px 0 70px;

    }


    .mdn-services-page-hero__container,
    .mdn-services-page__container,
    .mdn-services-page-cta__container{

        width:
            calc(100% - 30px);

    }


    .mdn-services-page-hero__breadcrumb{

        margin-bottom:38px;

    }


    .mdn-services-page-hero h1{

        font-size:
            clamp(
                42px,
                12vw,
                59px
            );

    }


    .mdn-services-page-hero__content > p{

        font-size:15px;

    }


    .mdn-services-page__intro > p{

        text-align:left;

    }


    .mdn-service-page-card__link{

        grid-template-rows:
            220px 1fr;

    }


    .mdn-service-page-card__visual{

        height:220px;

    }


    .mdn-services-page-cta__actions{

        width:100%;

        align-items:stretch;

        flex-direction:column;

    }


    .mdn-services-page-cta__primary,
    .mdn-services-page-cta__phone{

        width:100%;

    }

}


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

@media(max-width:480px){

    .mdn-services-page-hero__container,
    .mdn-services-page__container,
    .mdn-services-page-cta__container{

        width:
            calc(100% - 24px);

    }


    .mdn-services-page-hero h1{

        font-size:39px;

    }


    .mdn-services-sidebar__inner{

        padding:17px;

    }


    .mdn-service-page-card__link{

        grid-template-rows:
            200px 1fr;

    }


    .mdn-service-page-card__visual{

        height:200px;

    }


    .mdn-service-page-card__content{

        padding:
            20px;

    }

}


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

.mdn-services-page-hero a:focus-visible,
.mdn-services-page a:focus-visible,
.mdn-services-page button:focus-visible,
.mdn-services-page-cta a:focus-visible{

    outline:
        2px solid var(--mdnsp-red-bright);

    outline-offset:4px;

}