/* =========================================================
   CIVILLENCE ENGINEERING LIMITED
   ENGINEERING NAVBAR
   ========================================================= */


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

:root {

    --nav-navy: #06182b;
    --nav-navy-dark: #03101d;
    --nav-orange: #ff9800;
    --nav-orange-light: #ffb52e;

    --nav-white: #ffffff;
    --nav-text: #071b31;

    --nav-border: rgba(255, 152, 0, 0.95);

    --nav-blueprint: rgba(6, 24, 43, 0.12);

    --nav-shadow:
        0 8px 30px rgba(3, 16, 29, 0.10);

}


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

.navbar {

    position: relative;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 9999;

    background: #ffffff;

    border-top: 3px solid var(--nav-border);
    border-bottom: 3px solid var(--nav-border);

    box-shadow: var(--nav-shadow);

    isolation: isolate;

}


/* =========================================================
   ENGINEERING BLUEPRINT LAYER
   ========================================================= */

.navbar-blueprint {

    position: absolute;

    inset: 0;

    z-index: -1;

    overflow: hidden;

    pointer-events: none;

    opacity: 1;

}


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

.navbar-blueprint::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            90deg,
            rgba(6, 24, 43, 0.10) 1px,
            transparent 1px
        ),

        linear-gradient(
            rgba(6, 24, 43, 0.10) 1px,
            transparent 1px
        );

    background-size:
        36px 36px;

}


/* =========================================================
   BLUEPRINT DIAGONAL ENGINEERING LINES
   ========================================================= */

.navbar-blueprint::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            125deg,
            transparent 0 42%,
            rgba(6, 24, 43, 0.12) 42.1%,
            transparent 42.3%
        ),

        linear-gradient(
            65deg,
            transparent 0 70%,
            rgba(255, 152, 0, 0.18) 70.1%,
            transparent 70.3%
        );

}


/* =========================================================
   TECHNICAL LINES
   ========================================================= */

.blueprint-line {

    position: absolute;

    display: block;

    height: 1px;

    background: rgba(6, 24, 43, 0.18);

    transform-origin: left center;

}


.line-one {

    width: 420px;

    left: 15%;

    top: 25%;

    transform: rotate(-8deg);

}


.line-two {

    width: 350px;

    left: 48%;

    top: 70%;

    transform: rotate(14deg);

}


.line-three {

    width: 280px;

    right: 2%;

    top: 32%;

    transform: rotate(-24deg);

}


/* =========================================================
   ENGINEERING RULERS
   ========================================================= */

.blueprint-ruler {

    position: absolute;

    height: 20px;

    width: 150px;

    border-top: 1px solid rgba(6, 24, 43, 0.20);

    border-bottom: 1px solid rgba(6, 24, 43, 0.20);

    background:

        repeating-linear-gradient(
            90deg,
            rgba(6, 24, 43, 0.20) 0,
            rgba(6, 24, 43, 0.20) 1px,
            transparent 1px,
            transparent 10px
        );

    opacity: 0.7;

}


.ruler-one {

    right: 22%;

    top: 14%;

    transform: rotate(-7deg);

}


.ruler-two {

    left: 40%;

    bottom: 12%;

    transform: rotate(5deg);

}


/* =========================================================
   TECHNICAL CIRCLES
   ========================================================= */

.blueprint-circle {

    position: absolute;

    border: 2px solid rgba(6, 24, 43, 0.12);

    border-radius: 50%;

}


.circle-one {

    width: 150px;

    height: 150px;

    right: 12%;

    top: -80px;

}


.circle-two {

    width: 90px;

    height: 90px;

    left: 62%;

    bottom: -60px;

}


/* =========================================================
   ENGINEERING GEARS
   ========================================================= */

.blueprint-gear {

    position: absolute;

    color: rgba(6, 24, 43, 0.14);

    font-size: 70px;

    line-height: 1;

}


.gear-one {

    right: 31%;

    top: -8px;

}


.gear-two {

    left: 23%;

    bottom: -25px;

    font-size: 48px;

}


/* =========================================================
   EXCAVATOR / CATERPILLAR STYLE LINE DRAWING
   ========================================================= */

