.header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    width: 100%;
    padding: 6px 0;
    transition: .2s linear;

    /* Mobile */
    @media (max-width: 767px) {
        padding: 12px 0;
    }

    &.active {
        box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.4);
        padding: 0;
        transition: .2s linear;

        /* Mobile */
        @media (max-width: 767px) {
            padding: 6px 0;
        }
    }

    .header__container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .header__nav-container {

        /* Mobile */
        @media (max-width: 767px) {
            display: none;
        }

        .navbar__menu {

            .menu {
                position: relative;
                display: flex;
                gap: 90px;
    
                li {
    
                    a {
                        font-size: 22px;
                        font-weight: 500;
                        color: var(--color-white);
                        transition: .2s linear;
    
                        &:hover {
                            font-weight: 700;
                            transition: .2s linear;
                        }
                    }
    
                    &.link-tienda {
                        position: relative;
                        padding-right: 40px;
    
                        a {
    
                            &::after {
                                content: url('../../icons/shopping-cart-icon.svg');
                                position: absolute;
                                top: 50%;
                                right: 0px;
                                transform: translateY(-40%);
                                transition: .2s linear;
                            }
                        }
                    }
    
                    &.menu-item-has-children {
                        position: relative;
    
                        &:hover, 
                        &:focus-within {
                            & > .sub-menu {
                                opacity: 1;
                                visibility: visible;
                                transform: translateY(0);
                                pointer-events: auto;
                            }
    
                            & > a {
                                font-weight: 700;
                            }
                        }
    
                        & > a {
    
                            &::after {
                                content: url('../../icons/chevron-arrow-down-icon.svg');
                                position: absolute;
                                top: 50%;
                                right: -8px;
                                transform: translate(100%, -55%);
                                transition: .2s linear;
                            }
                        }
    
                        & > .sub-menu {
                            position: absolute;
                            top: 140%;
                            left: 0;
                            min-width: 220px;
                            padding: 10px;
                            border-radius: 12px;
                            background: #16ACE3;
                            display: flex;
                            flex-direction: column;
                            gap: 6px;
                            opacity: 0;
                            visibility: hidden;
                            transform: translateY(8px);
                            transition: opacity .15s ease, transform .15s ease, visibility .15s step-end;
                            pointer-events: none;
                            z-index: 20;
    
                            &::before {
                                content: '';
                                position: absolute;
                                top: -15px;
                                left: 0;
                                width: 100%;
                                height: 20px;
                            }
    
                            a {
                                font-size: 20px;
                                font-weight: 500;
                                color: var(--color-white);
                                padding: 10px 14px;
                                white-space: nowrap;
                                transition: .2s linear;
    
                                &:hover {
                                    color: rgba(255,255,255, .6);
                                    transition: .2s linear;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .header__nav-container-mobile {
        display: none;

        /* Mobile */
        @media (max-width: 767px) {
            display: flex;
            align-items: center;
        }

        .header__shop-cta-mobile {
            margin-right: 32px;

            img {
                width: 30px;
            }
        }

        .header__hamburger-menu-container {
            width: 50px;
            height: 50px;
            padding: 12px 8px;
            cursor: pointer;
    
            span {
                display: block;
                width: 34px;
                height: 4px;
                margin-bottom: 5px;
                position: relative;
    
                background: white;
                border-radius: 3px;
                transform: rotate(0);
                z-index: 1;
    
                transition: .5s cubic-bezier(0.77, 0.2, 0.05, 1.0);

                &:nth-child(3) {
                    margin-bottom: 0;
                }
            }
    
            &.active {

                span {
                    margin-bottom: 0;

                    &:first-child {
                        transform: rotate(45deg) translate(8%, 0);
                    }
    
                    &:nth-child(2) {
                        transform: rotate(-45deg) translate(8%, 0);
                    }
    
                    &:nth-child(3) {
                        opacity: 0;
                        transform: rotate(0deg) scale(0.2, 0.2);
                    }
                }
            }
        }

        .navbar__menu-mobile {

            .menu {
                position: absolute;
                top: 0;
                right: 0;
                width: calc(100vw + 10px);
                height: calc(100vh + 10px);
                padding: 125px 50px 50px;
                background: #FFA400;
                list-style-type: none;
                -webkit-font-smoothing: antialiased; /* To stop flickering of text in safari */
                transform: translate(100%, 0);
                transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
        
                &.active {
                    transform: translate(0, 0);
                }

                & > li {
                    margin-bottom: 24px;


                    & > a {
                        font-weight: 700 !important;
                    }
                }

                li {

                    a {
                        font-size: 22px;
                        font-weight: 500;
                        color: var(--color-white);
                        transition: .2s linear;
    
                        &:hover {
                            font-weight: 700;
                            transition: .2s linear;
                        }
                    }

                    &.link-tienda {
                        display: none;
                    }

                    &.menu-item-has-children {

                        .sub-menu { 

                            li {
                                margin-bottom: 6px;
                            };
                        }

                    }
                }
            }
        }
    }
}