/* Header container for logo and menu toggle */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /*z-index: 1100;*/
    z-index:1100;
    display: none;
}
@media screen and (max-width: 1200px) {
    .header-container {
        padding: 10px;
        z-index: 1100;
    }
    }


    @media screen and (max-width: 768px) {
        .logo img {
            height: 30px; /* Adjust size as needed */
        }
    }

    /* Menu toggle (hamburger icon) */
.menu-toggle {
    /*position: fixed;*/
    position:absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    z-index: 1050; /* Ensure it's above the menu */
}

        .menu-toggle span {
            display: block;
            width: 30px;
            height: 3px;
            background-color: black;
            margin-bottom: 5px;
            z-index:1050;
        }

    /* Glass-effect side menu */
.side-menu {
    position: fixed;
    right: -300px;
    top: 0;
    width: 300px;
    height: 100vh;
    background: rgba(255, 255, 255, 0.2);
    /*background: rgba(41, 73, 155, 0.2);*/
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: right 0.5s ease;
    z-index: 1000; /* Ensure the menu stays above other content */
}

        .side-menu.active {
            right: 0; /* Slide-in from right */
        }

        .side-menu ul {
            list-style: none;
            padding: 20px;
            margin: 0;
        }

            .side-menu ul li {
                margin-bottom: 20px;
            }

                .side-menu ul li a {
                    text-decoration: none;
                    font-weight: bold;
                    color: black;
                    display: block;
                    padding: 10px;
                    transition: color 0.3s ease;
                }

                    .side-menu ul li a:hover {
                        color: #007bff;
                    }


    /* Sub-menu hidden initially */
    .sub-menu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease;
        list-style: none;
        padding-left: 20px;
    }

    /*On hover, reveal the submenu */
    .side-menu ul li:hover .sub-menu {
        max-height: 500px; /*Adjust height based on submenu content */
    }



    .logo {
        height: 50px;
        background: url('../img/logo.png') no-repeat;
        background-size: contain;
        
    }

    @media screen and (max-width: 768px) {
        .logo {
            height: 40px;
            background: url('../img/logo-mobile.png') no-repeat;
            background-size: contain;
            
            /*z-index: 99;*/
        }
    }

    @media screen and (max-width: 1200px) {
        .logo {
            
            height: 50px;
            background: url('../img/logo-mobile.png') no-repeat;
            background-size: contain;
            
            /*z-index: 99;*/
        }
    }


.site-header-right {
    position: fixed;
    right: 100px;
    top: 33px;
    
    /*z-index: 99;*/
}

    @media screen and (max-width: 768px) {
        .site-header-right {
            position: fixed;
            right: 80px;
            top: 33px;
            transform: translateY(-35%);
            
            /*z-index: 99;*/
        }
    }



    


    /*
.logo {
    position: fixed;
    top: 30px;
    left: 60px;
    cursor: pointer;
    z-index: 1100;
    display: none;
}

@media screen and (max-width: 768px) {
}
*/