.blueprint-excavator {

    position: absolute;

    right: 3%;

    bottom: -3px;

    width: 170px;

    height: 75px;

    opacity: 0.16;

}


/* CAB */

.excavator-cab {

    position: absolute;

    left: 63px;

    top: 10px;

    width: 42px;

    height: 34px;

    border: 3px solid var(--nav-navy);

    border-radius: 4px;

    transform: skew(-7deg);

}


/* CAB WINDOW */

.excavator-cab::after {

    content: "";

    position: absolute;

    left: 7px;

    top: 6px;

    width: 25px;

    height: 18px;

    border: 2px solid var(--nav-navy);

}


/* ARM */

.excavator-arm {

    position: absolute;

    left: 101px;

    top: 12px;

    width: 60px;

    height: 7px;

    background: var(--nav-navy);

    transform-origin: left center;

    transform: rotate(-35deg);

}


/* SECOND ARM */

.excavator-arm::after {

    content: "";

    position: absolute;

    right: -40px;

    top: 0;

    width: 45px;

    height: 6px;

    background: var(--nav-navy);

    transform-origin: left center;

    transform: rotate(65deg);

}


/* BUCKET */

.excavator-bucket {

    position: absolute;

    right: -2px;

    top: 43px;

    width: 28px;

    height: 20px;

    border: 3px solid var(--nav-navy);

    transform: skew(-20deg);

}


/* TRACK */

.excavator-track {

    position: absolute;

    left: 38px;

    bottom: 4px;

    width: 105px;

    height: 20px;

    border: 4px solid var(--nav-navy);

    border-radius: 15px;

}


.excavator-track::before,
.excavator-track::after {

    content: "";

    position: absolute;

    top: 4px;

    width: 9px;

    height: 9px;

    border: 2px solid var(--nav-navy);

    border-radius: 50%;

}


.excavator-track::before {

    left: 12px;

}


.excavator-track::after {

    right: 12px;

}


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

.blueprint-drafting {

    position: absolute;

    left: 12%;

    top: 20%;

    font-size: 70px;

    color: rgba(255, 152, 0, 0.16);

    transform: rotate(15deg);

}


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

.navbar-container {

    position: relative;

    min-height: 105px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

    padding: 10px 22px;

}


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

.navbar-logo {

    display: flex;

    align-items: center;

    flex-shrink: 0;

    text-decoration: none;

    position: relative;

    z-index: 10;

}


.navbar-logo-image {

    display: block;

    width: 135px;

    height: 78px;

    object-fit: contain;

    object-position: center;

}


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

.navbar-menu {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 35px;

    flex: 1;

}


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

.navbar-links {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    list-style: none;

    padding: 0;

    margin: 0;

}


.navbar-item {

    position: relative;

    list-style: none;

}


.navbar-link {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 48px;

    padding: 12px 15px;

    border: 0;

    background: transparent;

    color: var(--nav-text);

    font-family: inherit;

    font-size: 17px;

    font-weight: 700;

    line-height: 1;

    text-decoration: none;

    cursor: pointer;

    transition:
        color .25s ease,
        background .25s ease;

}


/* =========================================================
   LINK ENGINEERING MARK
   ========================================================= */

.navbar-link::after {

    content: "";

    position: absolute;

    left: 15px;

    right: 15px;

    bottom: 4px;

    height: 3px;

    background: var(--nav-orange);

    transform: scaleX(0);

    transform-origin: left;

    transition: transform .25s ease;

}


.navbar-link:hover {

    color: var(--nav-orange);

}


.navbar-link:hover::after {

    transform: scaleX(1);

}


/* =========================================================
   ACTIVE DROPDOWN BUTTON
   ========================================================= */

.navbar-dropdown-toggle.active {

    color: var(--nav-orange);

}


.navbar-dropdown-toggle.active::after {

    transform: scaleX(1);

}


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

.navbar-submenu {

    position: absolute;

    top: calc(100% + 4px);

    left: 0;

    min-width: 290px;

    padding: 10px;

    margin: 0;

    list-style: none;

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

    border: 2px solid var(--nav-orange);

    border-top: 4px solid var(--nav-orange);

    box-shadow:
        0 18px 40px rgba(3, 16, 29, 0.18);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(-8px)
        scale(.98);

    transform-origin: top left;

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;

    z-index: 10000;

}


