/* ==========================================================
   DE FRAMES - GLOBAL TYPOGRAPHY
========================================================== */

html,
body,
button,
input,
select,
textarea,
a,
p,
span,
div,
small,
strong,
label,
li,
ul,
ol,
blockquote,
table,
thead,
tbody,
tfoot,
th,
td,
section,
article,
aside,
header,
footer,
main,
nav,
figure,
figcaption,
h1,
h2,
h3,
h4,
h5,
h6{
    font-family:'Montserrat',sans-serif !important;
}
h1{
    font-size:64px;
    font-weight:700;
}

h2{
    font-size:48px;
    font-weight:700;
}

h3{
    font-size:34px;
    font-weight:600;
}

h4{
    font-size:26px;
    font-weight:600;
}

h5{
    font-size:20px;
    font-weight:600;
}

p{
    font-size:16px;
    font-weight:400;
    line-height:1.8;
}

.navbar-nav .nav-link{
    font-size:13px;
    font-weight:600;
    text-transform:uppercase;
}

.df-button,
.btn{
    font-size:14px;
    font-weight:600;
}
/* =========================================================
   DE FRAMES HEADER – SINGLE HOVER & ACTIVE EFFECT
   Add this at the END of your header CSS
========================================================= */

/* Reset different menu/button effects */
.site-header .navbar-nav .nav-item,
.site-header .navbar-nav .nav-link {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    transform: none !important;
}

/* Same spacing for all normal menu links */
.site-header .navbar-nav .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 8px 0 !important;
    margin: 0 18px;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.35px;
    text-transform: uppercase;
    transition: color 0.3s ease !important;
}

/* One smooth underline for hover and active */
.site-header .navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 1px;
    width: 0;
    height: 2px;
    background: #00b9c6;
    transform: translateX(-50%);
    transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover */
.site-header .navbar-nav .nav-link:hover,
.site-header .navbar-nav .nav-link:focus {
    color: #00c5d2 !important;
}

/* Active */
.site-header .navbar-nav .nav-item.active > .nav-link,
.site-header .navbar-nav .nav-link.active,
.site-header .navbar-nav .current-menu-item > .nav-link,
.site-header .navbar-nav .current_page_item > .nav-link {
    color: #00c5d2 !important;
}

/* Same underline animation for hover and active */
.site-header .navbar-nav .nav-link:hover::after,
.site-header .navbar-nav .nav-link:focus::after,
.site-header .navbar-nav .nav-item.active > .nav-link::after,
.site-header .navbar-nav .nav-link.active::after,
.site-header .navbar-nav .current-menu-item > .nav-link::after,
.site-header .navbar-nav .current_page_item > .nav-link::after {
    width: 100%;
}

/* Remove old active borders/backgrounds */
.site-header .navbar-nav .nav-item.active,
.site-header .navbar-nav .current-menu-item,
.site-header .navbar-nav .current_page_item {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}

/* Contact Us should behave like a normal menu item */
.site-header .navbar-nav .contact-link,
.site-header .navbar-nav .contact-menu,
.site-header .navbar-nav .contact-item .nav-link {
    padding: 8px 0 !important;
    margin: 0 18px !important;
    min-width: auto !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* Dropdown arrow follows the same color transition */
.site-header .navbar-nav .dropdown-toggle::before {
    display: none !important;
}

.site-header .navbar-nav .dropdown-toggle::after {
    position: static !important;
    display: inline-block !important;
    width: 0 !important;
    height: 0 !important;
    margin-left: 7px !important;
    border-top: 4px solid currentColor !important;
    border-right: 4px solid transparent !important;
    border-bottom: 0 !important;
    border-left: 4px solid transparent !important;
    background: transparent !important;
    transform: none !important;
    transition: transform 0.3s ease !important;
}

.site-header .navbar-nav .dropdown.show > .dropdown-toggle::after {
    transform: rotate(180deg) !important;
}

/* Get A Quote remains the only outlined CTA */
.site-header .get-quote-btn,
.site-header .quote-btn,
.site-header .header-quote,
.site-header a[href*="quote"] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 25px !important;
    margin-left: 18px;
    border: 1px solid #00b9c6 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #00c5d2 !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.35px;
    text-transform: uppercase;
    overflow: hidden;
    box-shadow: none !important;
    transition:
        color 0.35s ease,
        background-color 0.35s ease,
        border-color 0.35s ease !important;
}

