@font-face {
    font-family: kufi;
    src: url(fonts/kufi.ttf);
  }@font-face {
    font-family:roboto;
    src: url(fonts/Roboto-r.ttf);
  }
  

a{text-decoration: none;color: black;}
*{font-family: kufi,roboto;}
/*-----------------------------NAVBAR--------------------------------*/

nav{display:flex;align-items:center; background-color: #101c36;}
.signBox{width:150px;border:1px solid #ffffff;color:#ffffff;padding:0 5px;border-radius: 5px;font-size: smaller;cursor: pointer;text-align: center;}
#cartCounter{color:#ffffff;right:-47px;top:15px;position:relative;cursor:pointer;text-align:center;background:#f21202;box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;font-weight:bold;border-radius:25%;padding:0 5px;font-size:10px;}

/*nav2 for mobile*/
.nav2{align-items:center; background-color: #101c36;text-align: center;padding: 10px;display: none;}
#cartCounter2{height:15px;color:#ffffff;position:relative;top:30px;left:25px;cursor:pointer;text-align:center;background:#f21202;box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;font-weight:bold;border-radius:25%;padding:0 5px;font-size:10px;}



/*------------------------------SUBNAV------------------------------------*/
.subNav{display: flex;background: #02a1fd;padding:5px;}
.subNav a{color: #FFFFFF;margin-right:20px;}



/*--------------------------- INDEX ------------------------------------*/
.mainCtn{display: flex;margin:0 auto;align-items:flex-start;}
.sideMenu{width:300px;min-height:300px;margin:20px;padding:20px;box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;}
.catListItem{display:flex;align-items:center;padding: px;}
.secondPanel{width:100%;}
.centeringSp{width:1000px;margin:0 auto;}

.itmesContainer{display: flex;justify-content:space-evenly; flex-wrap:wrap}
.itimPanel{width:250px;text-align: center;padding:5px;margin: 10px;}
#nameArea{height:70px;overflow: visible; }    
#purchesCon{display: flex;width:250px;}
#addBtn{width:15%;text-align: center; background-color: #006dc7;color:#ffffff; font-weight: bolder;padding: 10px 0 10px 0;cursor:pointer;margin-right:10px;}
#orderBtn{width:75%;text-align: center; background-color: #006dc7;color:#ffffff; font-weight: bolder;padding: 10px 0 10px 0;cursor:pointer;}  

/*--------------------------- product page -------------------------------*/

.prodCon{display:flex; flex-wrap:wrap;justify-content: center;}
.imgPrdCon img{width: 500px;height:500px;}
.infPrdCon{display: flex;flex-direction: column;justify-content:space-between;}
.ttlPrd{width:500px; padding:10px ;}
.priceCon{margin:20px ;}
.sDesc{width: 500px; padding:10px ;}
.affLink{width:50%;background:#F5F5F5;text-align: center;padding:5px;border-radius:10px;}

/* CSS Button 38 */
.button-38 {background-color: #FFFFFF;border: 0;border-radius: .5rem;box-sizing: border-box;color: #111827;font-family: "Inter var",ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size: .875rem;font-weight: 600;line-height: 1.25rem;padding: .75rem 1rem;text-align: center;text-decoration: none #D1D5DB solid;text-decoration-thickness: auto;box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);cursor: pointer;user-select: none;-webkit-user-select: none;touch-action: manipulation;}
.button-38:hover {background-color: rgb(249,250,251);}
.button-38:focus {outline: 2px solid transparent;outline-offset: 2px;}
.button-38:focus-visible {box-shadow: none;}

/*-----------------------------profile page ---------------------------------*/

.navProfil{width:100%;display: flex;margin: 20px 0;justify-content: space-around;flex-wrap:wrap;align-items:center; }
.sahbBtn{padding:10px 20px;border-radius:25px;cursor:pointer;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;}

.profileCon{display:flex; flex-wrap:wrap;justify-content: center;}

.avatarContainer{display:flex;align-items:center;flex-direction:column;margin:20px;border-radius:25px;width:300px;height:400px;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;}

.cmdContainer{margin:20px;border-radius:25px;width:800px;height:400px;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;}
.hCmdCon{background-color: #610069;color:#ffffff;padding:20px;display: flex;justify-content:space-between}

.affContainer{margin:20px;border-radius:25px;width:800px;height:500px;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;}
.hAffCon{background-color: #004777;color:#ffffff;padding:20px;display: flex;justify-content:space-between}

.wishContainer{margin:20px;border-radius:25px;width:300px;height:500px;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;}
.hWishCon{background-color: #f35900;color:#ffffff;padding:20px;display: flex;justify-content:space-between}


/*-----------------------------withdrawal page ---------------------------------*/

.withCtn{max-width:600px;margin-top: 100px;padding:20px;border-radius:25px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;}

.withdBtn {--color: #560bad;font-family: inherit; display: inline-block;width: 8em; height: 2.6em;line-height: 2.5em;margin: 20px; position: relative;overflow: hidden;border: 2px solid var(--color);transition: color .5s;z-index: 1;font-size: 17px;border-radius: 6px;font-weight: 500; color: var(--color);}
.withdBtn:before {content: "";position: absolute;z-index: -1;background: var(--color);height: 150px; width: 200px;border-radius: 50%;}
.withdBtn:hover {color: #fff;} 
.withdBtn:before {top: 100%;left: 100%;transition: all .7s;}
.withdBtn:hover:before {top: -30px;left: -30px;}
.withdBtn:active:before { background: #3a0ca3;transition: background 0s;}

/*----------------------------------AFFILIATE PAGE TETU------------------------*/
.bannerTop{width:100%;background-image: url("../media/img/social.jpg");height:500px;background-position:50% 35%;filter: blur(3px);-webkit-filter: blur(3px);}
.bannerText{position: relative;top:-275px;text-align:center;width:100%;color:#FFFFFF;}    
.signBox2{color:#FFFFFF; border:3px solid #FFFFFF;width:200px;margin-left:20px;margin-top:20px;background:#FF7104; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;}




/*---------------------------------- FOOTER -----------------------------------*/

.footerCtn{padding:20px;width:100%;background-color: #111827;height:auto;margin-top:100px;color:#FFFFFF;}
.bubleCtn{display:flex;justify-content:space-evenly;width:100%;}
.footerBox{text-align: center;}




/* Small devices (landscape phones, 576px and up)*/



@media (max-width: 1000px) { 
nav{display:none } 
.subNav{display:none}
.sideMenu{display:none} 
.imgPrdCon img{width: 100%;}
.ttlPrd{width:auto;}
.sDesc{width: auto;}
.nav2{display:block; } 
.centeringSp{width:100%;}  
.bubleCtn{display:block;}
.affLink{width:100%;}
.sahbBtn{margin-top:25px;}  
}