.hamburger {
    display: none; // Hamburger is hidden by default

    @media screen and (max-width: 1200px) {
        display: block;
        position: relative;
        width: 40px;
        height: 24px;
        cursor: pointer;
        background: transparent;
        border: none;
        outline: none;

        .hamburger-box {
            width: 40px;
            height: 24px;
            display: inline-block;
            position: relative;
        }

        .hamburger-inner {
            background-color: #000; // Change color as needed
            position: absolute;
            width: 100%;
            height: 3px;
            border-radius: 3px;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            transition: background-color 0.1s 0.2s ease-in-out;

            &::before,
            &::after {
                content: '';
                position: absolute;
                width: 100%;
                height: 3px;
                background-color: #000; // Change color as needed
                border-radius: 3px;
                transition: top 0.3s 0.3s ease, bottom 0.3s 0.3s ease, transform 0.3s ease;
                left: 0;
            }

            &::before { top: -10px; }
            &::after { bottom: -10px; }
        }

        &.is-active {
            .hamburger-inner {
                background-color: transparent;
                transition: background-color 0.1s ease;

                &::before {
                    top: 0;
                    transform: rotate(45deg);
                    transition: top 0.1s ease, transform 0.3s 0.2s ease;
                }

                &::after {
                    bottom: 0;
                    transform: rotate(-45deg);
                    transition: bottom 0.1s ease, transform 0.3s 0.2s ease;
                }
            }
        }
    }
}
.site-branding-name {
    @media screen and (max-width: 1200px) {
        display: none !important;
    }
}

// Styles for the menu on mobile
#the-main-menu {
    @media screen and (max-width: 1200px) {
        display: none; // Hide menu initially on mobile
        opacity: 0;
        transition: opacity 0.5s ease, transform 0.5s ease;
        transform: translateY(-20px); // Start slightly above its final position
        overflow: hidden;
        position: absolute;
        width: 100%;
        left: -5px;
        top: 70px;

        .menu {
            display: block !important;
            width: 80%;
            
            li {
                padding: 15px 20px;
                width: 100%;
            }
        }
        
        &.is-active {
            background-color: white;
            display: block;
            opacity: 1;
            transform: translateY(0); // Move to final position
            // Adjust these styles as needed for your layout
            border-bottom: 1px solid;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }

        .site-branding-name {
            display: none;
        }
    }
}