/* navbar */
    nav{
        padding: 0 32px;
        border-bottom: 1px solid var(--light-black);
        display: flex;
        align-items: center;
        justify-content: space-around;
        gap: 32px;
        position: relative;
    }
    
    /* logo hca */
    .logo_hca{
        flex: 0 0 100px;  
        padding: 8px 0;
    }
    
    .logo_hca img{
        object-fit: contain;
    }
    
    /* menu hca */
    nav .menu_hca{
        display: flex;
        gap: 16px;
        list-style: none;
    }
    
    nav .menu_hca li{
        padding: 5px 0;
        position: relative;
    }
    
    nav .menu_hca li.active:before, nav .menu_hca li:hover:before{
        content: '';
        position: absolute;
        bottom: 0; left: 0;
        width: 70%; height: 2px;
        background: var(--blue);
        animation: navAmimate .3s linear;
    }
    
    @keyframes navAmimate {
        0%{
            width: 33.33%;
        }
        100%{
            width: 70%;
        }
    }
    
    /* icon menu */
    .box_icon_menu{
        display: flex;
        gap: 16px;
        align-items: center;
    }
    
    .icon_menu{
        width: 35px; height: 35px;
        border-radius: 50%;
        background: var(--blue);
        padding: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .icon_menu:hover, .profile_eutd:hover{
        cursor: pointer;
        transform: translatey(-3px);
    }
    
    .box_icon_menu i{
        font-size: 20px;
        color: var(--white);
    }
    
    .profile_eutd {
        width: 35px; height: 35px;
        border-radius: 50%;
        background: var(--blue);
    }
    
    .profile_eutd img{
        width: 100%; height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }
    
    /* menu connection */
    .box_menu_connection{
        background: var(--white);
        position: absolute;
        top: 100%; right: 0;
        z-index: 1000;
        padding: 16px;
        width: max-content; height: auto;
        border-top: 1px solid var(--light-black);
        box-shadow: -5px 5px 3px var(--light-black);
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
        border-bottom-left-radius: 16px;
    }
    
    .box_menu_connection.active{
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    
    .pic_etud{
        width: 100px; height: 100px;
        border-radius: 50%;
        margin: 0 auto;
    }
    
    .pic_etud img{
        width: 100%; height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }
    
    .nom_etud{
        text-align: center;
        margin: 8px auto;
        span{
            font-weight: 600;
            color: var(--blue);
            text-transform: capitalize;
        }
        span:last-child{
            text-transform: uppercase;
        }
    }
    
    .menu_connection{
        list-style: none;
        padding: 8px 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
    }
    
    .menu_connection li a, .menu_connection li button{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 3px;
        background: var(--bluebg);
        padding: 5px;
        border-radius: 8px;
        border: none;
        cursor: pointer;
    }
    
    .menu_connection li a:hover, .menu_connection li button:hover{
        transform: translatey(-3px);
        background: var(--blue);
    }
    
    .menu_connection li a:hover, .menu_connection li button:hover{
        span, i{
            color: var(--white);
        }
    }
    
    .menu_connection li i{
        font-size: 25px;
    }
    
    .menu_connection li span{
        font-size: 14px;
        text-wrap: nowrap;
    }
    
    /* search */
    .box_search{
        position: absolute;
        top: 100%; right: 0;
        width: 320px;
        z-index: 1000;
        background: var(--blue);
        display: flex;
        padding: 16px;
        border-bottom-left-radius: 8px;
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
    
    .box_search.active{
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    .box_search input{
        width: 100%;
        border: none;
        padding: 8px 10px;
        outline: none;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
    }

    .box_search button{
        flex: 0 0 50px;
        background: var(--white);
        border: none;
        border-left: 4px solid var(--blue);
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        padding: 0;
        z-index: 1;
        cursor: pointer;
        i{
            font-size: 18px;
            color: var(--blue);
        }
    }
/* navbar */

/* responsive */
    /* navbar */
        @media screen and (max-width: 1000px) {
            nav{
                justify-content: space-between;
            }
            
            .menu_hca{
                position: absolute;
                width: 100%;
                top: 100%; left: 0;
                background: var(--white);
                z-index: 1000;
                
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 16px;
                border-top: 1px solid var(--blue);
                clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
            }
            
            .menu_hca.active{
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            }
        }
    /* navbar */
/* responsive */