/* Single smooth CTA interaction */
.site-header .get-quote-btn:hover,
.site-header .get-quote-btn:focus,
.site-header .quote-btn:hover,
.site-header .quote-btn:focus,
.site-header .header-quote:hover,
.site-header .header-quote:focus,
.site-header a[href*="quote"]:hover,
.site-header a[href*="quote"]:focus {
    color: #071012 !important;
    background: #00c5d2 !important;
    border-color: #00c5d2 !important;
    transform: none !important;
}

/* Prevent normal menu underline from appearing on quote button */
.site-header .get-quote-btn::after,
.site-header .quote-btn::after,
.site-header .header-quote::after,
.site-header a[href*="quote"]::after {
    display: none !important;
}

/* Sticky header */
.site-header.header-fixed,
.site-header.fixedmenu,
.site-header.sticky-header,
.site-header.scrolled {
    background: rgba(5, 5, 5, 0.97) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Smaller professional sticky spacing */
.site-header.header-fixed .navbar,
.site-header.fixedmenu .navbar,
.site-header.sticky-header .navbar,
.site-header.scrolled .navbar {
    min-height: 70px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.site-header.header-fixed .navbar-brand img,
.site-header.fixedmenu .navbar-brand img,
.site-header.sticky-header .navbar-brand img,
.site-header.scrolled .navbar-brand img {
    max-height: 48px !important;
    width: auto !important;
}

/* Desktop spacing */
@media (min-width: 992px) {
    .site-header .navbar-nav {
        display: flex;
        align-items: center;
        gap: 0;
    }

    .site-header .navbar-nav .nav-item {
        display: flex;
        align-items: center;
    }
}

/* Tablet spacing */
@media (min-width: 992px) and (max-width: 1199px) {
    .site-header .navbar-nav .nav-link {
        margin: 0 10px;
        font-size: 12px;
    }

    .site-header .get-quote-btn,
    .site-header .quote-btn,
    .site-header .header-quote,
    .site-header a[href*="quote"] {
        margin-left: 10px;
        padding: 0 18px !important;
    }
}

/* Mobile navigation */
@media (max-width: 991px) {
    .site-header .navbar-nav {
        padding: 15px 0 22px;
    }

    .site-header .navbar-nav .nav-link {
        justify-content: flex-start;
        width: 100%;
        min-height: 46px;
        margin: 0 !important;
        padding: 14px 5px !important;
    }

    .site-header .navbar-nav .nav-link::after {
        left: 5px;
        bottom: 5px;
        transform: none;
    }

    .site-header .navbar-nav .nav-link:hover::after,
    .site-header .navbar-nav .nav-link:focus::after,
    .site-header .navbar-nav .nav-item.active > .nav-link::after,
    .site-header .navbar-nav .nav-link.active::after,
    .site-header .navbar-nav .current-menu-item > .nav-link::after,
    .site-header .navbar-nav .current_page_item > .nav-link::after {
        width: 36px;
    }

    .site-header .get-quote-btn,
    .site-header .quote-btn,
    .site-header .header-quote,
    .site-header a[href*="quote"] {
        width: 100%;
        min-height: 46px;
        margin: 12px 0 0 !important;
    }
}

/* Respect reduced-motion accessibility setting */
@media (prefers-reduced-motion: reduce) {
    .site-header .navbar-nav .nav-link,
    .site-header .navbar-nav .nav-link::after,
    .site-header .get-quote-btn,
    .site-header .quote-btn,
    .site-header .header-quote,
    .site-header a[href*="quote"] {
        transition: none !important;
    }
}

/*==========================================
  PREMIUM HOVER DROPDOWN
==========================================*/

@media (min-width:992px){

.navbar .dropdown{
    position:relative;
}

.navbar .dropdown-menu{
    display:block;
    opacity:0;
    visibility:hidden;

    min-width:270px;
    margin:0;
    padding:14px 0;

    border:0;
    border-radius:0;

    background:#0d0d0d;
    box-shadow:0 18px 45px rgba(0,0,0,.18);

    transform:translateY(20px);
    transition:
        opacity .35s ease,
        transform .35s ease,
        visibility .35s ease;

    pointer-events:none;
}

/* small gap so hover never breaks */
.navbar .dropdown::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-18px;
    height:18px;
}

/* SHOW ON HOVER */
.navbar .dropdown:hover>.dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
}

/* MENU ITEMS */

.navbar .dropdown-menu li{
    width:100%;
}

.navbar .dropdown-menu a{
    display:block;
    padding:13px 28px;

    color:#fff;
    font-size:13px;
    font-weight:500;
    letter-spacing:.3px;

    transition:all .25s ease;
}

/* HOVER */

.navbar .dropdown-menu a:hover{

    background:#00b9c6;
    color:#fff;

    padding-left:36px;
}

}
/*==============================
  HEADER CONTACT NUMBER
==============================*/

