* {
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
html{
    height: 100%;
}
body{
    height: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
}

a{
    text-decoration: none;
    color: white;
}

a:hover{
    color: yellow;
}

#home{
    position: fixed;
    top: .5%;
    height: 8%;
    width: 12%;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    cursor: pointer;
}

#home div{
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100%;
 width: 100%;
 gap: 6%;
}

#home a{
    text-decoration: none;
}

#home b{
    transition: .6s; font-size: 1.7dvw; color: blue; letter-spacing: 1px; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

#home img{
    width: 30%;
    height: 90%;
    border-radius: 100%;
}


#slideLeft {
    position: fixed; left: -65%; height: 70%; width: 55%; background-color: rgba(255, 255, 255, 0.178); backdrop-filter: blur(20px); z-index: 7; transition: .2s; overflow: auto; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: 1fr 1fr; border-radius: 10px;
    gap: 3%; border: 2px solid white;
}

#liveNavBar{
    display: initial;
    position: fixed; 
    top: 0;
    right: 1%; 
    outline: 1px solid white; 
    width: 30%;
    height: 5.5%;
    display: flex; justify-content: center; align-items: center; gap: 3%;
    color: white;  
    z-index: 3; 
    backdrop-filter: blur(5px);
}

#liveNavBar .lNB{
    padding: .3em;
    cursor: pointer;
}
#liveNavBar .lNB:hover{
 background-color: white;
 color: black;
 transition: .3s;
}

#HelpDeskPopUp{
    background-color: white; color: black; position: fixed; top: -5%; right: 2%; padding: .3em; transition: .4s; z-index: 7;
}
#HelpDeskPopUp span{
  color: green;  font-weight: bold; letter-spacing: 1px;
}

.sidebar{
   border-radius: 15% 85% 99% 1% / 0% 47% 53% 100%;
   background-color: rgba( 0, 0, 0, 0.4);
   height: 40%;
   width: 8%;
   position: absolute;
   left: 0;
   display: grid;
   place-items: center;
   z-index: 1;
   backdrop-filter: blur(15px);
}

.sidebar:hover{
    background-color: rgba(0, 0, 0, 0.7);
}

.sidebar button {
    height: 5dvw;
    width: 5dvw;
    border-radius: 100%;
    z-index: 2;
    transition: .2s;
    border-right: 1px solid yellow;
    background-color: black;
    position: relative;
}

.sidebar button img{
    height: 100%;
    width: 100%;
    border-radius: 100%;
    object-fit: contain;
}

.sidebar #side1{
    position: relative;
    right: 7%;
    width: 5dvw;
    height: 5dvw;
}

.sidebar #side1 span{
    position: absolute; top: -5%; right: -15%; background-color: red; color: white; border-radius: 50%; height: 35%; width: 35%; padding: .1em; display: grid; place-items: center;
}


.sidebar button:hover {
    cursor: pointer;
    transition: 1s;
}


.cat {
    position: absolute;
    top: 8%;
    height: 60%;
    width: 50%;
    border-radius: 20px;
    background-color: white;
}

.cat span p{
    position: absolute;
    top: 10%;
    height: fit-content;
    width: max-content;
    color: black;
    font-size: 1dvw;
    font-weight: 800;
    opacity: 0;
    text-align: center;
    backdrop-filter: blur(3px);
    background-color: rgb(238, 255, 0);
}

.cat span:hover p{
opacity: 1;
}

.cat-Box{
    position: relative; top: 10%; left: 20%; height: 70%; width: 15dvw; display: grid; place-items: center;
}

/* .cat-Box a{
    display: grid; place-items: center;
} */

.cat-Box .cat-title{
    color: black;
    background-color: white;
    font-size: 1.27dvw;
    font-weight: bold;
    position: absolute;
    bottom: 1%;
    padding: .5em;
    text-align: center;
    border-radius: 20px;
    width: fit-content; 
}


.little-cat{
    position: absolute; height: 31%; width: 24%; background-color: white; opacity: .2; z-index: 2;
}

