/* ================================================================
   ADMIN EDIT
   ================================================================ */

.th-admin-edit {
    padding-top: 5px;
    left: 5px;
}

.th-admin-edit a {
    position: relative;
    text-decoration: none;
    color: inherit;
    display: block;
    z-index: 98;
}

.th-admin-edit .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.th-admin-edit .icon span {
    position: absolute;
    color: black !important;
    font-size: 16px;
}


/* ================================================================
   ANNOUNCEMENT BAR
   ================================================================ */

.hr-announcement-warp {
    background:
        linear-gradient(
            135deg,
            var(--primary-teal) 0%,
            var(--dark-teal) 100%
        );

    padding: 0.8rem 0;

    position: relative;

    z-index: 1001;
}

.hr-announcement-bar {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hr-announcement-left .nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.hr-announcement-left .nav-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.hr-announcement-icon {
    width: 20px;
    height: 20px;

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

.hr-announcement-icon span {
    font-size: 0.9rem;
    color: var(--coral) !important;
}

.hr-announcement-left .nav-link {
    color: var(--pure-white) !important;
    text-decoration: none;
    font-size: 0.9rem;

    transition: all 0.3s ease;

    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hr-announcement-left .nav-link:hover {
    color: var(--coral) !important;
}

.hr-announcement-right {
    display: none;
}

#emailText a {
    color: var(--pure-white);
    text-decoration: none;
}

#emailText a:hover {
    color: var(--coral);
}


@media (max-width: 768px) {

    .hr-announcement-left {
        display: none;
    }

    .hr-announcement-right {
        display: block;
        width: 100%;
        text-align: center;
    }

    .hr-announcement-right .nav {
        justify-content: center;
    }

    .hr-announcement-right .nav-link {
        color: var(--pure-white) !important;
        font-size: 0.95rem;
        display: flex;
    }

}


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

.modern-nav {
    position: fixed;

    top: 50px;
    left: 0;

    width: 100%;

    z-index: 1000;

    padding: 1.5rem 0;

    transition:
        all 0.4s
        cubic-bezier(0.4, 0, 0.2, 1);

    background: transparent;
}

.modern-nav.scrolled {

    background:
        linear-gradient(135deg,var(--primary-teal) 0%,var(--dark-teal) 100%);

    backdrop-filter:
        blur(20px);

    box-shadow:
        0 2px 30px rgba(0, 0, 0, 0.08);

    padding: 1rem 0;

    top: 0;
}


.nav-logo img {
    height: 80px;
    width: auto;

    transition:
        all 0.3s ease;
}

.modern-nav.scrolled .nav-logo img {
    height: 45px;
}


.nav-menu {
    align-items: center;
}


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

.nav-menu > .nav-item {
    position: relative;
}

.nav-link {
    color: var(--pure-white);

    font-weight: 500;

    font-size: 0.95rem;

    text-decoration: none;

    position: relative;

    padding: 0.5rem 0 !important;

    transition:
        color 0.3s ease;
}

.nav-link:focus,
.nav-link:hover {
    color: var(--pure-white);
}

.modern-nav.scrolled .nav-link {
    color: var(--pure-white) !important;
}


/* Main link underline */
.nav-menu > .nav-item > .nav-link::after {

    content: '';

    position: absolute;

    bottom: 0;
    left: 0;

    width: 0;

    height: 2px;

    background: var(--coral);

    transition:
        width 0.3s ease;
}

.nav-menu > .nav-item > .nav-link:hover::after {
    width: 100%;
}


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

.menu-chevron {

    font-size: 0.65rem;

    margin-left: 5px;

    transition:
        transform 0.25s ease;
}

.dropdown-mega:hover > .nav-link .menu-chevron {
    transform: rotate(180deg);
}


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

@media (min-width: 992px) {


    /* ------------------------------------------------------------
       NORMAL DROPDOWN PARENT
       ------------------------------------------------------------ */

    .normal-dropdown-menu,
    .owner-services-menu {
        position: relative;
    }


    /* ------------------------------------------------------------
       NORMAL DROPDOWN BOX
       ------------------------------------------------------------ */

    .normal-mega-menu {

        position: absolute;

        top: calc(100% + 15px);

        left: 50%;

        width: 300px;

        min-width: 300px;

        max-width: 320px;

        background: var(--pure-white);

        border-radius: 12px;

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

        border-top:
            3px solid var(--coral);

        box-shadow:
            0 18px 45px rgba(0, 0, 0, 0.13);

        padding: 8px 0;

        opacity: 0;

        visibility: hidden;

        transform:
            translate(-50%, 12px);

        transition:
            opacity 0.25s ease,
            visibility 0.25s ease,
            transform 0.25s ease;

        z-index: 9999;
    }


    /* ------------------------------------------------------------
       SHOW NORMAL DROPDOWN
       ------------------------------------------------------------ */

    .normal-dropdown-menu:hover > .normal-mega-menu,
    .normal-dropdown-menu:focus-within > .normal-mega-menu {

        opacity: 1;

        visibility: visible;

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


    /* ------------------------------------------------------------
       DROPDOWN ARROW
       ------------------------------------------------------------ */

    .normal-mega-menu::before {

        content: '';

        position: absolute;

        top: -9px;

        left: 50%;

        width: 16px;

        height: 16px;

        background:
            var(--pure-white);

        border-left:
            1px solid rgba(0, 0, 0, 0.07);

        border-top:
            1px solid rgba(0, 0, 0, 0.07);

        transform:
            translateX(-50%)
            rotate(45deg);
    }


    /* ------------------------------------------------------------
       REMOVE BOOTSTRAP CONTAINER WIDTH
       ------------------------------------------------------------ */

    .normal-mega-menu > .container-fluid {

        width: 100%;

        padding: 0;

        margin: 0;
    }

    .normal-mega-menu .row {
        margin: 0;
    }

    .normal-mega-menu .col-12 {
        padding: 0;
    }


    /* ------------------------------------------------------------
       NORMAL DROPDOWN LIST
       ------------------------------------------------------------ */

    .normal-mega-menu > .container-fluid > .row > .col-12 > .mega-links {

        margin: 0;

        padding: 7px 0;
    }


    /* ------------------------------------------------------------
       NORMAL DROPDOWN ITEM
       ------------------------------------------------------------ */

    .desktop-submenu-item {

        position: relative;

        margin: 0 !important;

        padding: 0 !important;
    }


    /* ------------------------------------------------------------
       NORMAL DROPDOWN LINK
       ------------------------------------------------------------ */

    .desktop-submenu-link {

        display: flex;

        align-items: center;

        justify-content: space-between;

        width: 100%;

        padding:
            11px 18px;

        color:
            var(--charcoal);

        background:
            transparent;

        font-size:
            0.9rem;

        font-weight:
            500;

        text-decoration:
            none;

        transition:
            background 0.2s ease,
            color 0.2s ease,
            padding-left 0.2s ease;
    }


    .desktop-submenu-link:hover {

        color:
            var(--coral);

        background:
            rgba(255, 127, 80, 0.07);

        padding-left:
            23px;
    }


    /* Remove old underline */
    .desktop-submenu-link::after {
        display: none !important;
    }


    /* ------------------------------------------------------------
       NESTED SUBMENU
       ------------------------------------------------------------ */

    .nested-desktop-menu {

        position: absolute;

        top: -8px;

        left: calc(100% + 8px);

        width: 280px;

        min-width: 280px;

        padding: 8px 0;

        margin: 0;

        background:
            var(--pure-white);

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

        border-radius:
            10px;

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

        opacity: 0;

        visibility: hidden;

        transform:
            translateX(10px);

        transition:
            opacity 0.2s ease,
            visibility 0.2s ease,
            transform 0.2s ease;

        z-index: 10000;
    }


    /* Show nested submenu */

    .desktop-submenu-item:hover > .nested-desktop-menu,
    .desktop-submenu-item:focus-within > .nested-desktop-menu {

        opacity: 1;

        visibility: visible;

        transform:
            translateX(0);
    }


    /* Nested arrow */

    .desktop-submenu-link .fa-chevron-right {

        font-size:
            0.65rem;

        color:
            var(--text-gray);

        transition:
            color 0.2s ease;
    }

    .desktop-submenu-link:hover .fa-chevron-right {

        color:
            var(--coral);
    }


    /* ============================================================
       OWNER SERVICES DROPDOWN
       ============================================================ */

    .owner-mega-menu {

        position: absolute;

        top: calc(100% + 15px);

        left: 50%;

        width: 850px;

        max-width:
            min(850px, 90vw);

        background:
            var(--pure-white);

        border-radius:
            14px;

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

        border-top:
            3px solid var(--coral);

        box-shadow:
            0 20px 55px rgba(0, 0, 0, 0.14);

        padding:
            22px 20px;

        opacity: 0;

        visibility: hidden;

        transform:
            translate(-50%, 12px);

        transition:
            opacity 0.25s ease,
            visibility 0.25s ease,
            transform 0.25s ease;

        z-index: 9999;
    }


    /* Show Owner Services */

    .owner-services-menu:hover > .owner-mega-menu,
    .owner-services-menu:focus-within > .owner-mega-menu {

        opacity: 1;

        visibility: visible;

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


    /* Owner Services arrow */

    .owner-mega-menu::before {

        content: '';

        position: absolute;

        top: -9px;

        left: 50%;

        width: 16px;

        height: 16px;

        background:
            var(--pure-white);

        border-left:
            1px solid rgba(0, 0, 0, 0.07);

        border-top:
            1px solid rgba(0, 0, 0, 0.07);

        transform:
            translateX(-50%)
            rotate(45deg);
    }


    /* Owner container */

    .owner-mega-menu .container-fluid {

        padding:
            0;
    }

    .owner-mega-menu .row {

        margin:
            0 -10px;
    }

    .owner-service-column {

        padding:
            0 10px;
    }


    /* Owner services list */

    .owner-mega-menu .mega-links {

        margin:
            0;

        padding:
            0;
    }


    .owner-mega-menu .mega-links li {

        margin:
            0 0 3px 0;
    }


    .owner-mega-menu .mega-links a {

        display:
            block;

        padding:
            8px 10px;

        color:
            var(--text-gray);

        font-size:
            0.87rem;

        line-height:
            1.4;

        border-radius:
            6px;

        text-decoration:
            none;

        transition:
            all 0.2s ease;
    }


    .owner-mega-menu .mega-links a:hover {

        color:
            var(--coral);

        background:
            rgba(255, 127, 80, 0.07);

        padding-left:
            15px;
    }


    .owner-mega-menu .mega-links a::after {

        display:
            none !important;
    }


    .no-services-message {

        margin:
            0;

        padding:
            15px;

        color:
            var(--text-gray);
    }

}


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

.btn-coral {

    background:
        linear-gradient(
            135deg,
            var(--coral) 0%,
            var(--coral-dark) 100%
        );

    color:
        var(--pure-white) !important;

    padding:
        0.9rem 2rem;

    border-radius:
        50px;

    font-weight:
        600;

    text-decoration:
        none;

    display:
        inline-block;

    border:
        none;

    transition:
        all 0.3s
        cubic-bezier(0.4, 0, 0.2, 1);

    box-shadow:
        0 4px 15px rgba(255, 127, 80, 0.3);
}

.btn-coral:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 25px rgba(255, 127, 80, 0.4);

    background:
        linear-gradient(
            135deg,
            var(--coral-dark) 0%,
            var(--coral) 100%
        );
}


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

.mobile-toggle {

    background:
        none;

    border:
        none;

    cursor:
        pointer;

    padding:
        0.5rem;

    width:
        40px;

    height:
        40px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    gap:
        5px;

    position:
        relative;

    z-index:
        1001;
}

.mobile-toggle .bar {

    display:
        block;

    width:
        25px;

    height:
        2px;

    background:
        var(--pure-white);

    transition:
        all 0.3s
        cubic-bezier(0.4, 0, 0.2, 1);

    border-radius:
        2px;
}

.modern-nav.scrolled
.mobile-toggle .bar {

    background:
        var(--coral);
}


/* Hamburger animation */

.mobile-toggle.active
.bar:nth-child(1) {

    transform:
        translateY(7px)
        rotate(45deg);
}

.mobile-toggle.active
.bar:nth-child(2) {

    opacity:
        0;

    transform:
        translateX(-10px);
}

.mobile-toggle.active
.bar:nth-child(3) {

    transform:
        translateY(-7px)
        rotate(-45deg);
}


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

.mobile-menu-overlay {

    position:
        fixed;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        100vh;

    background:
        rgba(26, 26, 26, 0.6);

    backdrop-filter:
        blur(5px);

    z-index:
        1999;

    opacity:
        0;

    visibility:
        hidden;

    transition:
        all 0.4s ease;
}

.mobile-menu-overlay.active {

    opacity:
        1;

    visibility:
        visible;
}


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

.mobile-menu-drawer {

    position:
        fixed;

    top:
        0;

    right:
        -100%;

    width:
        100%;

    max-width:
        420px;

    height:
        100vh;

    background:
        var(--pure-white);

    z-index:
        2000;

    transition:
        right 0.4s
        cubic-bezier(0.4, 0, 0.2, 1);

    display:
        flex;

    flex-direction:
        column;

    box-shadow:
        -10px 0 40px rgba(0, 0, 0, 0.1);

    overflow-y:
        auto;
}

.mobile-menu-drawer.active {

    right:
        0;

    animation:
        slideInFromRight 0.4s
        cubic-bezier(0.4, 0, 0.2, 1);
}


body.menu-open {
    overflow:
        hidden;
}


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

.mobile-menu-header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    padding:
        1.5rem;

    border-bottom:
        1px solid var(--light-gray);

    background:
        var(--warm-gray);

    position:
        sticky;

    top:
        0;

    z-index:
        10;
}

.mobile-logo img {

    height:
        40px;

    width:
        auto;
}

.mobile-close {

    background:
        none;

    border:
        none;

    width:
        40px;

    height:
        40px;

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    cursor:
        pointer;

    font-size:
        1.2rem;

    color:
        var(--charcoal);

    transition:
        all 0.3s ease;
}

.mobile-close:hover {

    background:
        var(--coral);

    color:
        var(--pure-white);

    transform:
        rotate(90deg);
}


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

.mobile-menu-body {

    flex:
        1;

    overflow-y:
        auto;

    padding:
        1rem 0;
}

.mobile-menu-body::-webkit-scrollbar {

    width:
        4px;
}

.mobile-menu-body::-webkit-scrollbar-thumb {

    background:
        var(--coral);

    border-radius:
        10px;
}


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

.mobile-nav-list {

    list-style:
        none;

    padding:
        0;

    margin:
        0;
}

.mobile-nav-item {

    border-bottom:
        1px solid rgba(0, 0, 0, 0.05);
}

.mobile-nav-link-wrapper {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;
}

.mobile-nav-link {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        1.2rem 1.5rem;

    color:
        var(--charcoal);

    text-decoration:
        none;

    font-size:
        1.1rem;

    font-weight:
        500;

    transition:
        all 0.3s ease;

    flex:
        1;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {

    background:
        var(--warm-gray);

    color:
        var(--coral);

    padding-left:
        2rem;
}


/* ================================================================
   MOBILE SUBMENU TOGGLE
   ================================================================ */

.mobile-submenu-toggle {

    background:
        none;

    border:
        none;

    width:
        40px;

    height:
        40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    cursor:
        pointer;

    color:
        var(--text-gray);

    transition:
        all 0.3s ease;

    flex-shrink:
        0;

    position:
        relative;
}

/* Expands the clickable tap area dramatically without altering flex layouts */
.mobile-submenu-toggle::before {

    content:
        '';

    position:
        absolute;

    top:
        -15px;

    bottom:
        -15px;

    left:
        -60px; /* extends touch area smoothly into the menu item label space */

    right:
        -10px;
        
    z-index: 
        1;
}

.mobile-submenu-toggle i {
    
    position:
        relative;
        
    z-index: 
        2;
        
    transition: 
        transform 0.3s ease;
}

.mobile-submenu-toggle:hover {

    color:
        var(--coral);
}

.mobile-submenu-toggle.active {

    color:
        var(--coral);
}

/* Ensure only the icon rotates, so the tap area stays firmly on the left */
.mobile-submenu-toggle.active i {

    transform:
        rotate(180deg);
}

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

.mobile-submenu {

    list-style:
        none;

    padding:
        0;

    margin:
        0;

    max-height:
        0;

    overflow:
        hidden;

    transition:
        max-height 0.4s
        cubic-bezier(0.4, 0, 0.2, 1);

    background:
        var(--warm-gray);
}

.mobile-submenu.open {

    max-height:
        1500px;
}

.submenu-item {

    border-top:
        1px solid rgba(0, 0, 0, 0.05);
}

.mobile-submenu-link-wrapper {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;
}

.mobile-submenu-link {

    display:
        block;

    padding:
        1rem 1.5rem 1rem 2.5rem;

    color:
        var(--text-gray);

    text-decoration:
        none;

    font-size:
        1rem;

    transition:
        all 0.3s ease;

    flex:
        1;
}

.mobile-submenu-link:hover {

    color:
        var(--coral);

    background:
        rgba(255, 127, 80, 0.05);

    padding-left:
        3rem;
}

.mobile-submenu.level-2 {

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

.mobile-submenu.level-2
.mobile-submenu-link {

    padding-left:
        3.5rem;

    font-size:
        0.95rem;
}

.mobile-submenu.level-2
.mobile-submenu-link:hover {

    padding-left:
        4rem;
}


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

.mobile-contact-info {

    padding:
        2rem 1.5rem;

    margin-top:
        1rem;

    border-top:
        2px solid var(--light-gray);
}

.mobile-contact-info h6 {

    font-family:
        var(--font-02);

    font-size:
        1.3rem;

    color:
        var(--charcoal);

    margin-bottom:
        1.5rem;

    font-weight:
        600;
}

.mobile-contact-link {

    display:
        flex;

    align-items:
        center;

    gap:
        1rem;

    padding:
        0.8rem 0;

    color:
        var(--text-gray);

    text-decoration:
        none;

    transition:
        all 0.3s ease;
}

.mobile-contact-link:hover {

    color:
        var(--coral);
}

.mobile-contact-link i {

    width:
        35px;

    height:
        35px;

    background:
        var(--warm-gray);

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--primary-teal);

    transition:
        all 0.3s ease;
}

.mobile-contact-link:hover i {

    background:
        var(--coral);

    color:
        var(--pure-white);
}


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

.mobile-social-links {

    display:
        flex;

    gap:
        1rem;

    margin-top:
        1.5rem;
}

.mobile-social-links a {

    width:
        40px;

    height:
        40px;

    background:
        var(--warm-gray);

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--charcoal);

    text-decoration:
        none;

    transition:
        all 0.3s ease;
}

.mobile-social-links a:hover {

    background:
        var(--coral);

    color:
        var(--pure-white);

    transform:
        translateY(-3px);
}


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

.mobile-menu-footer {

    padding:
        1.5rem;

    border-top:
        1px solid var(--light-gray);

    background:
        var(--warm-gray);

    position:
        sticky;

    bottom:
        0;
}

.btn-coral-block {

    display:
        block;

    width:
        100%;

    text-align:
        center;

    padding:
        1rem 2rem;

    font-size:
        1rem;
}


/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 991px) {

    .nav-phone {
        display:
            none !important;
    }

    .btn-coral.d-none.d-lg-inline-block {
        display:
            none !important;
    }

}


