:root{
    --newsoftcolorpurple : #2B115A;
    --newsoftcolorred : #F01A22;
    --newsoftcolorgray : #545454;
    --newsoftcolordarkgray : #ABABAB;
    --newsoftcolordarkergray : #777676;    
    --white : #fff;
    --checked : #E8AF59;
    --kufam : 'Kufam', sans-serif;
    --cairo : 'Cairo', sans-serif;
    --nunito : 'Nunito', sans-serif;    
}
*{
    padding: 0;
    margin: 0;
}
.desktop-navbar{
    background-color: var(--white);
    direction: rtl;
}
.desktop-navbar-container{
    padding: 1.5vh 1vh 0;
    border-bottom: 1px solid #ececec;
}
.image-desktop-navbar-col{
    text-align: right;
}
#logo img{
    width: 200px;
    height: 75px;
}
.menu-desktop-navbar{
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu-desktop-navbar li{
    display: inline-block;
    padding-top: 2.5vh;
}
.menu-desktop-navbar li .nav-link{
    padding: 1vh;
    text-decoration: none;
    color: var(--newsoftcolorpurple);
    font-family: var(--cairo);
    font-weight: 400;
    font-size: 14px;
    margin: auto 5px auto 0;
}

.mobile-navigation{
    display: none;
}
#track{
    border: 1.5px solid var(--newsoftcolorpurple);
    border-radius: 5px;
    transition: all 0.4s;
}
#track:hover{
    border: 1.5px solid var(--newsoftcolorpurple);
    border-radius: 5px;
    background-color: var(--newsoftcolorpurple);
    color: var(--white);
}
@media only screen and (max-width : 650px){
    .desktop-navbar{
        display: none;
    }
    .mobile-navigation{
        font-family: var(--cairo);
        display: flex;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 50;
        text-align: right;
        width: 100%;
        background-color: var(--white);
        padding: 0.5vh 0;
    }
    .mobile-nav-image{
        width : 200px;
        margin-left: auto;
        margin-right: 10px;
    } 
    #menuToggle
    {
        display: block;
        position: relative;
        top: 25px;
        left: 25px;        
        z-index: 1;        
        -webkit-user-select: none;
        user-select: none;
    }
    #menuToggle a
    {
        text-decoration: none;
        color: #232323;    
        transition: color 0.3s ease;
    }
    #menuToggle input
    {
        display: block;
        width: 40px;
        height: 32px;
        border: 3px solid red;
        position: absolute;
        top: -7px;
        left: -5px;    
        cursor: pointer;    
        opacity: 0; /* hide this */
        z-index: 2; /* and place it over the hamburger */    
        -webkit-touch-callout: none;
    }
    /*
    * Just a quick hamburger
    */
    #menuToggle span
    {
        display: block;
        width: 33px;
        height: 4px;
        margin-bottom: 5px;
        position: relative;    
        background: var(--newsoftcolorpurple);
        border-radius: 3px;    
        z-index: 1;    
        transform-origin: 4px 0px;    
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                    background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                    opacity 0.55s ease;
    }   
    #menuToggle span:first-child
    {
        transform-origin: 0% 0%;
    }
    #menuToggle span:nth-last-child(2)
    {
        transform-origin: 0% 100%;
    }
    /* 
    * Transform all the slices of hamburger
    * into a crossmark.
    */
    #menuToggle input:checked ~ span
    {
        opacity: 1;
        transform: rotate(45deg) translate(-2px, -1px);
        background: var(--newsoftcolorpurple);
    }
    /*
    * But let's hide the middle one.
    */
    #menuToggle input:checked ~ span:nth-last-child(3)
    {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2);
    }
    /*
    * Ohyeah and the last one should go the other direction
    */
    #menuToggle input:checked ~ span:nth-last-child(2)
    {
        transform: rotate(-45deg) translate(0, -1px);
    }
    /*
    * Make this absolute positioned
    * at the top left of the screen
    */
    #menu
    {
        position: absolute;
        width: 300px;
        height: 1000px;
        margin: -100px 0 0 -50px;
        padding: 50px;
        padding-top: 125px;    
        background: #efefef;
        list-style-type: none;
        -webkit-font-smoothing: antialiased;
        /* to stop flickering of text in safari */    
        transform-origin: 0% 0%;
        transform: translate(-100%, 0);    
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }
    #menu li
    {
        padding: 10px 0;
        font-size: 22px;
        margin: 10px auto;
    }
    /*
    * And let's slide it in from the left
    */
    #menuToggle input:checked ~ ul
    {
        transform: none;
    }

  
}