.little-cat img{
    height: 100%; width: 100%;
}

.little-cat p{
 color: black; background-color: yellow; position: absolute; top: 10%; opacity: 0; font-weight: bold; font-size: 1rem;
}

.little-cat2{
    top: 1%;
    right: 1%;
}

.little-cat3{
    right: 1%;
}

.little-cat4{
    right: 1%;
    bottom: 1%;
}

.little-cat5{
    top: 1%;
    left: 1%;
}
.little-cat6{
    position: absolute;
    top: 60%;
    left: 100%;
    height: 3rem;
    width: 3rem;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 100%;
    opacity: .2;
}

.little-cat:hover{
    background-color: rgba(255, 255, 255, .7);
    cursor: pointer ;
}
.little-cat:hover p{
    opacity: 1;
}

.cat img {
    height: 100%;
    width: 100%;
    border-radius: 20px;
    object-fit: cover;
}


.cat-Box:hover{
    z-index: 5;
    transform: scale(1.07);
    background-color: rgba(0, 0, 0, .9);
}
.cat-Box:hover .cat{
    opacity: .5;
}
.cat-Box:hover .tac{
    opacity: 1;
}
.cat-Box:hover .little-cat{
    opacity: 1; cursor: pointer; z-index: 2;  
}
.cat-Box:hover .cat-title{
    background-color: unset; color: white;
}

.navSection {
    position: relative;
    top: 0;
    left: 7rem;
    height: 5rem;
    width: 5rem;
    background: linear-gradient( to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6), rgba( 0, 0, 0, 0.6));
    border-radius: 50%;
    margin: 2rem;
}

#categories {
    position: relative;
    top: 0;
    left: 7rem;
    border: 2px solid yellow;
    height: 5rem;
    width: 5rem;
    background: linear-gradient( to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6), rgba( 0, 0, 0, 0.6));
    border-radius: 20%;
    margin: 2rem;
}

#categories:hover {
    cursor: pointer;
}

#Cart{
    position: fixed; bottom: -90%; left: 7%; height: 70%; width: 35%; background-color: rgba(0, 0, 0, 0.7); z-index: 7; color: white; transition: .6s; display: flex; justify-content: center; align-items: center; flex-direction: column; border-top: 4px solid white; backdrop-filter: blur(10px);
}

#Cart #CartWatermark{
    height: 90%; width: 90%; position: absolute; opacity: .3;
}

#CartWatermark img{
    height: 100%; width: 100%;
}

#Cart #cartItems{
    height: 80%; width: 80%; position: relative; top: -2%; overflow: auto;
}
#cartItems .cart_item{
    height: 30%; width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.589); display: flex; justify-content: center; align-items: center; gap: 3%; position: relative; margin-bottom: 10px; backdrop-filter: blur(50px);
}
.cart_item img{
    height: 90%; width: 30%; position: absolute; left: 7%;
}
.cart_item .inCartUnit{
    background-color: red; color: white; padding: .3em .7em; position: relative; left: -2%;
}
.cart_item .Product_Name{
 color: yellow; letter-spacing: 3px; font-weight: bold; position: absolute; right: 4%; width: 40%; text-align: center;
}

#Cart #clearCart{
    position: absolute; bottom: 2%; left: 2%; background-color: red; color: white; padding: .5em; font-size: 1.1rem; display: none;
}
#Cart #Checkout{
    position: absolute; bottom: 2%; background-color: white; color: black; padding: .5em; font-size: 1.3rem; display: none;
}
#Cart #NumOfCart{
 position: absolute; bottom: 2%; right: 2%; font-size: 1.5rem; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.navSection:hover {
    cursor: pointer;
}

.container {
    background-image: url("../../Backgrounds/fave2.avif");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100%;
    width: 100%;
    display: flex; justify-content: center; align-items: center; gap: 5%;
    overflow-x: auto;
    overflow-y: hidden;
}