.header-contact{
    display:flex;
    align-items:center;
    margin-left:35px;
}

.header-contact a{
    display:flex;
    align-items:center;
    gap:10px;

    color:#ffffff;
    text-decoration:none;

    font-size:15px;
    font-weight:600;
    letter-spacing:.3px;

    transition:.35s ease;
}

.header-contact i{
    width:40px;
    height:40px;

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

    border:1px solid rgba(0,185,198,.55);
    border-radius:50%;

    color:#00b9c6;
    font-size:15px;

    transition:.35s ease;
}

.header-contact:hover a{
    color:#00b9c6;
}

.header-contact:hover i{
    background:#00b9c6;
    color:#fff;
    border-color:#00b9c6;
    transform:rotate(-12deg);
}

/* Sticky header */

.fixedmenu .header-contact i,
.navbar-scrolled .header-contact i{
    width:36px;
    height:36px;
}

.fixedmenu .header-contact a,
.navbar-scrolled .header-contact a{
    font-size:14px;
}

/* Mobile */

@media(max-width:991px){

.header-contact{
    margin:18px 0 0;
    width:100%;
}

.header-contact a{
    justify-content:center;
    width:100%;
    padding:12px 15px;
    border:1px solid rgba(255,255,255,.12);
}

}

/* =========================
   Wide Container
========================= */

@media (min-width:1200px){

.container{
    max-width:1500px !important;
    width:92%;
}

}

/* Remove blue color from all inactive menu items */
.navbar-nav .nav-link{
    color:#ffffff !important;
}

/* Hover */
.navbar-nav .nav-link:hover{
    color:#00b9c6 !important;
}

/* Active page only */
.navbar-nav .current-menu-item > .nav-link,
.navbar-nav .current_page_item > .nav-link,
.navbar-nav .active > .nav-link{
    color:#00b9c6 !important;
}

/* Force Contact Us to remain white unless it's the current page */
.navbar-nav li:last-child:not(.active):not(.current-menu-item):not(.current_page_item) > a{
    color:#ffffff !important;
}

.navbar-nav li:last-child:not(.active):not(.current-menu-item):not(.current_page_item) > a:hover{
    color:#00b9c6 !important;
}

/*=============================
Premium Header Call
==============================*/

.df-header-call{
    margin-left:25px;
    flex-shrink:0;
}

.df-header-call a{
    display:flex;
    align-items:center;
    text-decoration:none;
    gap:14px;
}

/* Luxury Icon */

.df-call-icon{
    width:52px;
    height:52px;
    border:1px solid rgba(0,190,205,.45);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,190,205,.06);
    backdrop-filter:blur(8px);
    transition:.35s;
    position:relative;
}

.df-call-icon:before{
    content:"";
    position:absolute;
    inset:6px;
    border:1px solid rgba(0,190,205,.15);
    border-radius:50%;
}

.df-call-icon i{
    color:#00b9c8;
    font-size:16px;
    transition:.35s;
}

.df-header-call:hover .df-call-icon{
    background:#00b9c8;
    border-color:#00b9c8;
    transform:translateY(-2px);
    box-shadow:0 10px 28px rgba(0,185,200,.28);
}

.df-header-call:hover .df-call-icon i{
    color:#fff;
}

/* Phone Text */

.df-call-text{
    display:flex;
    flex-direction:column;
    line-height:1.15;
}

.df-call-text small{
    color:#8f9ba5;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:4px;
}