/* =========================================================
   DROPDOWN OPEN
   ========================================================= */

.navbar-dropdown.open > .navbar-submenu {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateY(0)
        scale(1);

}


/* =========================================================
   DROPDOWN ITEMS
   ========================================================= */

.navbar-submenu li {

    margin: 0;

    padding: 0;

}


.navbar-submenu li a {

    position: relative;

    display: flex;

    align-items: center;

    gap: 12px;

    width: 100%;

    min-height: 46px;

    padding: 11px 13px;

    color: var(--nav-text);

    background: transparent;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

    border-left: 3px solid transparent;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        padding-left .2s ease;

}


.navbar-submenu li a span {

    color: var(--nav-orange);

    font-size: 11px;

    font-weight: 900;

    min-width: 22px;

}


.navbar-submenu li a:hover {

    color: var(--nav-orange);

    background: rgba(255, 152, 0, 0.08);

    border-left-color: var(--nav-orange);

    padding-left: 18px;

}


/* =========================================================
   CONSULTATION BUTTON
   ========================================================= */

.navbar-consultation {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    min-height: 58px;

    padding: 0 25px;

    color: #ffffff;

    background: var(--nav-navy);

    border: 2px solid var(--nav-orange);

    text-decoration: none;

    text-transform: uppercase;

    font-size: 14px;

    font-weight: 900;

    letter-spacing: .5px;

    white-space: nowrap;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;

}


.navbar-consultation strong {

    font-size: 21px;

    line-height: 1;

}


.navbar-consultation:hover {

    color: var(--nav-navy);

    background: var(--nav-orange);

    transform: translateY(-2px);

}


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

.navbar-toggle {

    display: none;

    position: relative;

    width: 52px;

    height: 52px;

    padding: 0;

    border: 2px solid var(--nav-orange);

    background: var(--nav-navy);

    cursor: pointer;

    z-index: 10002;

}


.navbar-toggle span {

    position: absolute;

    left: 13px;

    width: 23px;

    height: 3px;

    background: #ffffff;

    transition:
        transform .25s ease,
        opacity .25s ease,
        top .25s ease;

}


.navbar-toggle span:nth-child(1) {

    top: 16px;

}


.navbar-toggle span:nth-child(2) {

    top: 24px;

}


.navbar-toggle span:nth-child(3) {

    top: 32px;

}


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

.navbar-toggle.active span:nth-child(1) {

    top: 24px;

    transform: rotate(45deg);

}


.navbar-toggle.active span:nth-child(2) {

    opacity: 0;

}


.navbar-toggle.active span:nth-child(3) {

    top: 24px;

    transform: rotate(-45deg);

}


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

@media (max-width: 1100px) {

    .navbar-container {

        gap: 20px;

    }

    .navbar-menu {

        gap: 15px;

    }

    .navbar-link {

        padding-left: 9px;

        padding-right: 9px;

        font-size: 15px;

    }

    .navbar-consultation {

        padding: 0 15px;

        font-size: 12px;

    }

}


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