#cover {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.2);
    height: 100vh;
    width: 100vw;
    backdrop-filter: blur(5px);
    display: none;
    z-index: 6;
}

#desktopSearch{
  background-color: rgba(255, 255, 255, 0.6); border-radius: 30px 30px 0 0;  position: fixed; bottom: -30%; padding: 1em; height: 20%; width: 50%; display: flex; justify-content: center; align-items: center; backdrop-filter: blur(5px); transition: .4s; z-index: 6; outline: 2px solid white;
}

#desktopSearch form{
   height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; gap: 5%;
}
#desktopSearch form input{
    background-color: rgb(4, 4, 112); color: white; padding: .9em;  width: 70%; font-size: 1.3rem;
}

#desktopSearch form button{
    background-color: rgb(255, 0, 0); color: white; padding: .9em; font-size: 1.3rem;
}
nav {
    height: 3rem;
    width: 3rem;
    border-radius: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 2;
    position: fixed;
    left: 2%;
    transition: .2s;
}

nav:hover {
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 20px rgba(255, 255, 255, 0.8), 0 0 30px rgba(255, 255, 255, 0.7), 0 0 40px rgba(255, 255, 255, 0.6), 0 0 50px rgba(255, 255, 255, 0.5), 0 0 60px rgba(255, 255, 255, 0.4);
    transition: 1s;
    border-radius: 20%;
}

#electronicsCatalogue{
    height: 82%; flex: 0 0 75%; background-color: rgba(0, 0, 0, 0.8); position: relative; top: 4%; display: flex; flex-wrap: wrap; overflow: auto; justify-content: center; align-items: center; gap: 5%;  padding: .9em; z-index: 2; 
}

#electronicsCatalogue .electronicsVariety{
    height: 45%; flex: 0 0 25%; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: white; color: black;
}

.electronicsVariety div{
    height: 80%; width: 70%; position: relative; top: -5%;
}


#stationeryDisplayContainer{
    height: 85%; width: 100%; background-color: rgba(0, 0, 0, 0.548); position: absolute; top: 10%; left: 10%; display: flex; justify-content: center; align-items: center; z-index: 1; transition: 1s; opacity: 0;
}
#stationeryDisplayContainer #stationeryDisplaySidebar{
    height: 100%; width: 20%;
}
#stationeryDisplaySidebar #SDS-buttons{
    height: 85%; width: 100%; overflow: auto; display: grid; place-items: center;
}
#SDS-buttons::-webkit-scrollbar{
    display: none;
}
#SDS-buttons .SDSbuttonsContainer{
    height: fit-content; width: 90%;
}
.SDSbuttonsContainer .electronicsHeader{
    width: 100%; font-size: 1.1dvw; position: relative; display: flex; justify-content: center; align-items: center; margin-bottom: .5em; padding: .3em; color: red; letter-spacing: 5px;
}

