/* 
    1. make the borders even on in the mobile 

*/

a{
    text-decoration: none;
}

/* ------------------------------------ */

a.zoom-hover-effect {
    text-decoration: none;
    color: inherit;
}

.zoom-hover-effect {
    display: inline-block;
    padding-bottom: 0.25rem; /* defines the space between text and underline */
    position: relative;
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;

    transition: color 0.10s ease-out, transform 0.1s ease-in;

}

.zoom-hover-effect:hover {
    -ms-transform: scale(1.15) translateZ(0); /* IE 9 */
    -webkit-transform: scale(1.15) translateZ(0); /* Safari 3-8 */
    transform: scale(1.15) translateZ(0);

    color: var(--clr-red);
}

.menu-active .zoom-hover-effect:hover{
     /* color: black; */
}

/* ------------------------------------ */
.navBar {
    position: fixed;

    display: flex;
    flex-direction: row;
    
    Justify-content: space-between;

    top : 0;
    left: 0;
    right: 0;

    padding: 0.75rem 1rem;

    font-size: var(--dim-navbar-fontsize);
    /* height: 20rem; */

    /* Old browsers */
    /* background: #ff0000;  */
    background: white; 
    /* background: -moz-linear-gradient(left,     #ffdbdb 0, #ff0000 90vw); FF3.6-15 */
    /* background: -webkit-linear-gradient(left,  #ffdbdb 0, #ff0000 90vw); Chrome10-25,Safari5.1-6 */
    /* background: linear-gradient(to right,      #ffdbdb 0, #ff0000 90vw); W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdbdb', endColorstr='#ff0000',GradientType = 1 ); /* IE6-9 */

    z-index: 1;
}

.navBar::after{
    content: "";

    position: absolute;
    
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%);

    width: var(--dim-page-width-large);

    border: calc(var(--dim-line-thickness)*0.6) solid var(--clr-line);
    background-color: var(--clr-line);
    /* box-shadow: 0px 0px 10px hsl(0, 100%, 64%); */
    border-radius: 2em;
}

.navBar .icon{
    font-family: Georgia, 'Times New Roman', Times, serif; /* Manrope*/

    
    color: black;

    font-size: 2.0em;
    margin: auto 0;
    margin-left: 0.2em;

    /* padding: 0.2em 0.3em;  come back to */
}

.navBar .icon .icon-box{
    display: flex;
    padding: 0.5rem 0;
}

.navBar .icon .icon-box img{
    margin: auto 0;

    width:  1.1em;
    height: 1.1em;


    

    /* width:100%; */
    /* height:100%;     */
    /* border: solid 0.1px white; */
    background-color: white;
    /* box-shadow: 10px -10px  rgba(0,0,0,0.6);
    -moz-box-shadow: 10px -10px  rgba(0,0,0,0.6);
    -webkit-box-shadow: 10px -10px  rgba(0,0,0,0.6);
    -o-box-shadow: 10px -10px  rgba(0,0,0,0.6); */
    border-radius:100px;
}

.navBar .icon .icon-box span{
    position: relative;
    top: 0.1em;
    font-size: 0.9em;


    /* font-weight: light; */

    color: black;

    margin: auto 0;
}

.navBar .icon:hover{
    cursor: pointer;
}


/* ------------------------------------ */

.navBar ul{ 
    display: flex;
    flex-direction: row;

    margin: 0 0;
    padding: 0;
}

.navBar ul li {
    display: flex;
    align-items: center;

    cursor: pointer;
}

.navBar ul li a{
    color: black;


    font-family: Open Sans;
    font-size: 1.35em;
    
    /* font-weight: 100; */
    /* border: #0000 2px dashed; */
    margin: 0 0.5em;

    /* border: 3px solid green;  */
    /* border-left: 2px solid black; */
    /* background-color: #DFDFDF; */
    /* margin: auto 0; */
    /* margin-right: 0.75rem; */
}

nav ul .not-show-class {
    display: none !important;
}

