/* =========================================================
   DOORWAY SOLUTION
   GLOBAL HEADER / NAVBAR
   Used on Home, About, Products, Projects, Contact
========================================================= */


/* =========================================================
   01. HEADER VARIABLES
========================================================= */

:root {
    --brand-blue: #3f4198;
    --brand-blue-light: #5558bd;
    --brand-blue-dark: #292b72;

    --charcoal: #242124;

    --white: #ffffff;

    --font-heading: "Manrope", sans-serif;
    --font-body: "Inter", sans-serif;
}


/* =========================================================
   02. HEADER RESET
========================================================= */

.doorway-header,
.doorway-header *,
.doorway-header *::before,
.doorway-header *::after {
    box-sizing: border-box;
}


.doorway-header a {
    color: inherit;
    text-decoration: none;
}


.doorway-header img,
.doorway-header svg {
    display: block;
    max-width: 100%;
}


.doorway-header button {
    font: inherit;

    -webkit-tap-highlight-color:
        transparent;
}



/* =========================================================
   03. FLOATING HEADER — DESKTOP
========================================================= */

.doorway-header {
    position: fixed;

    top: 20px;
    left: 0;

    z-index: 1000;

    width: 100%;

    padding:
        0 24px;

    transition:
        top 0.3s ease,
        padding 0.3s ease;
}



/* =========================================================
   04. MAIN FLOATING NAVBAR
========================================================= */

.doorway-navbar {
    width:
        min(
            100%,
            1520px
        );

    min-height:
        78px;

    margin:
        0 auto;

    padding:
        0 18px
        0 24px;

    display:
        flex;

    align-items:
        center;

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

    border:
        1px solid
        rgba(
            35,
            36,
            44,
            0.07
        );

    border-radius:
        16px;

    box-shadow:
        0 15px 45px
        rgba(
            20,
            22,
            35,
            0.10
        );

    transition:
        min-height 0.3s ease,
        box-shadow 0.3s ease;

    contain:
        paint;
}



/* =========================================================
   05. LOGO
========================================================= */

.doorway-navbar-logo {
    display:
        flex;

    align-items:
        center;

    flex-shrink:
        0;
}


.doorway-navbar-logo img {
    width:
        150px;

    height:
        auto;
}



/* =========================================================
   06. DESKTOP NAVIGATION
========================================================= */

.doorway-nav {
    margin-left:
        auto;

    margin-right:
        46px;

    display:
        flex;

    align-items:
        center;

    gap:
        36px;
}


.doorway-nav-link {
    position:
        relative;

    padding:
        29px 0
        27px;

    color:
        #36373d;

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

    font-size:
        14px;

    font-weight:
        500;

    transition:
        color 0.25s ease;
}


.doorway-nav-link::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        20px;

    width:
        100%;

    height:
        1.5px;

    background:
        var(--brand-blue);

    transform:
        scaleX(0);

    transform-origin:
        right center;

    transition:
        transform 0.3s ease;
}


.doorway-nav-link:hover,
.doorway-nav-link.active {
    color:
        var(--brand-blue);
}


.doorway-nav-link:hover::after,
.doorway-nav-link.active::after {
    transform:
        scaleX(1);

    transform-origin:
        left center;
}



/* =========================================================
   07. HEADER RIGHT SIDE
========================================================= */

.doorway-navbar-right {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    flex-shrink:
        0;
}



/* =========================================================
   08. DESKTOP CTA
========================================================= */

.doorway-header-cta {
    min-height:
        50px;

    padding:
        0 18px
        0 21px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        20px;

    background:
        var(--brand-blue);

    color:
        var(--white);

    border-radius:
        6px;

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

    font-size:
        13px;

    font-weight:
        600;

    box-shadow:
        0 8px 20px
        rgba(
            65,
            67,
            153,
            0.14
        );

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}
.doorway-header-cta,
.doorway-header-cta span,
.doorway-header-cta svg {
    color: #ffffff !important;
}


.doorway-header-cta svg {
    width:
        18px;

    height:
        18px;

    transition:
        transform 0.25s ease;
}


.doorway-header-cta:hover {
    background:
        var(--brand-blue-light);

    transform:
        translateY(-1px);

    box-shadow:
        0 12px 28px
        rgba(
            65,
            67,
            153,
            0.22
        );
}


.doorway-header-cta:hover svg {
    transform:
        translateX(4px);
}



/* =========================================================
   09. DESKTOP — HIDE MOBILE ELEMENTS
========================================================= */

.mobile-brochure-btn {
    display:
        none;
}


.doorway-mobile-menu {
    display:
        none;
}



/* =========================================================
   10. HAMBURGER
========================================================= */

.doorway-menu-toggle {
    position:
        relative;

    width:
        44px;

    height:
        44px;

    padding:
        0;

    flex-shrink:
        0;

    display:
        none;

    border:
        1px solid
        #e3e3e8;

    border-radius:
        7px;

    background:
        #f3f3f7;

    cursor:
        pointer;
}


.doorway-menu-toggle span {
    position:
        absolute;

    left:
        12px;

    width:
        19px;

    height:
        1.5px;

    background:
        #26272c;

    transition:
        top 0.3s ease,
        transform 0.3s ease;
}


.doorway-menu-toggle span:first-child {
    top:
        17px;
}


.doorway-menu-toggle span:last-child {
    top:
        25px;
}


.doorway-menu-toggle.active
span:first-child {
    top:
        21px;

    transform:
        rotate(45deg);
}


.doorway-menu-toggle.active
span:last-child {
    top:
        21px;

    transform:
        rotate(-45deg);
}



/* =========================================================
   11. SCROLLED HEADER
========================================================= */

.doorway-header.scrolled {
    top:
        10px;
}