#stationeryDisplay{
    height: 90%; width: 100%; position: relative;
}
#stationeryDisplay h2{
  color: yellow; width: fit-content; position: relative; top: -5%; left: 3%; padding: .3em .7em; letter-spacing: 5px;
}
#stationeryDisplay #stationeryDisplayShowcase{
 width: 100%; height: 87%; overflow: auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1%; position: relative; top: -5.5%;
}
#stationeryDisplayShowcase .stationeryProduct{
    height: 60%; width: 24%; position: relative; overflow: hidden; cursor: pointer;
}
.stationeryProduct::after{
    content: "Hover for Info"; position: absolute; top: 0; left: 0; font-size: 1dvw; color: red;
    padding: .1em; transition: .3s;
}
.stationeryProduct:hover::after{
    opacity: 0; transition-delay: .6s;
}
.stationeryProduct .stationeryImage{
    height: 80%; width: 100%;
}
.stationeryProduct .stationeryDescription{
    background-color: white; height: 20%; width: 100%; color: black; font-size: 1.1dvw; text-align: center; font-family: sans-serif; 
}
.stationeryProduct .stationeryDescriptionSpecs{
    position: absolute; bottom: -100%; height: 60%; width: 100%; background-color: rgba(0, 0, 0, 0.9); backdrop-filter: blur(3px);  transition: .3s; overflow: auto;
}
.stationeryDescriptionSpecs p{
 color: white; height: 50%; font-size: 1.3dvw; font-family: monospace; line-height: 1.5em;
}
.stationeryProduct:hover .stationeryDescriptionSpecs{
    bottom: 0; transition-delay: .6s;
}
.stationeryProduct .stationeryAddtoCart{
    position: absolute; top: -50%; right: 0; padding: .5em; background-color: rgba(0, 128, 0, 0.815); color: yellow; transition: .8s; border-radius: 0 0 10px 10px;
}
.stationeryProduct:hover .stationeryAddtoCart{
    top: 0; transition-delay: .6s;
}
.stationeryAddtoCart .cartCounter{
    background-color: black; color: yellow; padding: .2em .5em; position: relative; right: 0; height: 90%; border-radius: 10px;
}
#stationeryDisplay search{
 position: absolute; bottom: -4%; width: 100%;
}
#stationeryDisplay search form{
    display: flex; justify-content: center; align-items: center; gap: 5%; 
}
#stationeryDisplay search form input{
  font-size: 1.4rem; padding: .3em 1em; border-radius: 20px; background-color: rgba(255, 255, 255, 1); backdrop-filter: blur(3px); color: blue; width: 55%; font-weight: 600;
}
#stationeryDisplay search form #stationerySearchButton{
    font-size: 1.2rem; padding: .5em; background-color: red; color: white;
}

.cube {
    height: 100%;
    width: 100%;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid white;
    background-color: rgb(255, 255, 255);
}

.cubeTag{
    position: absolute; left: 0; bottom: 0; background-color: rgba( 0, 0, 0, .8); backdrop-filter: blur(5px); color: white; font-size: 1.5rem; width: 50%; border-radius: 0 10px; text-align: center; outline: 3px dotted yellow; box-shadow: 8px -8px 5px black; font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; transition: .4s; text-shadow: 4px 4px 4px black;
}

.Pcube{
    position: relative;
    height: 70%;
    flex: 0 0 26dvw;
    left: 15%;
    transition: .5s;
    display: grid;
    place-items: center;
}

.Pcube:last-child{
    margin-right: 20em;
}

.cube::before{
    content: "Hover for info"; color: white; font-size: 1.2rem; position: absolute; right: 0; bottom: 3%; display: grid; place-items: center; border-radius: 20px; background-color: rgba(255, 0, 0, 0.808); backdrop-filter: blur(5px); height: fit-content; width: fit-content; padding: .5em; font-family: monospace;
}

.Pcube:hover{
    transform: scale(1.1);
}

.Plogo{
    position: absolute;
    top: -6%;
    left: -4%;
    height: 12%;
    width: 40%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 5px;
}

.cube .cubeButtons{
    padding: .5em;
    border: 2px solid white;
    height: fit-content;
    width: 50%;
    position: absolute;
    bottom: -30%;
    right: 0;
    transition: .8s;
    backdrop-filter: blur(5px);
}

.cubeButtons button{
    font-size: 1.3dvw;
    color: white;
    background-color: rgba(0, 0, 0, 0.61);
    height: fit-content;
    width: 99%;
    padding: .5em;
    margin-bottom: .5em;
    border-radius: 5px;
}

.cubeButtons button a{
    text-decoration: none;
    padding: .5em;
}

.cube .cubeButtons button:hover{
    background-color: white;
    color: black;
    transition: .2s;
}

.cubeButtons button:hover a{
    color: black; 
}

.cube:hover .cubeButtons{
    bottom: 5%;
}
.cube:hover .cubeTag{
    bottom: -20%;
}

.cube img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.cube span {
    color: white;
    position: absolute;
    font-size: 1.5dvw;
    left: -100%;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, .2);
    backdrop-filter: blur(3px);
    transition: .5s;
}


