@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

html {
    scroll-behavior: smooth;
  }

* {
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
}

main{
    max-width: 1140px;
    margin: 0px;
    height: fit-content;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    margin-top: 10px;
    flex-direction: column;
    align-items: center;
    margin: auto;
}

.addbal{
    color:white;
    background: #7a6ff9;
    width: 100%;
    font-size: 16px;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    margin-bottom: 20px;
    transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out;

}

.addbal:hover{
    box-shadow: inset 0px -50px #fcfcfc;
    color: #7a6ff9;

}

.welcome{
    width: 90%;
    padding: 0px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #191919;
    color: white;
    border-radius: 10px;
    border-top: 2px solid white;
    margin: 20px 0px;
    flex-direction: column;
}

.info{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.welcome h3{
    font-weight: 300;
}

.aio{
    width: 100%;
    float: left;
    height: 100vh;
    display: block;
}

body{
    margin: 0px;
    background: #181818;
    background-image: url(https://cdn.discordapp.com/attachments/974827046435967050/1022980793439617054/Sprinkle_6.svg)
}

.side-nav{
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    background: #08080b;
    padding-right: 0px;
    margin-bottom: 20px;
}

.username{
    color: #ffffff;
    margin: 25px;
    font-size: 28px;
    text-shadow: 0 0 3px #fffffff2;
    width: 100%;
    text-align: center;
    font-weight: 600;
    background: #7a6ff9;
    text-transform: uppercase;
    box-shadow: -3px 0px 10px #736ff6;
    letter-spacing: 2px;
}

a{
    text-decoration: none;
}


.nav-item{
    font-size: 17px;
    padding-left: 20px;
    font-weight: 300;
    color: #b5b5b5;
    padding: 15px;
}

.nav-item:hover{
    color: #ffffff;
}

.nav-active{
    color: #ffffff;
    font-weight: 700;
}

table {
    background-color: #111113;
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    min-width: calc( 100vw - 300px);
  }
  
  table td, table th {
    display: table-cell;
    color: white;
    padding: 8px;
  }
  
  table tr:nth-child(even){background-color: #08080b;}
  
  table tr:hover {background-color: #181818;}
  
  table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #521e91 ;
    color: white;
  }

  .btn-prods{
    background: #521e91 ;
    padding: 10px 40px;
    border-radius: 3px;
    color: white;
    font-size: 14px;
    transition: all 300ms ease-in-out;
    font-weight: 600;
    width: 100%;
    border: none;
  }

  .btn-prods:hover{
    box-shadow: inset 0px -50px white;
    color: #8d2626;
  }

  .prod .img:hover button{
    opacity: 1;
    }

  .btn-action{
    background: #521e91 ;
    padding: 3px 10px;
    border-radius: 10px;
    color: white;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
  }
  .btn-action:hover{
    box-shadow: inset 0px -50px white;
    color: #8d2626;
  }
  .nav-img-cont{
    display: none;
  }

  .nav-img-cont img{
    width: 200px;
  }

  .nav-title{
    margin: 0px;
    color: #ffffff;
    font-weight: 700;
    text-align: left;
    text-transform: none;
    padding: 15px;
    padding-left: 20px;
    font-size: 14px;

    }

.nav-2{
    width: 90%;
    height: fit-content;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0px;
    box-sizing: border-box;
    margin: 20px 0px;
    margin: auto;
}
.nav-2 h2{
    font-weight: 600;
    color: white;
    font-size: 30px;
    text-transform: capitalize;
}

.account{
    display: flex;
    justify-content: center;
    align-items: center;
}

.account-img{
    width: 45px;
    background: url(https://cdn.dribbble.com/users/643255/screenshots/4507341/peshku_33.png);
    height: 45px;
    background-size: 200%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    box-shadow: 0 0 20px #bdbdbd7d;
    margin: 0px 10px;
}

.account-info{
    display: flex;
    justify-content: center;
    flex-direction: column;
    color: white;
    font-weight: 900;
    letter-spacing: 0.5;
}

.balance{
    width: 300px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 15px;
    background: white;
    border-radius: 30px;
    color: black;
    font-weight: 700;

}

.icon{
    padding: 10px;
    background: #eeebff;
    border-radius: 50%;
    color: #521e91 ;
    font-size: 14px;
    transition: all 300ms ease-in-out;
}

.icon:hover{
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}
.card{
    width: 90%;
    padding: 25px;
    background: #08080b;
    color: #ffffff;
    border-radius: 10px;
    margin: 20px 0px;
    box-sizing: border-box;

}

.nav-item i{
    margin-right: 10px;
}

.warn{
    width: fit-content;
    text-align: center;
    margin: auto;
    padding: 10px 40px;
    box-sizing: border-box;
    background: #fd900ad6;
    border: 2px solid #f1901b;
    border-radius: 6px;
    color: black;
}
.prod .prod-title{
    width: 100%;
    background: #111112;
    color: white;
    padding: 20px;
    text-align: center;
    padding: 0px;
    display: block;
    text-transform: uppercase;
}

.prod-title small{
    color: #656565;
}

.prod .prod-price{
    width: 100%;
    background: #111112;
    color: white;
    padding: 20px;
    text-align: center;
    padding: 0px;
    font-size: 14px;
    color: #656565;
}

.prod{
    display: inline-flex;
    justify-content: space-between;
    flex-direction: column;
    border-radius: 15px;
    padding-bottom: 20px;
    margin: 15px;
    width: 250px;
    transition: scale 400ms ease-in-out, height 400ms ease-in-out, width 400ms ease-in-out;
    position: relative;

    overflow: hidden;
    padding: 0px;
    background: #111112;

}
.prod .img{
    width: 100%;
    margin: 0px;
    height: 110px;
    border-radius: 15px 15px 0px 0px;
    background-position: center  !important;
    background-size: cover  !important;
    background-repeat: no-repeat  !important;
    transition: all 300ms ease-in-out;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


.prod .img h4{
color: white;
text-decoration: none;
width: fit-content;
margin: 0px;
opacity: 0;
transition: all 300ms ease-in-out;
font-size: 22px;
}

.prod .img small{
    color: rgb(172, 172, 172);
    text-decoration: none;
    width: fit-content;
    margin: 0px;
    opacity: 0;
    transition: all 300ms ease-in-out;
}

.prod .img:hover small{
    opacity: 1;
}

.prod .title h3{
    color: white;
    margin: 10px;
    text-align: center;
    padding: 0px 30px;
}

.prod .dsc p{
    color: white;
    margin: 0px;
    text-align: left;
    font-size: 14px;
    padding: 0px 30px;
}

.prod .btns{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 0px 30px;
    box-sizing: border-box;
}
.tags{
    display: block;
    align-items: flex-start;
    margin-top: 10px;
    transition: all 300ms ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    margin: 10px;
}

.tags p{
    display: inline-block;
    font-size: 12px;
    padding: 5px;
    border-radius: 4px;
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    background: #181818cf;
    margin: 3px;
}

.navbar-top{
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
}

.navbar-top:first-child{
    justify-content: flex-start;
}

.navbar-top:last-child{
    justify-content: flex-end;
}

.navbar-top:not(:first-child):not(:last-child){
    justify-content: center;
}


.btn-def{
    background: #521e91 ;
    padding: 10px 40px;
    border-radius: 3px;
    color: white;
    font-size: 17px;
    transition: all 300ms ease-in-out;
    border: none;
    font-weight: 600;
  }
  .btn-def:hover{
    box-shadow: inset 0px -50px white;
    color: #521e91 ;
  }

  .btn-sml{
    background: #521e91 ;
    padding: 0px 20px;
    border-radius: 3px;
    color: white;
    font-size: 14px;
    transition: all 300ms ease-in-out;
    border: none;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
  }

  .btn-sml:hover{
    box-shadow: inset 0px -50px white;
    color: #8d2626;
  }

  .btn-lighter{
    background: #ebe8ff;
    padding: 5px 10px;
    border-radius: 5px;
    color: #521e91 ;
    font-size: 15px;
    font-weight: 300;
    transition: all 300ms ease-in-out;
    border: none;
  }
  .btn-lighter:hover{
    box-shadow: inset 0px -50px #521e91 ;
    color: white;
  }

.download-href{
    font-weight: 700;
    color: #521e91 ;
    background: none;
    border: none;
}
.download-href:hover{
    font-weight: 700;
    color: white;
}

.mod-header{
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    text-align: left;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.model-all{
    flex-direction: column;
    background: #08080b;
    border-radius: 15px;
    padding-bottom: 20px;
    display: inline-flex;
    margin: 20px;
    width: 80%;
    padding: 20px;
}

.model-all .img{
    width: 120px !important;
    min-width: 120px !important;
    border-radius: 50% !important;
    margin: 0px !important;
    height: 120px;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

.mod-text .dsc p{
    color: white;
    margin: 0px;
    text-align: left;
    font-size: 14px;
    padding: 0px 30px;
    padding: 0px 30px;
}

.mod-text .title h3{
    color: white;
    margin: 10px;
    padding: 0px 30px;
    text-align: left;
    margin-left: 0px;
    padding: 0px 30px;
}



.download{
    padding: 10px 40px;
    border-radius: 3px;
    color: #557aea;
    font-size: 17px;
    transition: all 300ms ease-in-out;
    font-weight: 600;
    border: 1px solid #ffffff5c;
    background: #08080b;
}

.download-box{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 30px;
    box-sizing: border-box;
    background: #2f2f31;
    height: 80px;
    margin: 0px;
    color: white;

}

.file i{
    padding: 10px;
    border-radius: 8px;
    color: white;
    width: 17px;
    height: 17px;
}
.file .text{
    padding: 10px;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
}

.green{
    background: #10b510;
}

.orange{
    background: #f56e23;
}

.black{
    background: #000000;
}
.pur{
    background: #872ee8;
}

.views{
    display: inline-flex;
    font-size: 18px;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    padding: 5px 15px;
    background: #521e91 ;
    border-radius: 10px;
}

.views i{
    margin-right: 7px;
}

.dw-line{
    margin: 0px;
    border: none;
    border-top: 1px solid #d0d0d0;
}

.his-img{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.his-img img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 20px;
}

.prods-cont{
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}


.download:hover{
    background: royalblue;
    color: white;
}

form{
    width: 80%;
    margin: auto;
    text-align: left;
}
.form-group{
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin: 10px;
}
.form-group label {
    font-size: 15px;
    margin: 6px;
    color: #ffffff;
}
.form-group input {
    color: white;
    font-size: 16px;
    padding: 10px 20px;
    border: none;
    background: #181818;
    width: 300px;
}
.form-group textarea {
    color: white;
    font-size: 16px;
    padding: 10px 20px;
    border: none;
    background: #181818;
    width: 620px;
    height: 100px;
}

.form-group select{
    color: white;
    font-size: 16px;
    padding: 10px 20px;
    border: none;
    background: #181818;;
    width: 620px;
}



.switch-dark{
    padding: 10px;
    background: #08080b;
    border-radius: 50%;
    color: white;
    box-shadow: 0 0 2px white;
}

/* width */
::-webkit-scrollbar {
    width: 2px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    border-radius: 6px;
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #521e91 ; 
    border-radius: 10px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #521e91 ; 
  }



  .welcome-card{
    width: 90%;
    background: #08080b;
    color: #ffffff;
    border-radius: 10px;
    margin: 20px 0px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    padding: 40px;
    margin-top: -20px;
}

.welcome-card h3{
    font-size: 50px;
    margin: 5px;
    display: inline;
    z-index: 2;
    position: relative;
}

.welcome-card p {
    font-size: 20px;
    margin: 5px;
    display: inline;
    z-index: 2;
    position: relative;
}

.item-box{
    width: 400px;
    height: 600px;
    background: #521e91 ;
    transform: rotate(45deg);
    position: absolute;
    right: 0px;
    top: -151px;
    z-index: 1;
}





.info-cont{
    width: 90%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    height: 180px;
    overflow: hidden;
}

.info-box{
    background: #08080b;
    width: 285px;
    height: 150px;
    border-radius: 12px;
    color: white;
    padding: 25px;
    box-sizing: border-box;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    margin-block: 12px;
}
.info-box .texty h3{
    font-size: 18px
    ;color: #b5b5b5;
    margin: 5px;
    display: inline-block;
}

.info-box .texty h1{
    margin: 0px;
    font-size: 50px;
    display: inline-block;
}

.info-box .icony{
    display: block;
    float: right;
    font-size: 50px;
}




@media (max-width: 801px){
    .prod{
        width: 320px !important;
    }

    .m-hide, .nav-title{
        display: none !important;
    }
    .nav-active, .nav-item:hover{
        color: #ffffff;
        border: none;
        background: #521e91 ;
        border-radius: 12px;
    }
    .nav-img-cont{
        display: flex !important;
        justify-content: center;
        align-items: center;
    }
    .nav-img-cont img{
        width: 120px !important;
    }
    .nav-item i {
        margin-right: 0px !important;
    }
    
    .nav-2, main{
        flex-direction: column;
        padding: 0px;
        text-align: center;
    }
    .cat-btn{
        margin: 8px !important;
    }
    input, select, textarea{
        width: 100% !important;
    }
    .pop{
    left: 9px !important;
    bottom: 100px !important;
    }

    .filter-box{
        width: 100%;
    }

    .search-box{
        border: 1px solid #656565;
    }


    .prod .img h4 {
        opacity: 1;
    }

    .prod .img small {
        opacity: 1;
    }

    .prod .img .tags {
        transform: scale(1);
    }
    
    form{
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .card{
        padding-right: 20px;
    }

    .mod-header{
        flex-direction: column;
        padding: 0px;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
    }

    .model-all{
        margin: 0px;
        padding: 50px 0px;
        width: 90%;
    }
    .show-model-cont{
        width: 100% !important;
    }
    .download-box{
        padding: 10px;
    }
    .download{
        width: 130px;
        padding: 5px;
    }

    .item-box{
        height: 1399px;
    }

    .header{
        margin: 20px !important;
        width: auto !important;
    }

    .header-head .line{
        width: 20px;
     }

    .header-block{
        display: none;
    }

    .header-line{
        display: none;
    }
    .nav-cont, .navbar-top{
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .side-nav{
        height: fit-content;
        padding-bottom: 20px;
    }

    .search-row{
        width: 90%  !important;
        flex-direction: column !important;
    }

    .search-box{
        margin: 0px !important;
    }
    .filter-input{
        margin-block: 10px !important;
    }

    .filter-box .btn-sml{
        width: 100% !important;
        margin: 0px !important;
    }

    .sub-nav{
        flex-wrap: wrap;
    }

}
.search-input{
    padding: 10px;
    background: #08080b;
    border: none;
    color: white;
    margin: 0px;
    outline: none;
    border-radius: 6px;
    width: 100%;
}

.search-input-2{
    padding: 10px;
    background: #111117;
    border: none;
    color: white;
    margin: 0px;
    outline: none;
    border-radius: 6px;
    width: 100%;
    border: 1px solid #656565;
}


.search-input-2:disabled{
    background: #000000;
    color: #656565;
    border: 1px solid #656565;
}

.hidden_input{
    background: none;
    border: none;
    color: white;;
}

.filter-input{
    width: 200px;
    padding: 10px;
    background: #08080b;
    border: none;
    color: white;
    margin: 0px;
    outline: none;
    border-radius: 6px;
}

.search-box{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-right: 20px;
    border-right: 1px solid #656565;
}
.search-box i{
    position: absolute;
    right: 0px;
    top: 50%;
    font-size: 10px;
    transform: translate(-50%, -50%);
    margin-right: 6px;
    color: white;
}

.search-box-2{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
}
.search-box-2 i{
    position: absolute;
    right: 0px;
    top: 50%;
    font-size: 10px;
    transform: translate(-50%, -50%);
    margin-right: 6px;
    color: white;
}

.filter-box{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.filter-box i{
    position: absolute;
    right: 0px;
    top: 50%;
    font-size: 10px;
    transform: translate(-50%, -50%);
    margin-right: 6px;
    color: white;
}


.radio{
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin-right: 10px;
    color: white;
    justify-content: center;
    margin: 25px;
    align-items: flex-start;
    font-size: 20px;
}

.radio__input{
    display: none;
}

.radio__radio{
    border: 2px solid #5d5d5d6b;
    border-radius: 50%;
    margin-right: 10px;
    width: 1.35rem;
    height: 1.35rem;
    box-sizing: border-box;
    padding: 3px;
}

.radio__radio::after{
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background: #5ee65e;
    border-radius: 50%;
    transform: scale(0);
    transition: all 150ms ease-in-out;
}

.radio__input:checked + .radio__radio::after{

    transform: scale(1);

}

.selections{
    width: 80%;
    margin: auto;
}

.selections h2{
    color: white;
    margin-top: 0px;
    font-weight: 400;
}

.backtotop{
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #08080b;
    font-size: 22px;
    color: white;
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 2;
}

.pop{
    width: 300px;
    border-radius: 10px;
    background: #08080b;
    font-size: 22px;
    color: white;
    position: fixed;
    left: 50px;
    top: 100px;
    padding: 30px;
    z-index: 2;
}
 .pop p{
    display: inline-block;
    margin: 5px;
    background: #0c0915;
    padding: 5px 9px;
    border-radius: 8px;
 }


 .pop .close{
    width: 20px;
    height: 20px;
    background: #0c0915;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: white;
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px;
    cursor: pointer;
    font-size: 15px;
 }



 .header{
    width: 100%;
    margin: auto;
    border-radius: 10px;
    margin-top: 30px;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 50px 20px;
    position: relative;
    overflow: hidden;
 }


 .header-head .text{
    color: #c7c7c7;
    text-transform: uppercase;
    font-weight: 600;
    z-index: 2;
 }

 .header-head .line{
    width: 100px;
    height: 2px;
    background: #c7c7c7;
    margin-inline: 10px;
 }

 .header-head{
    display: flex;
    justify-content: center;
    align-items: center;
 }


 .header-sub{
    margin: 10px;
    font-size: 50px;
    font-weight: 700;
    color: white;
    z-index: 2;
 }

 .header-text{
    margin: 10px;
    color: #c7c7c7;
    text-transform: uppercase;
    font-weight: 600;
    z-index: 2;
 }

.header-img{
    background: url('../assets/imgs/banner.png');
    width: 100%;
    height: 240px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    z-index: -1;
}

.header-line{
    height: 500px;
    position: absolute;
    top: -60;
    width: 15px;
    background: #181818;
    border-radius: 20px;
    rotate: -24deg;
    z-index: 1;
}

.header-block{
    width: 900px;
    height: 100px;
    position: absolute;
    top: 194px;
    left: -50px;
    background: #181818;
    border-radius: 50%;
    z-index: 1;
}


.input-cont{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    flex-direction: column;
    margin: 10px;
}

.auth-form{
    background: #08080b;
    border-radius: 9px;
    width: 370px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.auth-form h2{
    
    margin-top: 0;
    color: white;
    font-weight: 500;
    margin: 0;

}

.auth-form label {
    color: white;
    font-size: 12px;
    margin-bottom: 3px;
}


.auth-form input {
    width: 100%;
    padding: 8px;
    border-radius: 8px;
    background: #181818;
    color: white;
    border: none;
    margin-block: 5px;
}

.auth-form p{
    color: #bfbfbf;
}

.auth-form .form-btns{
    width: 100%;
    padding: 12px;
    margin: 10px;
}

.auth-form p{
    font-size: 13px;
}



/**=====================
     15. Alert CSS start
==========================**/
.notify-alert .close {
    background: unset;
    border: none;
    font-size: 25px;
}

.alert {
    border-radius: 0.15rem;
    padding: 15px;
    font-size: 12px;
    width: 100%;
    margin-block: 5px;
}

.alert svg {
    vertical-align: middle;
}

.alert .progress {
    margin-top: 15px;
}

.alert [data-notify='icon'] {
    margin-right: 10px;
    line-height: 20px;
    position: absolute;
}

.alert [data-notify='message'] {
    display: inline-block;
    width: 100%;
}

.alert i {
    margin-right: 5px;
    font-size: 16px;
}

.alert p {
    margin-bottom: 0;
}

.alert .close {
    opacity: 1;
}

.alert .close span {
    font-size: 24px;
    font-weight: 400;
    display: inline-block;
    border-radius: 3px;
    text-shadow: none;
    padding: 0 5px;
    padding-right: 0;
}

.alert-dismissible .close {
    padding: 10px 1.25rem;
    top: 4px;
    padding-right: 13px;
    opacity: 0.5;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.alert-dismissible .close:hover {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    opacity: 1;
    color: inherit;
}

.card-body button:focus {
    outline: none;
}

.card-body .alert:last-child {
    margin-bottom: 0;
}

.card-body .alert svg {
    width: 14px;
    height: 14px;
    margin-right: 4px;
    position: absolute;
    top: 18px;
}

.card-body .alert svg~p {
    padding-left: 20px;
}

strong {
    display: inline-block;
}

strong~p {
    display: inline-block;
}

.alert-primary {
    background-color: rgba(36, 105, 92, 0.8);
    border-color: rgba(36, 105, 92, 0.9);
    color: #ffffff;
}

.alert-primary .progress {
    height: 5px;
    background-color: #236559;
    border-radius: 0;
}

.alert-primary .progress-bar {
    background-color: #aae2d7;
}

.alert-primary .btn-close {
    -webkit-filter: brightness(1) invert(1);
    filter: brightness(1) invert(1);
}

.alert-primary .alert-link {
    color: #24695c;
}

.alert-primary hr {
    border-top-color: #24695c;
}

.alert-primary.dark {
    background-color: #24695c;
    border-color: #24695c;
    color: #fafafa;
}

.alert-primary.dark .alert-link {
    color: #ffffff;
}

.alert-primary.outline, .alert-primary.outline-2x {
    background-color: transparent;
    border-color: #24695c;
    color: #24695c;
}

.alert-primary.outline .btn-close, .alert-primary.outline-2x .btn-close {
    -webkit-filter: unset;
    filter: unset;
}

.alert-primary.inverse {
    background-color: transparent;
    padding: 13px 20px 13px 65px;
    border-color: #24695c;
    color: #242934;
}

.alert-primary.inverse:before {
    top: 16px;
    content: "";
    position: absolute;
    left: 54px;
    width: 0;
    height: 0;
    border-left: 7px solid #24695c;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

.alert-primary.inverse i {
    padding: 17px 20px;
    display: inline-block;
    background-color: #24695c;
    color: #ffffff;
    border-radius: 3px 0 0 3px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}

.alert-primary.inverse .btn-close {
    -webkit-filter: unset;
    filter: unset;
    top: -3px;
}

.alert-secondary {
    background-color: rgba(186, 137, 93, 0.8);
    border-color: rgba(186, 137, 93, 0.9);
    color: #ffffff;
}

.alert-secondary .progress {
    height: 5px;
    background-color: #b88659;
    border-radius: 0;
}

.alert-secondary .progress-bar {
    background-color: white;
}

.alert-secondary .btn-close {
    -webkit-filter: brightness(1) invert(1);
    filter: brightness(1) invert(1);
}

.alert-secondary .alert-link {
    color: #ba895d;
}

.alert-secondary hr {
    border-top-color: #ba895d;
}

.alert-secondary.dark {
    background-color: #ba895d;
    border-color: #ba895d;
    color: #fafafa;
}

.alert-secondary.dark .alert-link {
    color: #ffffff;
}

.alert-secondary.outline, .alert-secondary.outline-2x {
    background-color: transparent;
    border-color: #ba895d;
    color: #ba895d;
}

.alert-secondary.outline .btn-close, .alert-secondary.outline-2x .btn-close {
    -webkit-filter: unset;
    filter: unset;
}

.alert-secondary.inverse {
    background-color: transparent;
    padding: 13px 20px 13px 65px;
    border-color: #ba895d;
    color: #242934;
}

.alert-secondary.inverse:before {
    top: 16px;
    content: "";
    position: absolute;
    left: 54px;
    width: 0;
    height: 0;
    border-left: 7px solid #ba895d;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

.alert-secondary.inverse i {
    padding: 17px 20px;
    display: inline-block;
    background-color: #ba895d;
    color: #ffffff;
    border-radius: 3px 0 0 3px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}

.alert-secondary.inverse .btn-close {
    -webkit-filter: unset;
    filter: unset;
    top: -3px;
}

.alert-success {
    background-color: rgba(27, 76, 67, 0.8);
    border-color: rgba(27, 76, 67, 0.9);
    color: #ffffff;
}

.alert-success .progress {
    height: 5px;
    background-color: #1a4840;
    border-radius: 0;
}

.alert-success .progress-bar {
    background-color: #8fd7ca;
}

.alert-success .btn-close {
    -webkit-filter: brightness(1) invert(1);
    filter: brightness(1) invert(1);
}

.alert-success .alert-link {
    color: #1b4c43;
}

.alert-success hr {
    border-top-color: #1b4c43;
}

.alert-success.dark {
    background-color: #1b4c43;
    border-color: #1b4c43;
    color: #fafafa;
}

.alert-success.dark .alert-link {
    color: #ffffff;
}

.alert-success.outline, .alert-success.outline-2x {
    background-color: transparent;
    border-color: #1b4c43;
    color: #1b4c43;
}

.alert-success.outline .btn-close, .alert-success.outline-2x .btn-close {
    -webkit-filter: unset;
    filter: unset;
}

.alert-success.inverse {
    background-color: transparent;
    padding: 13px 20px 13px 65px;
    border-color: #1b4c43;
    color: #242934;
}

.alert-success.inverse:before {
    top: 16px;
    content: "";
    position: absolute;
    left: 54px;
    width: 0;
    height: 0;
    border-left: 7px solid #1b4c43;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

.alert-success.inverse i {
    padding: 17px 20px;
    display: inline-block;
    background-color: #1b4c43;
    color: #ffffff;
    border-radius: 3px 0 0 3px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}

.alert-success.inverse .btn-close {
    -webkit-filter: unset;
    filter: unset;
    top: -3px;
}

.alert-danger {
    background-color: rgba(210, 45, 61, 0.8);
    border-color: rgba(210, 45, 61, 0.9);
    color: #ffffff;
}

.alert-danger .progress {
    height: 5px;
    background-color: #ce2c3c;
    border-radius: 0;
}

.alert-danger .progress-bar {
    background-color: white;
}

.alert-danger .btn-close {
    -webkit-filter: brightness(1) invert(1);
    filter: brightness(1) invert(1);
}

.alert-danger .alert-link {
    color: #d22d3d;
}

.alert-danger hr {
    border-top-color: #d22d3d;
}

.alert-danger.dark {
    background-color: #d22d3d;
    border-color: #d22d3d;
    color: #fafafa;
}

.alert-danger.dark .alert-link {
    color: #ffffff;
}

.alert-danger.outline, .alert-danger.outline-2x {
    background-color: transparent;
    border-color: #d22d3d;
    color: #d22d3d;
}

.alert-danger.outline .btn-close, .alert-danger.outline-2x .btn-close {
    -webkit-filter: unset;
    filter: unset;
}

.alert-danger.inverse {
    background-color: transparent;
    padding: 13px 20px 13px 65px;
    border-color: #d22d3d;
    color: #242934;
}

.alert-danger.inverse:before {
    top: 16px;
    content: "";
    position: absolute;
    left: 54px;
    width: 0;
    height: 0;
    border-left: 7px solid #d22d3d;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

.alert-danger.inverse i {
    padding: 17px 20px;
    display: inline-block;
    background-color: #d22d3d;
    color: #ffffff;
    border-radius: 3px 0 0 3px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}

.alert-danger.inverse .btn-close {
    -webkit-filter: unset;
    filter: unset;
    top: -3px;
}

.alert-warning {
    background-color: rgba(226, 198, 54, 0.8);
    border-color: rgba(226, 198, 54, 0.9);
    color: #ffffff;
}

.alert-warning .progress {
    height: 5px;
    background-color: #e1c532;
    border-radius: 0;
}

.alert-warning .progress-bar {
    background-color: white;
}

.alert-warning .btn-close {
    -webkit-filter: brightness(1) invert(1);
    filter: brightness(1) invert(1);
}

.alert-warning .alert-link {
    color: #e2c636;
}

.alert-warning hr {
    border-top-color: #e2c636;
}

.alert-warning.dark {
    background-color: #e2c636;
    border-color: #e2c636;
    color: #fafafa;
}

.alert-warning.dark .alert-link {
    color: #ffffff;
}

.alert-warning.outline, .alert-warning.outline-2x {
    background-color: transparent;
    border-color: #e2c636;
    color: #e2c636;
}

.alert-warning.outline .btn-close, .alert-warning.outline-2x .btn-close {
    -webkit-filter: unset;
    filter: unset;
}

.alert-warning.inverse {
    background-color: transparent;
    padding: 13px 20px 13px 65px;
    border-color: #e2c636;
    color: #242934;
}

.alert-warning.inverse:before {
    top: 16px;
    content: "";
    position: absolute;
    left: 54px;
    width: 0;
    height: 0;
    border-left: 7px solid #e2c636;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

.alert-warning.inverse i {
    padding: 17px 20px;
    display: inline-block;
    background-color: #e2c636;
    color: #ffffff;
    border-radius: 3px 0 0 3px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}

.alert-warning.inverse .btn-close {
    -webkit-filter: unset;
    filter: unset;
    top: -3px;
}

.alert-info {
    background-color: rgba(113, 113, 113, 0.8);
    border-color: rgba(113, 113, 113, 0.9);
    color: #ffffff;
}

.alert-info .progress {
    height: 5px;
    background-color: #6e6e6e;
    border-radius: 0;
}

.alert-info .progress-bar {
    background-color: #f1f1f1;
}

.alert-info .btn-close {
    -webkit-filter: brightness(1) invert(1);
    filter: brightness(1) invert(1);
}

.alert-info .alert-link {
    color: #717171;
}

.alert-info hr {
    border-top-color: #717171;
}

.alert-info.dark {
    background-color: #717171;
    border-color: #717171;
    color: #fafafa;
}

.alert-info.dark .alert-link {
    color: #ffffff;
}

.alert-info.outline, .alert-info.outline-2x {
    background-color: transparent;
    border-color: #717171;
    color: #717171;
}

.alert-info.outline .btn-close, .alert-info.outline-2x .btn-close {
    -webkit-filter: unset;
    filter: unset;
}

.alert-info.inverse {
    background-color: transparent;
    padding: 13px 20px 13px 65px;
    border-color: #717171;
    color: #242934;
}

.alert-info.inverse:before {
    top: 16px;
    content: "";
    position: absolute;
    left: 54px;
    width: 0;
    height: 0;
    border-left: 7px solid #717171;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

.alert-info.inverse i {
    padding: 17px 20px;
    display: inline-block;
    background-color: #717171;
    color: #ffffff;
    border-radius: 3px 0 0 3px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}

.alert-info.inverse .btn-close {
    -webkit-filter: unset;
    filter: unset;
    top: -3px;
}

.alert-light {
    background-color: rgba(230, 237, 239, 0.8);
    border-color: rgba(230, 237, 239, 0.9);
    color: #ffffff;
    color: #2c323f;
    background-color: #f4f4f4;
}

.alert-light .progress {
    height: 5px;
    background-color: #e3ebed;
    border-radius: 0;
}

.alert-light .progress-bar {
    background-color: white;
}

.alert-light .btn-close {
    -webkit-filter: brightness(1) invert(1);
    filter: brightness(1) invert(1);
}

.alert-light .alert-link {
    color: #e6edef;
    color: #2c323f;
}

.alert-light .btn-close {
    -webkit-filter: unset;
    filter: unset;
}

.alert-light hr {
    border-top-color: #e6edef;
}

.alert-light.dark {
    background-color: #e6edef;
    border-color: #e6edef;
    color: #fafafa;
    color: #2c323f;
}

.alert-light.dark .alert-link {
    color: #ffffff;
    color: #2c323f;
}

.alert-light.outline, .alert-light.outline-2x {
    background-color: transparent;
    border-color: #e6edef;
    color: #e6edef;
    color: #2c323f;
}

.alert-light.outline .btn-close, .alert-light.outline-2x .btn-close {
    -webkit-filter: unset;
    filter: unset;
}

.alert-light.inverse {
    background-color: transparent;
    padding: 13px 20px 13px 65px;
    border-color: #e6edef;
    color: #242934;
}

.alert-light.inverse:before {
    top: 16px;
    content: "";
    position: absolute;
    left: 54px;
    width: 0;
    height: 0;
    border-left: 7px solid #e6edef;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

.alert-light.inverse i {
    padding: 17px 20px;
    display: inline-block;
    background-color: #e6edef;
    color: #ffffff;
    border-radius: 3px 0 0 3px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}

.alert-light.inverse .btn-close {
    -webkit-filter: unset;
    filter: unset;
    top: -3px;
}

.alert-dark {
    background-color: rgba(44, 50, 63, 0.8);
    border-color: rgba(44, 50, 63, 0.9);
    color: #ffffff;
}

.alert-dark .progress {
    height: 5px;
    background-color: #2a303c;
    border-radius: 0;
}

.alert-dark .progress-bar {
    background-color: #a8b0c2;
}

.alert-dark .btn-close {
    -webkit-filter: brightness(1) invert(1);
    filter: brightness(1) invert(1);
}

.alert-dark .alert-link {
    color: #2c323f;
}

.alert-dark hr {
    border-top-color: #2c323f;
}

.alert-dark.dark {
    background-color: #2c323f;
    border-color: #2c323f;
    color: #fafafa;
}

.alert-dark.dark .alert-link {
    color: #ffffff;
}

.alert-dark.outline, .alert-dark.outline-2x {
    background-color: transparent;
    border-color: #2c323f;
    color: #2c323f;
}

.alert-dark.outline .btn-close, .alert-dark.outline-2x .btn-close {
    -webkit-filter: unset;
    filter: unset;
}

.alert-dark.inverse {
    background-color: transparent;
    padding: 13px 20px 13px 65px;
    border-color: #2c323f;
    color: #242934;
}

.alert-dark.inverse:before {
    top: 16px;
    content: "";
    position: absolute;
    left: 54px;
    width: 0;
    height: 0;
    border-left: 7px solid #2c323f;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

.alert-dark.inverse i {
    padding: 17px 20px;
    display: inline-block;
    background-color: #2c323f;
    color: #ffffff;
    border-radius: 3px 0 0 3px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}

.alert-dark.inverse .btn-close {
    -webkit-filter: unset;
    filter: unset;
    top: -3px;
}

.dismiss-text .alert .btn-close {
    background: unset;
    opacity: 1;
    top: -6px;
    right: 40px;
}

.dismiss-text .alert .btn-close span {
    display: inline-block;
    border-radius: 3px;
    text-shadow: none;
    padding: 0 5px;
}

.outline-2x {
    border-width: 2px;
    padding: 11px 1.25rem;
}
.nav-cont{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-inline: 30px;
}

.nav-item.nav-link.btn-sml{
    margin-left: 10px;
}

.nav-icon{
    height: 40px;
}

.search-row{
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: revert;
    margin-bottom: 20px;
    padding: 10px 20px;
    border: 1.5px solid #521e91;
    border-radius: 10px;
    width: 94%;
    background: #08080b;
    z-index: 10;
    margin-top: -40px;
}

select {
    -webkit-appearance: none;
    appearance: none;
  }


.cat-btn{
padding: 9px 20px;
background: #191329;
border: 1px solid #656565;
color: white;
margin: 0px;
border-radius: 6px;
outline: none;
font-size: 15px;
margin-right: 10px;
transition: all 300ms ease-in-out;
}

.cat-btn:hover{
background: #521e91 ;
border: 1px solid white;
}
.active{
background: #521e91 ;
border: 1px solid white;
}


.prod .footer{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.prod-info{
    width: 100%;
    background: #111112;
    color: white;
    padding: 20px;
    text-align: center;
    padding-top: 10px;
}
.prod-info h4{
    
    margin: 0px;
    font-size: 18px;

}

.prod-info small{
    font-size: 12px;
    color: #656565;
}

.prod-info p{
    font-size: 14px;
    color: #656565;
}

.sub-nav{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    border-radius: 11px;
    overflow: hidden;
    margin-bottom: 20px;
}

.sub-nav .nav-item{
    padding: 10px 20px;
    transition: all 300ms ease-in-out;
    background: #08080b;
}

.sub-nav .nav-item:hover, .sub-nav .nav-item.active-subnav{
    background: black;
    color: white;
    text-shadow: 0px 0px 5px white;
}
.container{
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}


.btn-primary {
    color: #fff;
    background-color: #521e91 !important;
    border-color: #521e91 !important;
}

.btn-primary:hover {
    color: #fff;
    background-color: #b889ee !important;
    border-color: #b889ee !important;
}

.modal-content{
    background: #08080b !important;
    color: white !important;
    border: 1px solid #521e91 !important;
    border-radius: 10px !important;
}

.modal-header {
    border-bottom: 1px solid #9757ff !important;
}

.modal-footer
{
    border-top: 1px solid #9757ff !important;
}

.cat-div{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    margin-bottom: 10px;
    font-weight: 200;
    color: white;
    padding-inline: 20px;
    text-transform: uppercase;
}

.cat-div hr{
    width: 200px;
    border: 1px solid #ffffff;
    margin: 0px;
}

.cat-div span{
    margin-inline: 20px;
}

.sec-wrap{
    width: 100%;
}

.badge{
    font-weight: 300 !important;
    padding: 5px 8px !important;
}

.badge-warning, .bg-warning{
    background: #86710c !important;
    color: white !important;
}

.prod::after{
    opacity: 0.1;
    content: '';
    top: 0;
    transform: translateX(100%);
    width: 100%;
    height: 110px;
    position: absolute;
    z-index: 1;
    animation: slide 4s infinite 8s, breathing 6s infinite;
    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(128,186,232,0) 99%, rgba(125,185,232,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.8)), color-stop(99%,rgba(128,186,232,0)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* IE10+ */
	background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 */
    
}



/* animation */

@keyframes slide {
	0% {transform:translateX(-100%);}
    45% {transform:translateX(100%);}
    55% {transform:translateX(100%);}
    100% {transform:translateX(-100%);}
}

@keyframes breathing {
    0% {transform: scale(1.1);}
    50% {transform: scale(1.17);}
    100% {transform: scale(1.1);}
}

.prod{
    overflow: hidden;
}

.prod .img{
    animation: breathing 6s infinite;
}

.cart{
    height: 40px;
    width: 40px;
    background: #521e91;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    text-decoration: none;
    font-size: 12px;

}

.cart:hover i{
    color: #d83853 !important;
    
}

.cart:hover i{
    color: #d83853 !important;
    
}

.cart:hover{
    text-decoration: none;
    background: #ffffff;
    
}