.df-call-text strong{
    color:#fff;
    font-size:17px;
    font-weight:600;
    letter-spacing:.4px;
    white-space:nowrap;
    transition:.35s;
}

.df-header-call:hover .df-call-text strong{
    color:#00b9c8;
}

@media (max-width:1300px){

.df-call-icon{
    width:46px;
    height:46px;
}

.df-call-text strong{
    font-size:15px;
}

.df-call-text small{
    font-size:9px;
}

}

@media (max-width:1199px){

.df-header-call{
    margin-left:15px;
}

.df-call-text strong{
    font-size:14px;
}

}

@media (max-width:1024px){

.df-call-text small{
    display:none;
}

.df-call-text strong{
    font-size:13px;
}

.df-call-icon{
    width:42px;
    height:42px;
}

}

@media (max-width:991px){

.df-header-call{
    display:none;
}

} /* End mobile header visibility */

/* Premium Small Call Icon */

.df-call-icon{
    width:42px;
    height:42px;
    border:1px solid rgba(0,190,205,.45);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,190,205,.05);
    transition:.35s;
    flex-shrink:0;
}

.df-call-icon i,
.df-call-icon svg{
    width:15px;
    height:15px;
    font-size:15px;
    color:#00b9c8;
    transition:.35s;
}

.df-header-call:hover .df-call-icon{
    background:#00b9c8;
    border-color:#00b9c8;
    box-shadow:0 8px 20px rgba(0,185,200,.25);
}

.df-header-call:hover .df-call-icon i,
.df-header-call:hover .df-call-icon svg{
    color:#fff;
}

/* Smaller Phone Number */

.df-call-text strong{
    font-size:15px;
    font-weight:600;
    white-space:nowrap;
    line-height:1;
}

.df-call-text small{
    font-size:9px;
    letter-spacing:1.5px;
    margin-bottom:3px;
}

/* =========================================================
   DE FRAMES — ONE FONT THROUGHOUT THE WEBSITE
   Uses the same inherited font currently used by the header.
========================================================= */

/* Slider: inherit the header/site font */
#dframes-hero .df-eyebrow,
#dframes-hero .df-title,
#dframes-hero .df-copy,
#dframes-hero .df-button,
#dframes-hero .df-button span {
    font-family: inherit !important;
}

/* Keep slider heading in the same font, only change its weight */
#dframes-hero .df-title {
    font-weight: 600 !important;
    letter-spacing: -0.015em !important;
}

/* Category label */
#dframes-hero .df-eyebrow {
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
}

/* Slider description */
#dframes-hero .df-copy {
    font-weight: 400 !important;
}

/* Slider button */
#dframes-hero .df-button {
    font-weight: 600 !important;
    letter-spacing: 0.055em !important;
}

/* Header, dropdown and phone use the same inherited font */
.site-header,
.site-header .navbar,
.site-header .navbar-nav,
.site-header .nav-link,
.site-header .dropdown-menu,
.site-header .dropdown-item,
.site-header .header-contact,
.site-header .df-header-call,
.site-header .df-call-text,
.site-header .df-call-text small,
.site-header .df-call-text strong {
    font-family: inherit !important;
}

/* All upcoming sections inherit the website's main font */
main,
section,
footer,
section h1,
section h2,
section h3,
section h4,
section h5,
section h6,
section p,
section a,
section button,
section input,
section textarea,
section select,
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6,
footer p,
footer a {
    font-family: inherit !important;
}

#dframes-hero .uranus.tparrows{
    width:52px;
    height:52px;
    border:1px solid rgba(255,255,255,.35);
    border-radius:50%;
    background:rgba(0,0,0,.25);
    display:flex;
    align-items:center;
    justify-content:center;
}

#dframes-hero .uranus.tparrows:before{
    font-family:"bootstrap-icons" !important;
    font-size:20px;
    color:#fff;
    line-height:1;
}

#dframes-hero .tp-leftarrow:before{
    content:"\F12F" !important;   /* bi-chevron-left */
}

#dframes-hero .tp-rightarrow:before{
    content:"\F138" !important;   /* bi-chevron-right */
}