.cube span .productTitle{
    position: relative; top: 30%; color: white; padding: 1em; height: fit-content; width: 50%; font-weight: bold; font-size: 1.8dvw; letter-spacing: 3px; border-right: 5px solid yellow; background-color: rgba( 0, 0, 0, .7); overflow: clip;
}

.cube:hover span {
    left: 0;
}

.cube:hover {
    cursor: pointer;
    border-radius: 0;
}

#WhatsApp_Chat{
 position: fixed; bottom: 5%; left: 1%; height: 10%; width: 7%; display: flex;
}
#WhatsApp_Logo{
    height: 100%; width: 100%; cursor: pointer; border-radius: 0; border: 1px solid white;
}
#WhatsApp_Logo img{
    height: 100%; width: 100%;
}
#WhatsApp_Chat:hover #WhatsApp_Logo{
 border-radius: 100%; background-color: white;
}


dialog{
    background-color: rgba(0, 0, 0, 0.856);
    background-image: url("../../Backgrounds/fave2.avif");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    backdrop-filter: blur(5px);
    position: absolute;
    top: 16%;
    left: 20%;
    width: 60%;
    height: 70%;
    padding: .5em;
    overflow: visible;
}

.dialog_content{
    height: 98%;
    width: 98%;
    display: flex;
    justify-content: center;
    align-items: center;
}

dialog #close{
    position: absolute;
    top: -5%;
    right: -2%;
    color: white;
    background-color: red;
    padding: .5em;
    font-size: 1.2dvw;
}

button:hover{
    cursor: pointer;
}

dialog .dial-image{
  height: 87%;
  width: 50%;
  position: relative;
  background-color: white;
}

.dial-image img{
    width: 100%;
    object-fit: contain;

}

dialog .comments{
    height: 90%;
    width: 50%;
    border-radius: 5px; 
    position: relative;
    right: -2%;
    background-color: rgba( 0, 0, 0, .7);
    color: white;
    backdrop-filter: blur(3px);
    overflow: auto;
    padding: 1em;
}

.comments ul h3{
    background-color: yellow; color: black; letter-spacing: 5px; text-align: center; position: sticky; top: 0; z-index: 2;

}

.comments ul li{
    position: relative; font-size: 1.2rem; margin: .2em; font-family: monospace; list-style-position: inside; line-height: 1.5em;
}

.comments ul li:hover{
    color: yellow;
}

.dialBtn{
    position: absolute;
    bottom: 0;
    padding: .6em;
    color: white;
    font-size: 1.2dvw;
    text-shadow: 5px 5px 5px black;
    box-shadow: 5px 5px 5px black;
    border-radius: 20px;
    background-color: green;
    z-index: 2;
}

.AddedtoCart{
    color: yellow; font-weight: bold; position: absolute; bottom: 2%; z-index: 1; text-shadow: 4px 4px 3px black;
}
.dialBtn:hover{
    outline: 1px solid yellow;
}

.AddToCart{
    left: .8%;
}
.AddToCart span{
   background-color: black; color: yellow; padding: .1em .3em;
}
.dB2{
  right: 0;
  box-shadow: -5px 5px 5px black;
}

dialog::backdrop{
    backdrop-filter: blur(5px);
}

#headtxt {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 1.9rem;
    position: fixed;
    top: 4%;
    left: 4%;
    color: white;
}

#bagVarietyNavigation{
    position: fixed;  top: 0; left: 1%; padding: .3em 0; height: 10%; width: 40%; border-bottom: 1px solid white; display: flex; justify-content: center safe; align-items: center; gap: 3%; overflow-y: auto; display: none;
}
#bagVarietyNavigation::-webkit-scrollbar{
    display: none;
}

.bagVarietyButton{
    padding: .3em; background-color: rgba(0, 0, 0, 0.5); color: white; font-size: 1rem; font-family: sans-serif;
}

