.dark{
    --bg-black:#1d2023;
    --bg-nav:#3a497b;
    --color-active:#06a2d6;
    --color:#ffffff;
    --color-a:#f7f7f7;
}
.light{
    --bg-nav:#3a497b;
    --color-active:#06a2d6;
    --bg-black:#fdfdfd; 
    --color:#414141;
    --color-a:#f7f7f7;
}
body{
    background-color: var(--bg-black);
    font-family: "Comfortaa", cursive;
    transition: 0.5s;
}
nav .container{
    background-color: var(--bg-nav);
    box-shadow: 0 0 10px #070707b3;
}
.box h6,.box p{
    color:var(--color)!important;
    transition: 0.5s;
}
nav .navbar-brand h5,nav .nav-link{
    color:var(--color-a)
}
nav .navbar-brand h5{
   font-size: 25px;
}
.navbar-nav .nav-link.active, .nav-link:hover, .navbar-nav .nav-link.show{
    color:var(--color-active)!important;
    transition: 0.5s;
}
nav .navbar-brand img{
    width:52px;
}
 .cart{
     cursor: pointer;
     transition: 0.5s;
     filter: grayscale(0.7);
     position: relative;
 }
 .box{
    transition: 0.5s;
}
 .cart .box:hover{
    filter: grayscale(0);
    transform: scale(1.05);
 }
 .cart .box .date {
     transform: translateY(100%);
     transition: 0.5s;
     opacity: 0;
     position: absolute;
     top: 50%;
     left: 50%;
     background: var(--bg-black);
     color: whitesmoke!important;
     padding: 4px;
     border-radius: 8px;
     border: 1px solid black;
     font-size: 15px;
 }
 .cart .box:hover .date{
     opacity: 1;
     transform: translate(-50%,-50%);
 }
 .scroll{
     right: 15px;
     bottom: 15px;
     width: 50px;
     height: 50px;
     cursor: pointer;
     opacity: 0;
     transition: 0.5s;
     transform: translateY(30px);
 }
 .scroll.show{
    opacity: 1;
   transform: translateY(0);
 }

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #181818; 
}

::-webkit-scrollbar-thumb {
    background: #000000; 
    border-radius: 6px; 
}
.loader {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    border-top: 4px solid #FFF;
    border-right: 4px solid transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}
.loader::after {
    content: '';  
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border-left: 4px solid #FF3D00;
    border-bottom: 4px solid transparent;
    animation: rotation 0.5s linear infinite reverse;
}
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.load {
    width: 100%;
    height: 100vh;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.9);
    z-index: 9999;
}
.details {
    background-color: var(--bg-black);
    overflow: auto;
    color:var(--color);
    display:none;
}
.details a{
    color:var(--bg-nav);
    text-decoration: none;
}
    
.close{
    cursor: pointer;
    color: red;
    transition: 0.5s;
}
.close:hover{
    opacity: 0.5;
}
nav i{
    transition: 0.5s;
    cursor: pointer;
}
nav i:hover{
    opacity: 0.5;
}
section{
    width: 100px;
    height: 50px;
    
}
nav,.cart{
    /* display: none; */
}
.spans{
    width:35px;
    position: relative;
    height: 20px;
}
.spans span{
    position: absolute;
    width: 100%;
    height: 2px;
    background-color:#fff;
    transition: 0.5s;
}
.spans span:nth-child(1){
    top: 0;
}
.spans span:nth-child(2){
    top: 50%;
}
.spans span:nth-child(3){
    top: 100%;
}

.spans span:nth-child(1).active{
    background-color:red;
    top: 50%;
    transform: rotate(-45deg);
}
.spans span:nth-child(2).active{
    background-color:red;
    opacity: 0;  
}
.spans span:nth-child(3).active{
    background-color:red;
    transform: rotate(45deg);
    top: 50%;
}
.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: none;
}