#dframes-hero .uranus.tparrows:hover{
    background:#00b9c6;
    border-color:#00b9c6;
}
 /* ==========================================
   1024px Header Overrides
========================================== */
@media (min-width:992px) and (max-width:1199px){

    .site-header .container{
        width:96% !important;
        max-width:100% !important;
        padding-left:10px !important;
        padding-right:10px !important;
    }

    .site-header .navbar-brand{
        margin-right:8px !important;
    }

    .site-header .navbar-brand img{
        max-width:270px !important;
        height:auto !important;
    }

    .site-header #xenav .navbar-nav > .nav-item > .nav-link{
        margin-left:4px !important;
        margin-right:4px !important;
        padding-left:0 !important;
        padding-right:0 !important;
        font-size:11px !important;
        letter-spacing:0 !important;
    }

    .df-header-call{
        margin-left:8px !important;
    }

    .df-call-icon{
        width:38px !important;
        height:38px !important;
    }

    .df-call-text strong{
        font-size:12px !important;
        letter-spacing:0 !important;
    }
}




/* =========================================================
   DE FRAMES — PREMIUM THREE-LEVEL NAVIGATION
   Add at the very bottom of the CSS file
========================================================= */

.site-header .df-main-menu,
.site-header .df-main-menu ul {
    list-style: none;
    margin: 0;
}

.site-header .df-main-menu li {
    position: relative;
}

.site-header .df-main-menu .dropdown-menu {
    border: 0 !important;
    border-radius: 0 !important;
}

.site-header .df-main-menu .dropdown-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    min-height: 48px;
    padding: 12px 24px !important;

    color: rgba(255, 255, 255, 0.88) !important;
    background: transparent !important;

    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.4;
    letter-spacing: 0.25px;
    text-transform: none;

    white-space: nowrap;
    text-decoration: none;

    transition:
        color 0.28s ease,
        background-color 0.28s ease,
        padding-left 0.28s ease !important;
}

/* Accent line */
.site-header .df-main-menu .dropdown-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;

    width: 3px;
    height: 0;

    background: #00b9c6;
    transform: translateY(-50%);

    transition: height 0.28s ease;
}

/* Dropdown item hover */
.site-header .df-main-menu .dropdown-item:hover,
.site-header .df-main-menu .dropdown-item:focus,
.site-header .df-main-menu .dropdown-item.active {
    color: #ffffff !important;
    background: rgba(0, 185, 198, 0.13) !important;
    padding-left: 31px !important;
}

.site-header .df-main-menu .dropdown-item:hover::before,
.site-header .df-main-menu .dropdown-item:focus::before,
.site-header .df-main-menu .dropdown-item.active::before {
    height: 24px;
}

/* Submenu arrow */
.df-submenu-arrow {
    display: block;
    flex: 0 0 auto;

    width: 8px;
    height: 8px;
    margin-left: 20px;

    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;

    transform: rotate(45deg);
    transition: transform 0.3s ease;
}

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