::-webkit-scrollbar {
    background-color: rgba(0, 0, 0, .1);
    display: initial;
}

::-webkit-scrollbar-thumb {
    background-color: whitesmoke;
    border-radius: 20px;
    opacity: .6;
}
#mobilebottomBar{
    display: none;
}

#mobileSlideLeft{
    display: none;
}

.mobilePimg{
    display: none;
}

#mobileContainer{
    display: none;
}
.cube span .mobilePT{
    display: none;
}
 
#Mobile_Cart{
    display: none;
}
#MobileCartPage{
    display: none;
}
#TopNavBar{
    display: none;
}
#mobileSearch{
    display: none;
}
#searchBox{
    display: none;
}
@media(orientation: portrait){
    #headtxt {
        font-size: 1.2rem;
        top: 10%;
        left: 3%;
        letter-spacing: 2px;
    }
    #bagVarietyNavigation{
        display: none;
    }
    #liveNavBar{
        display: none;
    }
    #HelpDeskPopUp{
        display: none;
    }
    .Pimg{
        display: none;
    }
    .mobilePimg{
        display: initial;
    }

    #TopNavBar{
        display: initial; position: fixed; top: 2%; height: 6%; width: 90%; background-color: rgba( 0, 0, 0, 0.4); display: flex; justify-content: center; align-items: center; z-index: 0;
    }
    #searchBox{
        display: initial; position: fixed; top: -25%; height: 20%; width: 90%; border-bottom: 3px solid white; display: flex; justify-content: center; align-items: center; gap: 5%; background-color: rgba(255, 255, 255, 0.692); backdrop-filter: blur(10px); transition: .4s; z-index: 6;
    }
    #searchBox input{
        background-color: rgb(4, 4, 112); color: white; padding: .9em;  width: 60%; font-size: 1rem;
    }
    #searchBox button{
        background-color: red; color: white; padding: .5em; font-size: 1rem;
    }
    #mobileSearch{
        display: initial; position: absolute; right: 0; padding: .4em; color: black; background-color: silver; letter-spacing: 1.1px; font-weight: bold;
    }
    #Mobile_Cart{
        display: initial; position: fixed; bottom: 4%; right: 2%; background-color: rgba( 0, 0, 0, 0.4); height: 9%; width: 17%; 
    }
    #Mobile_Cart img{
        height: 100%; width: 100%; position: relative; left: -5%;
    }
    #Mobile_Cart span{
        position: absolute; bottom: -20%; right: -9%; background-color: red; color: white; border-radius: 100%; height: 50%; width: 50%; font-size: 1.1rem;
    }
    
    #MobileCartPage{
        display: flex; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.788); height: 80%; width: 70%; position: fixed; right: -75%; transition: .4s;  z-index: 6; overflow: auto;
    }

    #MobileCartPage #mobileCartClear{
        background-color: red; position: absolute; left: 1%; bottom: 1%; color: white; padding: .5em; font-size: .9rem;
    }

    #MobileCartPage #mobileCheckout{
        background-color: white; color: black; padding: .5em; position: absolute; bottom: 1%; display: none; font-size: .9rem;
    }
    #MCPcontainer{
        height: 90%; width: 100%; overflow: auto; position: relative; top: -7%;
    }
    
    #MCPcontainer::-webkit-scrollbar{
        display: none;
    }
    #MCPcontainer .cart_item{
        height: 40%; width: 85%; border: 1px dotted white; backdrop-filter: blur(5px); position: relative; left: 7%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: .8em; backdrop-filter: blur(10px); z-index: 2;
    }

    #MCPcontainer .cart_item img{
        height: 80%; width: 80%; position: relative; top: -7%; left: 0;
    }
    #MCPcontainer .MobileCartUnit{
        position: absolute; top: 0; right: 0; width: fit-content; background-color: red; color: white; padding: .2em .5em; font-size: 1.3rem;
    }
    #MCPcontainer .MobileProductName{
        position: absolute; bottom: 0; background-color: rgba( 0, 0, 0, 0.8); color: white; font-size: 1.1rem; font-weight: 400; font-family: monospace; text-align: center;
    }

    #home{
        position: fixed;
        top: 1%;
        height: 8%;
        width: 40%;
        background-color: rgb(255, 255, 255);
        border-radius: 30px;
        display: grid;
        place-items: center;
        z-index: 3;
    }

    #home b{
        transition: .6s; font-size: 1.2rem; color: blue; letter-spacing: 1px; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }

    #headtxt{
        font-size: 1.1rem;
    }
    
    .sidebar{
        display: none;
    }
  #navmenu{
    display: none;
  }

  nav {
    display: none;
   }

   .container{
    display: none;
   }

 #mobileContainer{
    background-image: url("../../Backgrounds/fave2.avif");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100%;
    width: 100%;
    display: flex; justify-content: center; align-items: center; gap: 5%;
    overflow-x: auto;
    overflow-y: hidden;
 }

 #mobileElectronicsVarieties{
    height: 67%; flex: 0 0 100%; background-color: rgba( 0, 0, 0, 0.6); position: relative; display: flex; flex-wrap: wrap; overflow-x: auto; gap: 1%; justify-content: center; align-items: center;
 }
 #mobileElectronicsVarieties::-webkit-scrollbar{
    display: none;
 }

 #mobileContainer #mobileElectronicsContainer{
    height: 65%; width: 100%; position: relative; top: 0; display: none; overflow: auto;
 }
 #mobileElectronicsContainer::-webkit-scrollbar{
    display: none;
 }


 #mBVS_Button{
    display: none; position: fixed; bottom: 5%; left: 2%; height: 8%; width: 15%; background-color: rgba(0, 0, 0, .7);
  }
  #mBVS_Button div{
     border-bottom: 5px solid white; height: 5%; width: 90%; margin-bottom: .3em;
  }
  #mBVS_Button div:first-child{
    margin-top: .3em;
  }
 
 #mobileElectronicsVarietySlider{
    position: fixed; left: -66%; height: 90%; width: 60%; background-color: rgba(0, 0, 0, 0.7); overflow: auto; z-index: 7; display: flex; flex-direction: column; justify-content: center safe; align-items: center; gap: 5%; transition: .4s;
 }
 #mobileElectronicsVarietySlider button{
    top: 5%;
 }
 #mobileElectronicsVarietySlider::-webkit-scrollbar{
    display: none;
 }

 .Pcube{
    flex: 0 0 80%; height: 95%; top: 0; left: 5%;
 }

 .Pcube:first-child{
    margin-left: .5em;
 }

 .Pcube:last-child{
    margin-right: 4em;
 }

 .Pcube:hover{
    transform: unset;
 }
 .cube{
    border-radius: unset;
 }
 .cubeTag{
    display: none;
 }
 .cube:hover{
    scale: unset;
 }
 .cube img{
   height: 50%; width: 100%;
 }

 .cube span{
    background-color: rgba(0, 0, 0, 0.911); height: 50%; bottom: 0; left: 0; z-index: 5; display: grid; place-items: center; overflow: auto; border-radius: 20px 20px 0 0;
 }
 
