#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 84px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
    transition: background-color .25s ease, box-shadow .25s ease;

    .navbar {
        height: 84px;
        padding: 0;
    }

    .container-fluid {
        max-width: 82%;
        height: 100%;
        display: flex;
        align-items: center;
    }

    .brand {
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;

        img {
            height: 64px;
            width: auto;
            display: block;
            transition: filter .25s ease;
        }
    }

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

        .nav-link {
            position: relative;
            color: #2d2f2c;
            font-weight: 600;
            padding: 10px 2rem;
            letter-spacing: .5px;
            transition: color .2s ease;
        }

        > .nav-item > .nav-link::after {
            content: '';
            position: absolute;
            left: 2rem;
            right: 2rem;
            bottom: 2px;
            height: 2px;
            background: currentColor;
            transform: scaleX(0);
            transform-origin: center;
            transition: transform .2s ease;
        }

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

        .nav-link:hover,
        .nav-link.active {
            color: #25cc98;
        }
    }

    .cta-segment {
        display: inline-flex;
        gap: 10px;
    }

    .cta {
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: .75rem 1.25rem;
        font-size: 16px;
        font-weight: 700;
        line-height: 1;
        color: #25cc98;
        text-decoration: none;
        white-space: nowrap;
        user-select: none;
        transition: color .2s ease, opacity .15s ease, transform .05s ease;
    }

    .cta:hover {
        opacity: .8;
    }

    .cta:active {
        transform: translateY(1px);
    }

    .cta-apply,
    .cta-whatsapp {
        padding: 8px 20px;
        border-radius: 50px;
        background: linear-gradient(135deg, #1aaf9c, #0b7265);
        box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
        color: #fff !important;
    }

    .cta-apply:hover,
    .cta-whatsapp:hover {
        opacity: .9;
    }

    .nav-item--dropdown {
        position: relative;
    }

    .nav-item--dropdown .nav-submenu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 160px;
        background: #fff;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
        border-radius: 10px;
        padding: 8px 0;
        z-index: 10;
    }

    .nav-item--dropdown:hover .nav-submenu {
        display: block;
    }

    .nav-submenu .nav-link {
        display: block;
        padding: 8px 16px;
        color: #2d2f2c;
    }

    .nav-submenu .nav-link:hover {
        color: #25cc98;
    }

    @media (max-width: 1024px) {
        .navbar-nav .nav-link {
            padding: 10px 12px;
        }

        .navbar-nav > .nav-item > .nav-link::after {
            left: 12px;
            right: 12px;
        }
    }

    @media (max-width: 1000px) {
        .navbar-nav {
            display: none;
        }
    }

    @media (max-width: 768px) {
        height: 56px;

        .navbar {
            height: 56px;
        }

        .brand img {
            height: 48px;
        }

        .navbar-collapse {
            background: #fff;
            border-top: 1px solid #eee;
            padding: 10px 12px 14px;
        }
    }

    @media (max-width: 430px) {
        .container-fluid {
            padding: 0;
        }
    }

    @media (max-width: 425px) {
        .container-fluid {
            max-width: 92%;
            flex-wrap: nowrap;
        }

        .brand img {
            width: 90%;
        }

        .cta-segment {
            width: 170px;
        }

        .cta {
            flex: 1;
            justify-content: center;
            padding: 0.65rem 1.15rem;
            font-size: 16px;
            font-weight: 600;
        }
    }
}

