@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@700&display=swap');
/* ------------ */
#hamburger-icon
{
    top: 0;
    width: 100%;
    padding: 10px;
    margin: 0;
    display: none;
    direction: rtl;
    cursor: pointer;
}
#hamburger-icon .hamburger-line
{
    margin-bottom: 10px;
}
#hamburger-icon .hamburger-line div
{
    width: 35px;
    height: 3px;
    background-color: #74143A;
    margin: 6px 0;
    transition: 0.4s;
}
.open .bar1
{
    -webkit-transform: rotate(-45deg) translate(-6px, 6px);
    transform: rotate(-45deg) translate(-6px, 6px);
}
.open .bar2
{
    opacity: 0;
}
.open .bar3
{
    -webkit-transform: rotate(45deg) translate(-6px, -8px);
    transform: rotate(45deg) translate(-6px, -8px);
}
.open .mobile-menu
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.mobile-menu
{
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    height: calc(100vh - 50px);
    width: 100%;
}
#yellowLine
{
    display: none;
}
/* -- -- -- */
@media only screen and (max-width: 991px)
{
    header
    {
        display: none;
    }
    #hamburger-icon
    {
        display: flex;
        flex-direction: row;
        position: fixed;
        background-color: #fff;
    }
    .mobile-menu
    {
        background: #74143A;
    }
    .mobile-menu li
    {
        width: 100%;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: #fff 0.5px solid;
    }
    .mobile-menu li:nth-child(1)
    {
        border-top: #fff 0.5px solid;
    }
    .mobile-menu li:hover
    {
        background: #fff;
    }
    .mobile-menu li a
    {
        color: #fff;
        text-decoration: none;
        font-family: 'Cairo', sans-serif;
    }
    .mobile-menu li:hover a
    {
        color: #327D4C;
        background: #fff;
    }
    /* ------------ */
    #hamburger-icon .logo
    {
        width: 100%;
        display: flex;
        height: 50px;
        margin: 0;
        align-items: center;
        justify-content: center;
        background: #fff;
    }
    #hamburger-icon .logo img
    {
        width: 190px;
        height: 50px;
    }
    /* ------------- */
    #yellowLine
    {
        top: 0;
        height: 30px;
        display: block;
        margin-top: 50px;
        padding: 0;
        position: fixed;
        width: 100%;
    }
}