.cube span .productTitle{
 display: none;
}

.cube span .mobilePT{
    color: white;
    font-size: 1rem;
    line-height: 2em;
    padding: 1em;
    position: relative;
    display: grid;
    place-items: center;
}

.cube span .mobilePT strong{
    background-color: yellow;
    color: black;
    padding: .5em;
    line-height: 1em;
}

.mobilePT h3{
    width: 90%; color: white; padding: .5em; outline: 2px dotted yellow; text-align: center;
}

.cube span ul li{
    font-size: 1rem; font-family: sans-serif; position: relative; left: 8%; width: 80%; line-height: 1.5em; margin-bottom: .5em;
}

.cube span .mobilePT .mobilePTButtonContainer{
    height: 3rem; width: 100%; display: flex; justify-content: center; align-items: center; gap: 4%; position: sticky; bottom: 0; left: -2%; z-index: 2; backdrop-filter: blur(5px); background-color: rgba(255, 255, 255, 0.692); border-radius: 10px 10px 0 0;
}
  
.mobilePTButtonContainer .mPTB{
    padding: .8em;
    border-radius: 20px;
    font-size: .88rem; font-family: monospace;
    display: flex; justify-content: center; align-items: center; gap: 5%;
    height: 90%; width: 50%;
    background-color: green;
    color: yellow;
    text-align: center;
    position: relative;
}

