header{ 
    /*width:100%; */
    flex-grow:0; 
    flex-shrink:0; 
    display:flex;  
    height:70px; 
    background:#000; 
    justify-content:stretch; 
    position:relative; 
}
header .top{  
    flex-grow:1; 
    flex-shrink:1; 
    height:70px; 
    display:flex; 
    justify-content:stretch; 
    gap:15px; 
    padding:0px 30px; 
}
header .logo{ 
    font-size:26px; 
    font-weight:bold; 
    color:#fff; 
    text-decoration:none; 
    display:flex;   
}
header .top__search-container{
    display:flex; 
    gap:15px; 
    flex-grow:1; 
    flex-shrink:1; 
    justify-content:center !important; 
    align-items:center; 
}  
div.input{ 
    width: clamp(300px, 55%, 1200px);
    height:50px; 
    border: 2px solid black;
    border-radius: 25px; 
    background:#fff; 
    position:relative; 
}
header .top__search-container input{ 
    width:100%; 
    height:100%;
    display:flex; 
    justify-content:start; 
    position:relative; 
    background:transparent; 
    padding: 0 12px; 
    border:0; 
}
header .search_icon{
    height:100%; 
    aspect-ratio:1; 
    background:transparent; 
    border:0; 
    cursor:pointer; 
    display:none; 
    position:absolute; 
    top:0; 
    right:0; 
} 
header .search_icon svg{
    width:45%; 
    fill:#000; 
}
button.search-btn{ 
    height:35px;  
    display:flex; 
    align-items:center; 
    padding:0px 20px;
    background:#0056b3;
    color:#fff;
    font-size:16px;
    border:none;
    border-radius:10px;
    cursor:pointer;
    transition: background-color 0.3s ease; 
} 
button.search-btn:hover{
    background:#004494;
}
header .top__nav{ 
    display:flex; 
    justify-content:end; 
    gap:20px;  
}
header .top__nav a{
    color: #fff;
    text-decoration: none;
    font-size: 21px;
}
header .top__nav a:hover{
    text-decoration: underline;
    color: #ff9358;
}
#show_burger{ 
    display:none; 
}
#burger_toggle{ 
    width:35px; 
    aspect-ratio:1; 
    display:none; 
    flex-flow:column nowrap; 
    justify-content:start; align-items:stretch; 
    gap:7px; 
    background:transparent; 
    cursor:pointer; 
}
#burger_toggle i{
    display:block; 
    height:7px; 
    background:#fff; 
}

@media ( max-width:1000px){ 
    button.search-btn{
        display:none; 
    }
    header .search_icon{ 
        display:flex; 
    }
    header .top__nav{ 
        width:100%; 
        height:0px;
        overflow:hidden; 
        flex-flow:column nowrap; 
        justify-content:start; 
        align-items:center;
        gap:20px;  
        position:absolute; 
        top:100%; 
        left:0; 
        right:0; 
        z-index:100; 
        background:#000; 
        padding:0px; 
        transition:all 0.3s ease; 
    }
    header .top__nav a{
        display:flex; 
        height:0px; 
        overflow:hidden; 
        color: #fff;
        text-decoration: none;
        font-size: 21px;
        transition:all 0.3s ease; 
    }
    header .top__nav a:hover{
        text-decoration: underline;
        color: #ff9358;
    }
    #show_burger:checked ~ .top__nav{ 
        padding:20px 0px; 
        height:auto; 
    }
    #show_burger:checked ~ .top__nav a{ 
        height:30px; 
    }
    #burger_toggle{
        display:flex; 
    }
}

@media (max-width:580px){
    header .input{ 
        display:none; 
    }
}