@media (min-width: 992px) {

    .site-header .df-main-dropdown {
        position: relative;
    }

    /* First dropdown */
    .site-header .df-level-one {
        position: absolute !important;
        top: calc(100% + 16px) !important;
        left: 50% !important;
        right: auto !important;

        display: block !important;

        width: 285px;
        min-width: 285px;
        padding: 12px 0 !important;
        margin: 0 !important;

        background: rgba(10, 10, 10, 0.98) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;

        box-shadow:
            0 25px 65px rgba(0, 0, 0, 0.32),
            0 6px 20px rgba(0, 0, 0, 0.22) !important;

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

        transform: translate(-50%, 18px) scale(0.985);
        transform-origin: top center;

        transition:
            opacity 0.32s ease,
            visibility 0.32s ease,
            transform 0.42s cubic-bezier(0.22, 1, 0.36, 1) !important;

        z-index: 9999;
    }

    /* Invisible hover bridge */
    .site-header .df-main-dropdown::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;

        height: 20px;
    }

    /* Show first-level dropdown */
    .site-header .df-main-dropdown:hover > .df-level-one,
    .site-header .df-main-dropdown:focus-within > .df-level-one,
    .site-header .df-main-dropdown.df-open > .df-level-one {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transform: translate(-50%, 0) scale(1);
    }

    /* Second dropdown */
    .site-header .df-level-two {
        position: absolute !important;
        top: -12px !important;
        left: calc(100% + 12px) !important;
        right: auto !important;

        display: block !important;

        width: 310px;
        min-width: 310px;
        padding: 12px 0 !important;
        margin: 0 !important;

        background: rgba(10, 10, 10, 0.99) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;

        box-shadow:
            0 25px 65px rgba(0, 0, 0, 0.34),
            0 6px 20px rgba(0, 0, 0, 0.24) !important;

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

        transform: translateX(18px) scale(0.985);
        transform-origin: left top;

        transition:
            opacity 0.3s ease,
            visibility 0.3s ease,
            transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;

        z-index: 10000;
    }

    /* Submenu hover bridge */
    .site-header .df-submenu::after {
        content: "";
        position: absolute;
        top: 0;
        left: 100%;

        width: 16px;
        height: 100%;
    }

    /* Show second-level dropdown */
    .site-header .df-submenu:hover > .df-level-two,
    .site-header .df-submenu:focus-within > .df-level-two,
    .site-header .df-submenu.df-submenu-open > .df-level-two {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transform: translateX(0) scale(1);
    }

    .site-header .df-submenu:hover > .df-submenu-toggle {
        color: #ffffff !important;
        background: rgba(0, 185, 198, 0.13) !important;
        padding-left: 31px !important;
    }

    .site-header .df-submenu:hover > .df-submenu-toggle::before {
        height: 24px;
    }

    /* Keep submenu inside viewport on narrower desktop */
    @media (max-width: 1280px) {

        .site-header .df-level-two {
            left: auto !important;
            right: calc(100% + 12px) !important;

            transform: translateX(-18px) scale(0.985);
            transform-origin: right top;
        }

        .site-header .df-submenu:hover > .df-level-two,
        .site-header .df-submenu:focus-within > .df-level-two,
        .site-header .df-submenu.df-submenu-open > .df-level-two {
            transform: translateX(0) scale(1);
        }

        .site-header .df-submenu::after {
            left: auto;
            right: 100%;
        }

        .df-submenu-arrow {
            transform: rotate(-135deg);
        }
    }
}

/* =========================================================
   MOBILE AND TABLET NAVIGATION
========================================================= */