.mobilePTButtonContainer .mPTB a{
    color: yellow;
}
  
.cube::before{
    font-size: 5dvw;
    content: "Tap for info";
    z-index: 1;
    opacity: 0;
}

.cube button{
    display: none;
}

#WhatsApp_Chat{
    height: 9%; width: 20%; bottom: unset; top: 8.5%; left: unset; right: 1%;
}


#mobilebottomBar{
    display: initial;
    height: 12%;
    width: 50%;
    position: absolute;
    bottom: 0;
    border-radius: 100px 100px 0 0;
    background-color: rgba( 0, 0, 0, 0.4);
    display: grid;
    place-items: center;
}

#mobileProductnav{
    height: 79%;
    width: 48%;
    border-radius: 100%;
    background-color: rgb(255, 255, 255);
    position: relative; top: -8%;
}

#mobileProductnav img{
    border-radius: 100%; height: 100%; width: 100%;
}

#mobileProductnav div{
    position: relative;
    width: 40%;
    height: 40%;
    margin: 0;
    border-bottom: 5px solid red;
    border-right: 5px solid blue;
    transform: rotate(-135deg);
    transition: .1s;    
}


#mobileSlideLeft{
    display: initial;
    width: 90%;
    height: 40%;
    border-radius: 0;
    border: 1px solid white;
    position: fixed;
    bottom: -50%;
    backdrop-filter: blur(6px);
    background-color: rgba( 0, 0, 0, 0.4);
    display: flex;
    gap: 5%;
    overflow: auto;
    z-index: 6;
    transition: .3s;
    padding: 1em .8em 1em .6em;
}

#mobileSlideLeft::-webkit-scrollbar{
    display: none;
}

.Mslide{
    margin: .2em; height: 90%; flex: 0 0 50%; padding: .2em .5em .1em .5em; margin: 0 .4em 0 0; display: flex; flex-direction: column; justify-content: center; align-items: center; outline: 1px dashed white; position: relative; border-radius: 10px; background-color: rgba(0, 0, 0, 0.753);
}

.Mslide p{
    position: absolute;
    bottom: 1%;
    padding: .2em;
    color: white;
    font-weight: 700;
    border-radius: 5px;
}

.Ms{
    border: 1px solid white;
    height: 60%;
    width: 80%;
    border-radius: 100%;
    position: relative;
    top: -10%;
}

.Ms img{
   height: 100%; width: 100%; border-radius: 100%;
}

.Mss{
   height: 87%;
   width: 100%;
   position: absolute;
   top: 0;
   overflow: auto;
}

.Mss .mss{
   position: relative;
   top: 5%;
   left: 7%;
   height: 55%;
   width: 85%;
   background-color: rgb(22, 18, 18);
   margin-bottom: 10px;
   display: flex; justify-content: center; align-items: center;
   gap: 7%;
}

 .mss div{
  background-color: white; height: 100%; width: 100%; position: absolute; left: 0; z-index: 1;
}

.mss div img{
   height: 100%;
   width: 100%;
}

.mss p{
   color: yellow;
   background-color: rgba(0, 0, 0, 0.9);
   position: absolute;
   right: 1%;
   letter-spacing: 1px;
   font-size: .85rem;
   font-weight: 300;
   z-index: 2;
}


  ::-webkit-scrollbar-thumb{
    background-color: rgba(255, 255, 255, 0.4);
 }

}