*{
    margin: 0;
    padding: 0;
}
.hub{
    font-size: 2rem;
   
   
}
.hub span{
    font-family: 'Poppins', sans-serif;
}
.bl{
    font-family: 'Poppins', sans-serif;
    /* position: absolute;
    top: 22rem; */
color: white;
/* color: black;
font-weight: 600;
cursor: default; */

}
.stik{
    position: sticky;
    top: 0%;
    z-index: 10;
}
.bl h3{
    font-size: 4rem;
    font-weight: 600;
    letter-spacing: 10px;
    text-align: center;
}
.bl button{
    border-radius: 15px;
}
.b2{
    font-family: 'Poppins', sans-serif;
    /* position: absolute;
    top: 22rem; */
color: white;
/* color: black; */
font-weight: 600;
cursor: default;
color: white;

}
.b2 h3{
    font-size: 4rem;
    font-weight: 600;
    letter-spacing: px;
    text-align: center;
}
.b3{
     font-family: 'Poppins', sans-serif;
color: #a28089;

}
.carousel-caption{
    transform: translateY(-50%);
    bottom: initial;
    top: 50%;
}
.b3 h3{
    font-size: 5rem;
    font-weight: 700;
    text-align: center;
}
.shop{
position: relative;
left: 14rem;
margin-left: 2rem;
font-size: 1.3rem;
}
@media screen and (max-width:600px) {
    .shop{
        display: none;
    }
    .b3 h3{
        font-size: 2rem;
        position: absolute;
top: -2rem;
        color: #a28089;
    }
    .b2 h3{
        font-size: 2rem !important;
    }
 .b3 button{
    position: absolute;
    top: 3rem !important;
    left: 6rem;
    color: white;
 }
 .bl h3{
    font-size: 2rem !important;
 }
 .carousel-control-next{
    position: absolute;
    top: -20rem;
    color: orange;
    
 }
 .carousel-control-prev{
    position: absolute;
    top: -20rem;
    color: orange;
 }
 .shop{
    position: relative;
    left: -1rem;
    margin-left: 2rem;
    font-size: 1.3rem;
    animation: both;
    transition: 1s;
    }
    h1{
        position: absolute;
        left: 7rem !important;
    }
    h2{
        position: absolute;
        left: 9.3rem !important;
    }
    .cl1 span {
     position: absolute; 
            top: -3rem;
        left: 0.3rem;

    }
    .cl2 span {
        position: absolute; 
               top: 17rem;
            left: -27.5rem;
   
       }
       .cl3 span {
        position: absolute; 
               top: 42rem;
            left: -55.3rem;
   
       }
       .cl4 span {
        position: absolute; 
               top: 40rem;
           left: 0.3rem;
   
       }
       .cl5 span {
        position: absolute; 
               top: 66rem;
            left: -27.5rem;
   
       }
       .cl6 span {
        position: absolute; 
               top: 89rem;
            left: -55.3rem;
   
       }
       .cl7 span {
        position: absolute; 
               top: 89rem;
           left: 0.3rem;
   
       }
       .cl8 span {
        position: absolute; 
               top: 112rem;
            left: -27.5rem;
            font-size: 1rem;
       }
       .cl9 span {
        position: absolute; 
               top: 136rem;
            left: -55.3rem;
   
       }
       .cl10 span {
        position: absolute; 
               top: 129rem;
           left: 0.3rem;
   
       }
       .cl11 span {
        position: absolute; 
               top: 155rem;
            left: -27.5rem;
            font-size: 1rem;
       }
       .cl12 span {
        position: absolute; 
               top: 180rem;
            left: -54.3rem;
   
       }
       .cl13 span {
        position: absolute; 
               top: 176rem;
           left: 0.3rem;
   
       }
       .cl14 span {
        position: absolute; 
        top: 199rem;
            left: -27.5rem;
            font-size: 1rem;
       }
       .cl15 span {
        position: absolute; 
        top: 222rem;
            left: -55.3rem;
   
       }
       .ss{
        overflow-x: hidden !important;
    }
    body{
        overflow-x: hidden !important;
    }
    .jk{
        position: absolute;
        top: -5rem !important;
        font-size: 0.8rem !important;
    }
    .jk2{
        position: absolute;
        top: -5rem !important;
        font-size: 1rem !important;
    }
    .puma{
        position: absolute;
        top: -6rem !important;
        font-size: 1rem !important;
    }
    select{
        position: absolute;
        top: 7rem !important;
    }
    .sz{
       position: absolute;
       top: 7rem;
       right: 6rem;
    }
    .clr{
        position: absolute;
        top: -2rem !important;
        left: -1rem;
    }
    .adl{
        position: absolute;
        top: -2rem !important;
    }
    .pty{
 display: none;
    }
    .ptt{
        position: absolute;
        top: -4rem !important;
        left: -1rem !important;
        font-size: 0.8rem !important;
    }
    .oo{
        overflow: hidden;
    }
    ::-webkit-scrollbar{
        background-color:white;
        width: 0.6rem;
    }
    ::-webkit-scrollbar-thumb{
        background: linear-gradient(120deg, rgba(82,82,82,1) 9%, rgba(35,42,41,1) 24%, rgba(216,222,209,1) 58%, rgba(0,0,0,0.702140231092437) 84%);
    background-clip: content-box;
    /* border: 2rem solid ; */
    width: 1rem;
    border-radius: 2rem;
    }
    
   
    
}
div{
    cursor: default;
}
.grid{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(400px,1fr));
}
.img-wrapper{
    position: relative;
    overflow: hidden;
}
.img-wrapper img{
    display: block;
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: center;
}
.img-wrapper > .content{
    position: absolute;
    inset: 0;
    top: 2rem;
    background-color: rgba(255, 255, 255, .4);
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.img-wrapper > img,.img-wrapper > .content{
    transition: 200ms ease-in-out;
}
.img-wrapper:hover > img.blur{
    filter: blur(5px);
transform: scale(1.1);
}
.img-wrapper > .content-fade {
    opacity: 0;
}
.img-wrapper:hover > .content-fade{
    opacity: 1;
}
h2{
    position: absolute;
    top: 12rem;
    left: 10rem;
    font-size: 2rem;
    font-family:  'sans-serif';
font-weight: 700;
color: 	rgb(40, 40, 43)

} 
h1{
    position: absolute;
    top: 12rem;
    left: 10rem;
    font-size: 2.1rem;
    font-weight: 700;
    font-family: 'sans-serif';
color: black;

}
 .img-wrapper .content-fade button{
    display: none;
    position: absolute;
    top: 20rem;
    left: 10rem;
    transition: 200ms ease-in-out;
    text-transform: capitalize !important;
}
.img-wrapper:hover > .content-fade button{
display: block;
transform: translateX(100);

}
.grid{
    overflow-x: hidden;
}
.product{
    font-family: 'Climate Crisis', cursive;
    font-size: 2rem;
    text-transform: capitalize;
    color: rgb(56, 56, 56);
    letter-spacing: 3px;
}
.card{
    border: 0;
}
/* .shp{
    position: absolute;
    top: 14rem;
    left: 10rem;
    transition: 200ms ease-in-out;
visibility: hidden;
}
.shp:hover{
    visibility: visible;
    transform: translateX(100);
    z-index: 2;
  
} */
.cl1 span a{
    position: absolute;
    top: 14rem;
    left: 10rem;
    transition: 4s ease-in-out;
    display: none;

}
.cl1:hover span a{
    display: block;
    transform: translateX(-100);
}
.cl2 span a{
    position: absolute;
    top: 14rem;
    left: 38rem;
    transition: 4s ease-in-out;
    display: none;

}
.cl2:hover span a{
    display: block;
    transform: translateX(-100);
}
.cl3 span a{
    position: absolute;
    top: 14rem;
    left: 65.2rem;
    transition: 4s ease-in-out;
    display: none;

}
.cl3:hover span a{
    display: block;
    transform: translateX(-100);
}
.cl4 span a{
    position: absolute;
    top: 37rem;
    left: 10rem;
    transition: 4s ease-in-out;
    display: none;

}
.cl4:hover span a{
    display: block;
    transform: translateX(-100);
}
.cl5 span a{
    position: absolute;
    top: 37rem;
    left: 38rem;
    transition: 4s ease-in-out;
    display: none;

}
.cl5:hover span a{
    display: block;
    transform: translateX(-100);
}
.cl6 span a{
    position: absolute;
    top: 37rem;
    left: 65.2rem;
    transition: 4s ease-in-out;
    display: none;

}
.cl6:hover span a{
    display: block;
    transform: translateX(-100);
}
.cl7 span a{
    position: absolute;
    top: 63rem;
    left: 10rem;
    transition: 4s ease-in-out;
    display: none;

}
.cl7:hover span a{
    display: block;
    transform: translateX(-100);
}
.cl8 span a{
    position: absolute;
    top: 63rem;
    left: 38rem;
    transition: 4s ease-in-out;
    display: none;

}
.cl8:hover span a{
    display: block;
    transform: translateX(-100);
}
.cl9 span a{
    position: absolute;
    top: 63rem;
    left: 65.2rem;
    transition: 4s ease-in-out;
    display: none;

}
.cl9:hover span a{
    display: block;
    transform: translateX(-100);
}
.cl10 span a{
    position: absolute;
    top: 90rem;
    left: 11rem;
    transition: 4s ease-in-out;
    display: none;

}
.cl10:hover span a{
    display: block;
    transform: translateX(-100);
}
.cl11 span a{
    position: absolute;
    top: 90rem;
    left: 38rem;
    transition: 4s ease-in-out;
    display: none;

}
.cl11:hover span a{
    display: block;
    transform: translateX(-100);
}
.cl12 span a{
    position: absolute;
    top: 90rem;
    left: 65.2rem;
    transition: 4s ease-in-out;
    display: none;

}
.cl12:hover span a{
    display: block;
    transform: translateX(-100);
}
.cl13 span a{
    position: absolute;
    top: 117rem;
    left: 10rem;
    transition: 4s ease-in-out;
    display: none;

}
.cl13:hover span a{
    display: block;
    transform: translateX(-100);
}
.cl14 span a{
    position: absolute;
    top: 117rem;
    left: 38rem;
    transition: 4s ease-in-out;
    display: none;

}
.cl14:hover span a{
    display: block;
    transform: translateX(-100);
}
.cl15 span a{
    position: absolute;
    top: 117rem;
    left: 65.2rem;
    transition: 4s ease-in-out;
    display: none;

}
.cl15:hover span a{
    display: block;
    transform: translateX(-100);
}
.card-body{
    font-family: 'Poppins', sans-serif;
    text-transform: capitalize;
    font-weight: bold;
    color: black;

}
.card-text{
    font-family: 'Poppins', sans-serif;
    text-transform: capitalize;
    font-size: 1.1rem;
}
.card-title{
    text-align: center !important;
    text-transform: capitalize;
    font-size: 1.2rem;
}
.b1{
    height: 100vh;
    background-image: url(modd.jpeg);
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;

}
.b6{
    width: 100%;
    height: 100vh;
    background-color: rgba(0.2,0.2,0.2,0.3);
    font-size: 4rem;
 
}
.b5{
    position: relative;
    top: 20rem;
    font-family: "popins," ;
    text-transform: capitalize;
letter-spacing: 2px;
font-weight: bolder;
color: #a28089;

}
.hdr{
    font-family: "popins," ;
    font-size: 1.5rem;
    font-weight: 600;
}
.qr{
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    font-weight: bolder;
}
.lg{
font-size: 1.7rem;
}
.lg a{
    color: whitesmoke;
    margin-left: 1rem;
}
.tt{
    background-color: black;
    border-bottom: black;
    color: white;
    height: 16%;
    width: 100%;
    margin-top: 1rem;
}
.tf{
    border-radius: 20px;
    outline: none;
    border: none;
    /* background: linear-gradient(120deg, rgba(168,186,186,1) 10%, rgba(32,40,39,1) 36%, rgba(216,222,209,1) 58%, rgba(0,0,0,0.702140231092437) 84%); */
    background: linear-gradient(120deg, rgba(82,82,82,1) 9%, rgba(35,42,41,1) 24%, rgba(216,222,209,1) 58%, rgba(0,0,0,0.702140231092437) 84%);
}
.sb{
    color: black;
    font-weight: 700;
    font-size: 1.3rem;
}
.pay{
    font-size: 1.6rem;
    margin: 1rem;
}
.puma{
    margin-top: 10rem;
    font-size: 2rem;
}
.jk{
    margin-top: 5rem;
    position: relative;
    top: 6rem;
}
.jk2{
    position: relative;
    top: 8rem;
    font-size: 2rem;
    font-family: 'Courier New', Courier, monospace;
}
.clr{
position: relative;
right: 2rem;
top: 15px;
}
.adl{
    position: relative;
    top: 2rem;
}
.pty a{
    margin-left: 1rem;
    position: relative;
    top: 4rem;
    left: 12rem;
    font-size: 2rem;
}
.ptt{
position: relative;
left: 18rem;
}
::-webkit-scrollbar{
    background-color:white;
    width: 0.5rem;
}
::-webkit-scrollbar-thumb{
    background: linear-gradient(120deg, rgba(82,82,82,1) 9%, rgba(35,42,41,1) 24%, rgba(216,222,209,1) 58%, rgba(0,0,0,0.702140231092437) 84%);
background-clip: content-box;
/* border: 2rem solid ; */
/* width: 1rem; */
border-radius: 2rem;
}
.preloader{
    width: 100%;
    height: 100vh;
    background-color: black;
    background-image: url(website4img/loader.gif);
    background-position: center center;
    background-repeat: no-repeat;
    position:fixed;
    z-index: 100;
    background-size: 10%;
}