.link-button:hover {
    /* background: #b80000; */
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-decoration: none;
}

.link-button a:hover{
    /* NOTE: this logic has been moved to class zoom-hover-effect*/

    /* color: red;
    transition: color 0.075s ease-out; 
    text-decoration: underline; */
}

nav .menu-icon{
    display: none;
}
 

.link-button:active {
	position: relative;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}


#multi-language-button {
    background-color: rgb(150, 150, 150); 
    color: black; 
    border-color: black;
}


/*  ------------ only for small view ------------- */

@media screen and (max-device-width: 300px), (max-width: 600px) {
    .navBar ul{
        display: none;
    }

    .menu-icon{
        position: relative;
        display: block !important;
        /* text-align: center; */
        /* height: 2rem; */

        margin: auto 0;
        margin-right: 1em;
        
        /* border: 1px #000000 dashed; */
    }

    .menu-icon:hover{
        cursor: pointer;

    }

    .navBar.menu-active .menu-icon{
        transition: transform 0.2s linear;
        transform: rotate(90deg);
    }

    .menu-active #top-bar,#mid-bar,#low-bar{
        /* all at 0.2s works great */
        /* transition: transform 0.2s linear , opacity 0.2s linear 0.3s, width 0.2s linear 0.4s ; */



        transform-origin: top;
    }

    .navBar.menu-active #top-bar {
        position: absolute;
        transform:translate(2%, 47%) rotate(45deg) scale(1.0, 1);
    }
    .navBar.menu-active #low-bar{
        position: absolute;
        transform:translate(-3%, 47%) rotate(-45deg) scale(1.0, 1);
    }
    .navBar.menu-active #mid-bar {
        width: 0;
        opacity: 0;        
    } 

    /* ------------------------------------ */

    #top-bar,#mid-bar,#low-bar{
        /* transition: transform 0.2s linear, opacity 0.2s linear 0.2s, width 0.2s linear 0.2s; */
        transition: transform 0.2s linear, opacity 0.2s linear, width 0.2s linear;

    }

    .menu-active{
        flex-wrap: wrap;
        /* align-items: center; */

        width: 100%;
        height: 100%;
        
        flex-direction: column-reverse;
        justify-content: start;

        background: rgb(214, 214, 214);
        /* background: red; */


    }

    .menu-active .icon{
        /* order: 2; */
        display: none;
    }

    .menu-active .menu-icon{
        display: block;
        order: 2;
        src: url('../Assets/NavBar/menu-close-icon.svg') !important; 

        margin: 1em !important;
        margin-right: 1.1em !important;
        margin-left: auto !important;

        width: 2em;
        height: 2em;
    }

    .menu-active ul{
        display: block;   
    }

    .menu-active ul .link-button{        
        font-size: 2.3em;

        height: fit-content;
        
        line-height: 1.8em;

        padding: 0;

        color: black;

        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;

        box-shadow: 0px 0px 0px 0px #000000;
        -webkit-box-shadow: 0px 0px 0px 0px #000000;
        -moz-box-shadow: 0px 0px 0px 0px #000000;

        border-bottom: 1px solid black;

        border-left: none;
        border-right: none;
        
        background: rgb(214, 214, 214);
    }

    .menu-active ul li a{
        width: 100%;
        margin: 0;
        padding: 0 0.5em;

        /* border-top: 1px solid black; */
    }

    .menu-active .zoom-hover-effect:hover{
        -ms-transform: scale(1) translateZ(0); /* IE 9 */
        -webkit-transform: scale(1) translateZ(0); /* Safari 3-8 */
        transform: scale(1) translateZ(0);

        color: var(--clr-red);

    }

    /* .menu-active ul li:nth-child(1) a{ */
        /* border-top: 1px solid black; */
    /* } */

    .menu-active ul .link-button p{
        justify-content: center;
    }

    .menu-active ul .link-button:hover{
        background: rgb(194, 194, 194);
    } 
    
}