@media (max-width: 900px) {

    .navbar-container {

        min-height: 82px;

        padding: 8px 16px;

    }


    .navbar-logo-image {

        width: 125px;

        height: 65px;

    }


    /* SHOW HAMBURGER */

    .navbar-toggle {

        display: block;

    }


    /* MENU */

    .navbar-menu {

        position: absolute;

        top: 100%;

        left: 0;

        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        justify-content: flex-start;

        gap: 0;

        max-height: 0;

        overflow: hidden;

        padding: 0;

        background:
            linear-gradient(
                rgba(255,255,255,.98),
                rgba(255,255,255,.98)
            );

        border-bottom: 3px solid var(--nav-orange);

        box-shadow:
            0 20px 35px rgba(3,16,29,.18);

        opacity: 0;

        visibility: hidden;

        transition:
            max-height .35s ease,
            opacity .25s ease,
            visibility .25s ease;

        z-index: 10001;

    }


    /* MENU OPEN */

    .navbar-menu.active {

        max-height: calc(100vh - 82px);

        overflow-y: auto;

        opacity: 1;

        visibility: visible;

    }


    /* LINKS */

    .navbar-links {

        display: flex;

        flex-direction: column;

        align-items: stretch;

        width: 100%;

        gap: 0;

        padding: 10px 15px;

    }


    .navbar-item {

        width: 100%;

        border-bottom: 1px solid rgba(6,24,43,.10);

    }


    .navbar-link {

        display: flex;

        align-items: center;

        justify-content: flex-start;

        width: 100%;

        min-height: 52px;

        padding: 15px 10px;

        font-size: 16px;

        text-align: left;

    }


    .navbar-link::after {

        left: 10px;

        right: auto;

        width: 35px;

        bottom: 5px;

    }


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

    .navbar-dropdown > .navbar-link {

        cursor: pointer;

    }


    .navbar-dropdown {

        position: relative;

    }


    .navbar-submenu {

        position: static;

        display: block;

        width: 100%;

        min-width: 0;

        max-height: 0;

        overflow: hidden;

        padding: 0;

        margin: 0;

        border: 0;

        border-left: 3px solid var(--nav-orange);

        background: rgba(6,24,43,.035);

        box-shadow: none;

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transform: none;

        transition:
            max-height .3s ease,
            opacity .2s ease,
            visibility .2s ease;

    }


    /* OPEN MOBILE DROPDOWN */

    .navbar-dropdown.open > .navbar-submenu {

        max-height: 500px;

        padding: 5px 0;

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform: none;

    }


    .navbar-submenu li a {

        min-height: 48px;

        padding: 12px 14px 12px 20px;

        font-size: 14px;

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

    }


    .navbar-submenu li a:hover {

        padding-left: 25px;

    }


    /* CONSULTATION */

    .navbar-consultation {

        width: calc(100% - 30px);

        margin: 10px 15px 18px;

        min-height: 55px;

    }


    /* BLUEPRINT */

    .blueprint-excavator {

        right: -25px;

        opacity: .10;

    }


    .blueprint-gear {

        opacity: .65;

    }


    .ruler-one {

        right: 5%;

    }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

    .navbar {

        border-top-width: 2px;

        border-bottom-width: 2px;

    }


    .navbar-container {

        min-height: 74px;

        padding: 6px 12px;

    }


    .navbar-logo-image {

        width: 112px;

        height: 58px;

    }


    .navbar-toggle {

        width: 48px;

        height: 48px;

    }


    .navbar-menu.active {

        max-height: calc(100vh - 74px);

    }


    .blueprint-ruler {

        opacity: .45;

    }


    .blueprint-circle {

        opacity: .55;

    }


    .blueprint-drafting {

        left: 55%;

        top: 15%;

        font-size: 55px;

    }


    .blueprint-excavator {

        transform: scale(.75);

        transform-origin: right bottom;

    }

}


/* =========================================================
   TOUCH DEVICES
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

    .navbar-link {

        min-height: 56px;

    }


    .navbar-submenu li a {

        min-height: 52px;

    }


    .navbar-consultation {

        min-height: 58px;

    }

}

/* =========================================================
   MOBILE COMPANY NAME
========================================================= */

.navbar-mobile-brand {
    display: none;
}


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

@media (max-width: 900px) {

    .navbar-mobile-brand {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 12px;
        margin-right: auto;
        line-height: 1;
    }

    .navbar-mobile-brand span {
        color: #061b33;
        font-size: 15px;
        font-weight: 900;
        letter-spacing: 1px;
        line-height: 1.1;
    }

    .navbar-mobile-brand small {
        margin-top: 4px;
        color: #f7941d;
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 2px;
        line-height: 1;
    }

}


/* =========================================================
   ACTIVE NAVIGATION ITEM
========================================================= */

.navbar-item.active > .navbar-link {
    color: #f7941d;
}

.navbar-item.active > .navbar-link::after {
    width: 100%;
}

.navbar-submenu a.active {
    color: #f7941d;
    background: rgba(247, 148, 29, 0.08);
}


/* =========================================================
   MOBILE ACTIVE ITEM
========================================================= */

@media (max-width: 900px) {

    .navbar-item.active > .navbar-link {
        color: #f7941d;
    }

    .navbar-submenu a.active {
        color: #f7941d;
        border-left-color: #f7941d;
    }

}