@font-face {
    font-family: myFirstFont;
    src: url(https://www.apple.com/wss/fonts/SF-Pro-Display/v3/sf-pro-display_semibold.woff2);
 }



*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}


div.navbar{
    position:sticky;
    height:44px;
    top: 0;
    font-family:myFirstFont;
    background-color:rgba(22, 22, 23, .8);
    display:flex;
    justify-content: space-between;
    color:  #dadada;
    font-size: 14px;
    -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.left{
   
    width:100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 20px;
}



.center .list{
  
    display: flex;
    gap:30px;
    list-style: none;
    align-items: center;
    
}
li{
    cursor: pointer;
}
.li-apple-center{
    font-size:18px;
}

li:hover{
    color: white;
}

.li-name{
    font-size:12px;
    margin: 0 9px;
}
.li-name:hover{
    color:white
}




.right{
    height:45px;
    align-items: center;
    width:100px;
    
    display: flex;
    margin-right:20px ;
}

.right .right-list{
    display: flex;
    list-style: none;
    gap:25px;
    height:45px;
    align-items: center;
    font-size: 17px;
}


/* first hide items */

#li-apple-left{
    font-size: 25px;
    display: none;
}

/* .li-list-right{
    display: none;
} */

.li-glass-right{
    display: none;
}

.li-shopping-right{
    display: none;
}

.li-list-right{
    display: none;
    color: #dadada;
}

@media screen and (max-width:900px){
    .navbar{
        position:sticky;
        top:0;
    }

    #li-apple-left{
        display: block;
    }
    
    .li-glass-right{
        display:block;
    }
    
    .li-shopping-right{
        display:block;
    }

    .li-list-right{
        display: block;
    }
    .li-apple-center{
        display: none;
    }

    .li-glass-center{
        display: none;
    }

    .li-shop-center{
        display: none;
    }

    
   
    .center .list{    
        height:100vh;
        width: 100%;   
        flex-direction: column;
        position: fixed;
        top: 50px;
        left: 100%;
        transition:all 1s;
    
}

    .li-name{
        cursor: pointer;
        margin-top: 20px;
        margin-left: -60%;
    }
    

    .list.responsive {
        background-color: rgba(22, 22, 23, .8);
        bottom: 0%;
        left: 60%;
    }
    
}








.carousel-inner{
    z-index: -1;
}