/* =========================================================
   HOMESOURCE247 HEADER
   CLEAN / PREMIUM / RESPONSIVE
========================================================= */

:root{
    --hs-deep:#07363d;
    --hs-deep-2:#0b444b;
    --hs-teal:#0d8f94;
    --hs-aqua:#00c3d0;
    --hs-light:#eef8f7;
    --hs-soft:#f6faf9;
    --hs-white:#ffffff;
    --hs-text:#183d42;
    --hs-muted:#718487;
    --hs-border:rgba(7,54,61,.10);
    --hs-shadow:0 18px 55px rgba(7,54,61,.14);
}


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

.custom-container{
    width:100%;
    max-width:1380px;
    margin:0 auto;
    padding-left:28px;
    padding-right:28px;
}

.hero-navbar a,
.topbar a{
    text-decoration:none;
}


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

.topbar{
    position:relative;
    z-index:1100;
    width:100%;
    background:var(--hs-deep);
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.topbar-wrapper{
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.topbar-left,
.topbar-right{
    display:flex;
    align-items:center;
}


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

.location-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;

    min-height:30px;
    padding:4px 12px;

    color:#fff !important;
    background:rgba(255,255,255,.06);

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

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

    transition:.25s ease;
}

.location-btn:hover{
    background:rgba(0,195,208,.12);
    border-color:rgba(0,195,208,.35);
}

.location-btn i{
    color:var(--hs-aqua);
    font-size:12px;
}

.location-btn::after{
    margin-left:2px;
    border-top-color:rgba(255,255,255,.55);
}


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

.location-dropdown .dropdown-menu{
    min-width:175px;
    margin-top:9px !important;
    padding:7px;

    background:#fff;
    border:1px solid var(--hs-border);
    border-radius:13px;

    box-shadow:var(--hs-shadow);
}

.location-dropdown .dropdown-item{
    display:flex;
    align-items:center;
    gap:9px;

    padding:9px 10px;

    color:var(--hs-text);
    font-size:13px;
    font-weight:700;

    border-radius:9px;
}

.location-dropdown .dropdown-item:hover{
    color:var(--hs-teal);
    background:var(--hs-light);
}

.location-dropdown .dropdown-item i{
    width:27px;
    height:27px;

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

    color:var(--hs-teal);
    background:var(--hs-light);

    border-radius:7px;
}


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

.topbar-right{
    gap:17px;
}

.topbar-contact{
    display:flex;
    align-items:center;
    gap:8px;
    color:#fff !important;
}

.topbar-contact .icon{
    width:27px;
    height:27px;

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

    color:var(--hs-aqua);
    background:rgba(0,195,208,.08);

    border:1px solid rgba(0,195,208,.18);
    border-radius:7px;

    font-size:10px;
}

.contact-info{
    display:flex;
    flex-direction:column;
    line-height:1.1;
}

.contact-info small{
    margin-bottom:2px;

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

    font-size:8px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.contact-info strong{
    color:#fff;
    font-size:11px;
    font-weight:700;
}

.topbar-divider{
    width:1px;
    height:22px;
    background:rgba(255,255,255,.13);
}


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

.hero-navbar{
    position:sticky;
    top:0;
    z-index:1000;

    width:100%;

    background:#fff;

    border-bottom:1px solid rgba(7,54,61,.08);

    box-shadow:0 4px 18px rgba(7,54,61,.04);
}

.hero-navbar > .custom-container{
    background:transparent !important;
}


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

.hero-navbar .navbar{
    position:relative;

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

    display:flex;
    align-items:center;

    background:transparent !important;
}


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

.hero-navbar .navbar-brand{
    flex-shrink:0;

    display:flex;
    align-items:center;

    margin-right:34px !important;
    padding:0;
}

.hero-navbar .logo{
    display:block;
    width:190px;
    height:auto;
}


/* =========================================================
   MAIN NAV
========================================================= */

.hero-navbar .navbar-nav{
    display:flex;
    align-items:center;
    gap:3px;
}

.hero-navbar .nav-item{
    position:relative;
}


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

.hero-navbar .nav-link{
    display:flex;
    align-items:center;
    justify-content:center;

    min-height:44px;

    padding:9px 15px !important;

    color:var(--hs-text) !important;

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

    border-radius:10px;

    transition:
        color .2s ease,
        background .2s ease;
}

.hero-navbar .nav-link:hover{
    color:var(--hs-teal) !important;
    background:var(--hs-light);
}


/* =========================================================
   MEGA MENU MAIN LINK
========================================================= */

.hero-navbar .mega-dropdown > .nav-link{
    gap:8px;
}


/* =========================================================
   MAIN MENU ICON
========================================================= */

.mega-main-icon{
    width:25px;
    height:25px;

    flex:0 0 25px;

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

    color:var(--hs-teal);

    background:var(--hs-light);

    border-radius:7px;

    font-size:11px;

    transition:.2s ease;
}

.hero-navbar .mega-dropdown:hover .mega-main-icon,
.hero-navbar .mega-dropdown.active .mega-main-icon{
    color:#fff;
    background:var(--hs-teal);
}


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

.mega-arrow{
    margin-left:2px;

    color:#809295;
    font-size:10px;

    transition:transform .2s ease;
}

.hero-navbar .mega-dropdown:hover .mega-arrow{
    color:var(--hs-teal);
    transform:rotate(180deg);
}

.hero-navbar .mega-dropdown.active .mega-arrow{
    color:var(--hs-teal);
    transform:rotate(180deg);
}


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

.header-btns{
    flex-shrink:0;
    margin-left:17px;
}

.phone-btn{
    position:relative;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    min-height:46px;
    padding:0 19px;

    color:#fff !important;
    background:var(--hs-deep);

    border-radius:11px;

    font-size:12px;
    font-weight:800;

    white-space:nowrap;

    transition:.25s ease;
}

.phone-btn:hover{
    color:#fff !important;
    background:var(--hs-teal);

    transform:translateY(-2px);

    box-shadow:
        0 10px 25px rgba(13,143,148,.20);
}

.phone-btn i{
    transition:.2s ease;
}

.phone-btn:hover i{
    transform:translateX(4px);
}


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

.estimate-mobile-btn{
    display:none;

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

    min-height:38px;

    padding:0 12px;

    color:#fff !important;
    background:var(--hs-deep);

    border-radius:9px;

    font-size:10px;
    font-weight:800;

    white-space:nowrap;

    transition:.25s ease;
}

.estimate-mobile-btn:hover{
    color:#fff !important;
    background:var(--hs-teal);
}


/* =========================================================
   HAMBURGER
   HIDDEN ON DESKTOP
========================================================= */

.hero-navbar .navbar-toggler{
    display:none;

    width:43px;
    height:43px;

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

    flex:0 0 43px;

    padding:0;

    background:var(--hs-light) !important;

    border:1px solid rgba(7,54,61,.08) !important;
    border-radius:10px !important;

    box-shadow:none !important;

    position:relative;
    z-index:10001;
}

.hero-navbar .navbar-toggler:hover{
    background:#dff3f1 !important;
}

.hero-navbar .navbar-toggler:focus{
    box-shadow:0 0 0 3px rgba(0,195,208,.15) !important;
}

.hero-navbar .navbar-toggler-icon{
    width:21px;
    height:16px;

    display:block;

    background-image:none !important;

    position:relative;
}

.hero-navbar .navbar-toggler-icon::before{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:21px;
    height:2px;

    background:var(--hs-deep);

    border-radius:5px;

    box-shadow:
        0 7px 0 var(--hs-deep),
        0 14px 0 var(--hs-deep);

    transition:.25s ease;
}


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

@media (min-width:1200px){

    .mega-dropdown{
        position:relative;
    }

    .mega-menu{
        position:absolute;

        top:calc(100% + 0px);
        left:50%;

        width:min(1120px,calc(100vw - 40px));

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

        display:grid;
        grid-template-columns:1fr 1fr 1.25fr;

        gap:24px;

        padding:26px;

        background:#fff;

        border:1px solid rgba(7,54,61,.10);
        border-radius:0 0 18px 18px;

        box-shadow:
            0 22px 55px rgba(7,54,61,.16),
            0 5px 18px rgba(7,54,61,.08);

        opacity:0;
        visibility:hidden;
        pointer-events:none;

        z-index:9999;

        transition:
            opacity:.22s ease,
            visibility:.22s ease,
            transform:.22s ease;
    }


    /* =====================================================
       HOVER BRIDGE
    ===================================================== */

    .mega-menu::after{
        content:"";

        position:absolute;

        top:-22px;
        left:0;
        right:0;

        height:22px;

        background:transparent;
    }


    /* =====================================================
       TRIANGLE
    ===================================================== */

    .mega-menu::before{
        content:"";

        position:absolute;

        top:-9px;

        width:18px;
        height:18px;

        background:#fff;

        border-left:1px solid rgba(7,54,61,.10);
        border-top:1px solid rgba(7,54,61,.10);

        transform:rotate(45deg);

        z-index:2;
    }


    /* Bathroom pointer */

    .mega-dropdown:nth-child(1) .mega-menu::before{
        left:118px;
    }


    /* Kitchen pointer */

    .mega-dropdown:nth-child(2) .mega-menu::before{
        left:118px;
    }


    /* =====================================================
       DESKTOP OPEN
    ===================================================== */

    .mega-dropdown:hover > .mega-menu,
    .mega-menu:hover,
    .mega-dropdown:focus-within > .mega-menu{
        opacity:1;
        visibility:visible;
        pointer-events:auto;

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

    .mega-dropdown:hover > .nav-link{
        color:var(--hs-teal) !important;
        background:var(--hs-light);
    }

}


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

.mega-column{
    position:relative;

    min-width:0;

    padding:17px;

    background:#f6faf9;

    border:1px solid rgba(7,54,61,.06);
    border-radius:14px;

    overflow:hidden;
}

.mega-column:nth-child(2){
    background:#fbfcfc;
}


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

.mega-label{
    display:block;

    margin:1px 5px 9px;

    color:#91a4a7;

    font-size:9px;
    font-weight:800;

    letter-spacing:.15em;
}


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

.mega-column > a{
    display:flex;
    align-items:center;
    gap:12px;

    min-height:43px;

    padding:11px 13px;

    margin-bottom:4px;

    color:#07363d !important;

    text-decoration:none;

    border-radius:10px;

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

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.mega-column > a:hover{
    background:#eef8f7;

    color:#0d8f94 !important;

    transform:translateX(4px);
}


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

.mega-column > a i{
    width:25px;
    height:25px;

    flex:0 0 25px;

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

    color:#0d8f94;

    font-size:14px;

    transition:.2s ease;
}

.mega-column > a:hover i{
    color:#00aeb8;
}


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

.mega-image-card{
    overflow:hidden;

    padding:0 !important;

    border-radius:14px;

    background:#07363d;
}

.mega-image-card img{
    width:100%;
    height:170px;

    object-fit:cover;

    display:block;

    transition:transform .5s ease;
}

.mega-image-card:hover img{
    transform:scale(1.05);
}


/* =========================================================
   FEATURED LINK
========================================================= */

.mega-featured-link{
    display:flex !important;
    align-items:center;

    margin-top:10px;

    padding:0 !important;

    background:transparent !important;

    color:#07363d !important;

    font-size:18px !important;
    font-weight:700 !important;

    transform:none !important;
}

.mega-featured-link:hover{
    color:#0d8f94 !important;
}


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

@media (max-width:1199.98px){

    /* =====================================================
       HAMBURGER SHOW ONLY BELOW 1200
    ===================================================== */

    .hero-navbar .navbar-toggler{
        display:flex !important;
    }


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

    .hero-navbar .navbar{
        min-height:76px;
    }

    .hero-navbar .navbar-brand{
        margin-right:0 !important;
    }

    .hero-navbar .logo{
        width:175px;
    }


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

    .estimate-mobile-btn{
        display:inline-flex;

        margin-left:auto;
        margin-right:10px;
    }


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

    .hero-navbar .navbar-collapse{
        margin-top:10px;
        margin-bottom:12px;

        padding:9px;

        background:#fff;

        border:1px solid var(--hs-border);
        border-radius:15px;

        box-shadow:var(--hs-shadow);
    }

    .hero-navbar .navbar-nav{
        display:block;
    }

    .hero-navbar .nav-item{
        width:100%;
        margin-bottom:2px;
    }

    .hero-navbar .nav-link{
        width:100%;

        justify-content:flex-start;

        min-height:48px;

        padding:9px 11px !important;
    }


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

    .mega-dropdown{
        position:relative;
    }

    .mega-menu{
        position:static;

        width:100%;

        display:none;

        grid-template-columns:1fr;

        margin:8px 0 12px;

        padding:15px;

        background:#f5faf9;

        border:1px solid rgba(7,54,61,.07);

        border-radius:14px;

        box-shadow:0 10px 30px rgba(7,54,61,.10);

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

        transform:none !important;
    }

    .mega-dropdown.active > .mega-menu{
        display:grid;
    }


    /* =====================================================
       MOBILE TRIANGLE / BRIDGE
    ===================================================== */

    .mega-menu::before,
    .mega-menu::after{
        display:none !important;
    }


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

    .mega-column{
        min-height:auto;

        padding:9px;

        border-radius:11px;
    }

    .mega-column > a{
        min-height:43px;

        font-size:13px;
    }


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

    .mega-image-card{
        min-height:180px;
    }

    .mega-image-card img{
        height:180px !important;
    }


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

    .header-btns{
        margin:8px 0 2px;
    }

    .header-btns .phone-btn{
        width:100%;
        min-height:46px;
    }

}


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

@media (min-width:768px) and (max-width:1199.98px){

    .mega-menu{
        grid-template-columns:1fr 1fr;
    }

    .mega-image-card{
        grid-column:1 / -1;

        min-height:220px;
    }

    .mega-image-card img{
        height:220px !important;
    }

}


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

@media (max-width:767.98px){

    .custom-container{
        padding-left:15px;
        padding-right:15px;
    }


    /* =====================================================
       TOPBAR
    ===================================================== */

    .topbar-wrapper{
        min-height:38px;

        justify-content:center;
    }

    .topbar-right{
        display:none;
    }

    .topbar-left{
        width:100%;
        justify-content:center;
    }

    .location-btn{
        font-size:10px;
    }


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

    .hero-navbar .navbar{
        min-height:70px;
    }

    .hero-navbar .logo{
        width:150px;
    }


    /* =====================================================
       ESTIMATE
    ===================================================== */

    .estimate-mobile-btn{
        min-height:36px;

        padding:0 10px;

        font-size:9px;
    }


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

    .hero-navbar .navbar-toggler{
        width:40px;
        height:40px;

        flex:0 0 40px;
    }

    .hero-navbar .navbar-toggler-icon{
        width:20px;
        height:15px;
    }

    .hero-navbar .navbar-toggler-icon::before{
        width:20px;

        box-shadow:
            0 6px 0 var(--hs-deep),
            0 12px 0 var(--hs-deep);
    }


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

    .hero-navbar .navbar-collapse{
        max-height:calc(100vh - 85px);

        overflow-y:auto;
    }


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

    .mega-image-card{
        min-height:175px;
    }

    .mega-image-card img{
        height:175px !important;
    }

}


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

@media (max-width:390px){

    .hero-navbar .logo{
        width:135px;
    }

    .estimate-mobile-btn{
        padding:0 8px;

        font-size:8px;
    }

    .hero-navbar .navbar-toggler{
        width:38px;
        height:38px;

        flex:0 0 38px;
    }

}


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

.hero-navbar a:focus-visible,
.topbar a:focus-visible{
    outline:2px solid var(--hs-aqua);
    outline-offset:2px;
}


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

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

    .hero-navbar *,
    .mega-menu *,
    .topbar *{
        transition:none !important;
        animation:none !important;
    }

}