@media (max-width: 576px) {

    .mobile-menu-drawer {
        max-width:
            100%;
    }

    .mobile-nav-link {

        font-size:
            1rem;

        padding:
            1rem 1.2rem;
    }

    .mobile-submenu-link {

        padding:
            0.9rem 1.2rem 0.9rem 2rem;

        font-size:
            0.95rem;
    }

    .mobile-submenu.level-2
    .mobile-submenu-link {

        padding-left:
            3rem;
    }

}


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

@keyframes slideInFromRight {

    from {
        transform:
            translateX(100%);
    }

    to {
        transform:
            translateX(0);
    }

}


@keyframes fadeInUp {

    from {

        opacity:
            0;

        transform:
            translateY(20px);
    }

    to {

        opacity:
            1;

        transform:
            translateY(0);
    }

}


.mobile-menu-drawer.active
.mobile-nav-item {

    animation:
        fadeInUp 0.4s ease forwards;

    opacity:
        0;
}


.mobile-menu-drawer.active
.mobile-nav-item:nth-child(1) {
    animation-delay:
        0.05s;
}

.mobile-menu-drawer.active
.mobile-nav-item:nth-child(2) {
    animation-delay:
        0.10s;
}

.mobile-menu-drawer.active
.mobile-nav-item:nth-child(3) {
    animation-delay:
        0.15s;
}

.mobile-menu-drawer.active
.mobile-nav-item:nth-child(4) {
    animation-delay:
        0.20s;
}

.mobile-menu-drawer.active
.mobile-nav-item:nth-child(5) {
    animation-delay:
        0.25s;
}

.mobile-menu-drawer.active
.mobile-nav-item:nth-child(6) {
    animation-delay:
        0.30s;
}

.mobile-menu-drawer.active
.mobile-nav-item:nth-child(7) {
    animation-delay:
        0.35s;
}
.btn-outline-white {
    background: transparent;
    color: var(--pure-white) !important;
    padding: 0.9rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    border: 2px solid var(--pure-white);
    transition: all 0.3s ease;
}
.btn-outline-white:hover {
    background: var(--pure-white);
    color: var(--charcoal) !important;
}
@media (min-width: :1280px) {
    .nav-logo img {
        height: 30px;
    }
}
@media(min-width: 1366px){
    .nav-logo img{
        height: 45px;
    }
}
@media (min-width: 1500px) {
    .nav-logo img {
        height: 80px;
    }
}