@media (max-width: 991.98px) {

    .site-header .navbar-collapse {
        max-height: calc(100vh - 75px);
        overflow-y: auto;
        overflow-x: hidden;

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

        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .site-header .df-main-menu {
        width: 100%;
        padding: 14px 18px 24px !important;
    }

    .site-header .df-main-menu > .nav-item {
        display: block !important;
        width: 100%;

        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .site-header .df-main-menu > .nav-item > .nav-link {
        display: flex !important;
        align-items: center;
        justify-content: space-between;

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

        margin: 0 !important;
        padding: 15px 4px !important;
    }

    /* Hide Bootstrap's normal dropdown arrow */
    .site-header .df-main-dropdown > .dropdown-toggle::after {
        content: "" !important;

        display: block !important;
        position: static !important;

        width: 8px !important;
        height: 8px !important;
        margin: 0 5px 0 15px !important;

        border: 0 !important;
        border-right: 1.5px solid currentColor !important;
        border-bottom: 1.5px solid currentColor !important;

        transform: rotate(45deg) !important;

        transition: transform 0.3s ease !important;
    }

    .site-header .df-main-dropdown.df-open >
    .dropdown-toggle::after {
        transform: rotate(225deg) !important;
    }

    /* Mobile first dropdown */
    .site-header .df-level-one,
    .site-header .df-level-two {
        position: static !important;

        display: block !important;
        float: none !important;

        width: 100% !important;
        min-width: 0 !important;
        max-height: 0;

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

        overflow: hidden;

        border: 0 !important;
        box-shadow: none !important;

        opacity: 0;
        visibility: hidden;

        transform: none !important;

        transition:
            max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.28s ease,
            visibility 0.28s ease,
            padding 0.32s ease !important;
    }

    .site-header .df-level-one {
        background: rgba(255, 255, 255, 0.035) !important;
    }

    .site-header .df-level-two {
        background: rgba(0, 185, 198, 0.055) !important;
    }

    /* Open main dropdown */
    .site-header .df-main-dropdown.df-open > .df-level-one {
        max-height: 900px;

        padding: 7px 0 12px !important;

        opacity: 1;
        visibility: visible;
    }

    /* Open nested submenu */
    .site-header .df-submenu.df-submenu-open > .df-level-two {
        max-height: 500px;

        padding: 5px 0 8px !important;

        opacity: 1;
        visibility: visible;
    }

    .site-header .df-level-one > li {
        width: 100%;
    }

    .site-header .df-main-menu .dropdown-item {
        min-height: 46px;
        padding: 12px 18px 12px 22px !important;

        white-space: normal;
    }

    .site-header .df-level-two .dropdown-item {
        padding-left: 42px !important;

        color: rgba(255, 255, 255, 0.76) !important;
        font-size: 11.5px !important;
    }

    .site-header .df-level-two .dropdown-item:hover,
    .site-header .df-level-two .dropdown-item:focus {
        padding-left: 48px !important;
        color: #ffffff !important;
    }

    .site-header .df-level-two .dropdown-item::before {
        left: 21px;
    }

    .site-header .df-submenu-toggle {
        font-weight: 600 !important;
        color: #ffffff !important;
    }

    .site-header .df-submenu-arrow {
        transform: rotate(45deg);
    }

    .site-header
    .df-submenu.df-submenu-open
    > .df-submenu-toggle
    .df-submenu-arrow {
        transform: rotate(135deg);
    }
}

/* Very small mobile */
@media (max-width: 575.98px) {

    .site-header .df-main-menu {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .site-header .df-main-menu .dropdown-item {
        font-size: 11.5px !important;
    }

    .site-header .df-level-two .dropdown-item {
        padding-left: 34px !important;
    }

    .site-header .df-level-two .dropdown-item::before {
        left: 15px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    .site-header .df-level-one,
    .site-header .df-level-two,
    .site-header .dropdown-item,
    .site-header .df-submenu-arrow {
        transition: none !important;
    }
}



/* =========================================================
   MOBILE SERVICES DROPDOWN CLICK FIX
========================================================= */

@media (max-width: 991.98px) {

    /* Prevent Bootstrap from hiding custom dropdown menus */
    #dfHeader .df-main-dropdown > .df-level-one,
    #dfHeader .df-submenu > .df-level-two {
        display: block !important;
        position: static !important;
        float: none !important;

        width: 100% !important;
        min-width: 100% !important;

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

        max-height: 0;
        overflow: hidden;

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

        transform: none !important;
        box-shadow: none !important;
        border: 0 !important;

        transition:
            max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.3s ease,
            visibility 0.3s ease,
            padding 0.3s ease !important;
    }

    /* Open Services */
    #dfHeader .df-main-dropdown.df-open > .df-level-one {
        display: block !important;

        max-height: 1000px;
        padding: 8px 0 12px !important;

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

    /* Open Residential or Commercial */
    #dfHeader .df-submenu.df-submenu-open > .df-level-two {
        display: block !important;

        max-height: 600px;
        padding: 6px 0 10px !important;

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

    /* Services arrow */
    #dfHeader .df-main-dropdown > .dropdown-toggle::after {
        display: block !important;
        position: static !important;

        width: 8px !important;
        height: 8px !important;

        margin-left: auto !important;
        margin-right: 6px !important;

        border: 0 !important;
        border-right: 1.5px solid currentColor !important;
        border-bottom: 1.5px solid currentColor !important;

        transform: rotate(45deg) !important;

        transition: transform 0.3s ease !important;
    }

    #dfHeader .df-main-dropdown.df-open >
    .dropdown-toggle::after {
        transform: rotate(225deg) !important;
    }

    /* Residential and Commercial arrows */
    #dfHeader .df-submenu-arrow {
        transform: rotate(45deg);
        transition: transform 0.3s ease;
    }

    #dfHeader .df-submenu.df-submenu-open >
    .df-submenu-toggle .df-submenu-arrow {
        transform: rotate(135deg);
    }

    /* Mobile dropdown backgrounds */
    #dfHeader .df-level-one {
        background: rgba(255, 255, 255, 0.04) !important;
    }

    #dfHeader .df-level-two {
        background: rgba(0, 185, 198, 0.06) !important;
    }

    #dfHeader .df-level-one .dropdown-item {
        white-space: normal !important;
    }
}