.doorway-header.scrolled
.doorway-navbar {
    min-height:
        70px;

    box-shadow:
        0 12px 35px
        rgba(
            20,
            22,
            35,
            0.13
        );
}



/* =========================================================
   12. SMALL DESKTOP
   1025px — 1280px
========================================================= */

@media (max-width: 1280px) {

    .doorway-nav {
        margin-right:
            28px;

        gap:
            27px;
    }


    .doorway-navbar-logo img {
        width:
            138px;
    }

}



/* =========================================================
   13. TABLET
   768px — 1024px
========================================================= */

@media (max-width: 1024px) {


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

    .doorway-header {
        top:
            14px;

        padding:
            0 18px;
    }


    .doorway-navbar {
        min-height:
            70px;

        padding:
            0 12px
            0 18px;

        border-radius:
            14px;
    }


    .doorway-navbar-logo img {
        width:
            130px;
    }



    /* =====================================================
       HIDE DESKTOP NAV
    ===================================================== */

    .doorway-nav,
    .doorway-header-cta {
        display:
            none;
    }



    /* =====================================================
       RIGHT SIDE
    ===================================================== */

    .doorway-navbar-right {
        margin-left:
            auto;

        display:
            flex;

        align-items:
            center;

        gap:
            8px;
    }



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

    .doorway-menu-toggle {
        display:
            block;
    }



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

    .doorway-mobile-menu {
        width:
            calc(
                100% - 36px
            );

        max-height:
            0;

        margin:
            7px auto 0;

        padding:
            0 20px;

        overflow:
            hidden;

        display:
            flex;

        flex-direction:
            column;

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

        border:
            1px solid
            rgba(
                30,
                31,
                38,
                0.06
            );

        border-radius:
            14px;

        box-shadow:
            0 20px 50px
            rgba(
                20,
                22,
                35,
                0.14
            );

        opacity:
            0;

        pointer-events:
            none;

        transform:
            translateY(-7px);

        transition:
            max-height 0.4s ease,
            padding 0.4s ease,
            opacity 0.3s ease,
            transform 0.3s ease;
    }


    .doorway-mobile-menu.open {
        max-height:
            520px;

        padding:
            14px 20px
            20px;

        opacity:
            1;

        pointer-events:
            auto;

        transform:
            translateY(0);
    }



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

    .doorway-mobile-menu > a {
        min-height:
            54px;

        padding:
            0 4px;

        display:
            flex;

        align-items:
            center;

        border-bottom:
            1px solid
            #ececf0;

        color:
            #292a30;

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

        font-size:
            15px;

        font-weight:
            500;
    }


    .doorway-mobile-menu >
    a.active {
        color:
            var(--brand-blue);
    }



    /* =====================================================
       MOBILE MENU CTA
    ===================================================== */

    .doorway-mobile-menu
    .doorway-mobile-cta {
        min-height:
            54px;

        margin-top:
            12px;

        padding:
            0 17px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

        background:
            var(--brand-blue);

        border:
            0;

        border-radius:
            6px;

        color:
            var(--white);
    }

}



/* =========================================================
   14. MOBILE
   Up to 767px
========================================================= */

@media (max-width: 767px) {

    :root {
        --mobile-padding:
            17px;
    }



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

    .doorway-header {
        top:
            10px;

        padding:
            0 var(--mobile-padding);
    }


    .doorway-header.scrolled {
        top:
            7px;
    }


    .doorway-navbar {
        min-height:
            62px;

        padding:
            0 8px
            0 13px;

        border-radius:
            11px;
    }


    .doorway-header.scrolled
    .doorway-navbar {
        min-height:
            60px;
    }



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

    .doorway-navbar-logo img {
        width:
            112px;
    }



    /* =====================================================
       RIGHT SIDE
    ===================================================== */

    .doorway-navbar-right {
        margin-left:
            auto;

        display:
            flex;

        align-items:
            center;

        gap:
            7px;
    }



    /* =====================================================
       MOBILE BROCHURE BUTTON
    ===================================================== */

    .mobile-brochure-btn {
        height:
            42px;

        padding:
            0 12px;

        display:
            inline-flex;

        align-items:
            center;

        justify-content:
            center;

        gap:
            7px;

        background:
            rgba(
                63,
                65,
                152,
                0.08
            );

        border:
            1px solid
            rgba(
                63,
                65,
                152,
                0.16
            );

        border-radius:
            7px;

        color:
            var(--brand-blue);

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

        font-size:
            10px;

        font-weight:
            700;

        white-space:
            nowrap;

        transition:
            background 0.25s ease,
            color 0.25s ease,
            border-color 0.25s ease;
    }


    .mobile-brochure-btn svg {
        width:
            15px;

        height:
            15px;

        flex-shrink:
            0;
    }


    .mobile-brochure-btn:hover {
        background:
            var(--brand-blue);

        border-color:
            var(--brand-blue);

        color:
            var(--white);
    }



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

    .doorway-menu-toggle {
        width:
            42px;

        height:
            42px;

        display:
            block;

        border-radius:
            7px;
    }


    .doorway-menu-toggle span {
        left:
            11px;

        width:
            19px;
    }



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

    .doorway-mobile-menu {
        width:
            calc(
                100% -
                (
                    var(--mobile-padding) * 2
                )
            );

        border-radius:
            11px;
    }


    .doorway-mobile-menu > a {
        font-size:
            14px;
    }

}



/* =========================================================
   15. VERY SMALL MOBILE
   Up to 390px
========================================================= */

@media (max-width: 390px) {

    .doorway-navbar-logo img {
        width:
            102px;
    }


    .mobile-brochure-btn {
        width:
            42px;

        padding:
            0;
    }


    .mobile-brochure-btn > span {
        display:
            none;
    }

}