@import url('https://fonts.googleapis.com/css2?family=Jaro:opsz@6..72&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins',sans-serif;
}

:root{
    --client: #f43726;
}

html, body {
      touch-action: none; /* pinch gestures disabled */
    }
    input, textarea, select {
      font-size: 16px; /* avoid auto-zoom on focus */
    }

body{
    background-color: #9e9e9e !important;
    /* overflow-y: hidden; */
    min-height: 100vh;
    overflow-y: scroll;
}

.heroWrap{
    background-color: #fff;
    overflow-y: auto;
    min-height: 100vh;
    top: 0;
    opacity: 1;
    /* transition: background-color .5s ease; */
    /* position: relative; */
}

.heroWrap.darkmode{
    background-color: #1d1d27;
}

.hero{
    max-width: 450px;
    /* position: relative; */
}

.navBar{
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 450px;
    z-index: 4;
    background-color: #fcfcfcfe;
    height: auto;
    padding: 15px 30px;
    padding-left: 10px;
    box-shadow: 0px 1px 4px rgb(146, 146, 146);
    /* transition: background-color .5s ease; */
}

.navBar.darkmode{
    /* background-color: transparent;
    backdrop-filter: blur(20px); */
    background-color: #111;
    box-shadow: 2px 5px 6px #11111151;
}

.navBar.darkmode p,.navBar.darkmode i,.navBar.darkmode span{
    color: #f0f0f0;
}

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

.navWrap i{
    line-height: 40px;
}

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

.logoCon img{
    width: 40px;
    height: 40px;
    border-radius: 100%;
    margin-right: 10px;
}

.notiNum{
    position: absolute;
    left: 50%;
    top: 0%;
    background-color: goldenrod;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    text-align: center;
    font-size: 13px;
    line-height: 15px;
    font-weight: 500;
    font-family: 'Jaro';
    /* color: #fff; */
}

.navWrap p{
    font-family: 'Jaro';
    font-size: 0.9rem;
}

marquee{
    font-family: 'Jaro';
}

.heroWrap.darkmode marquee{
    color: #fff;
}

.carousel-inner{
    box-shadow: 2px 3px 5px rgb(124, 124, 124);
    border-radius: 0.5rem;
}

.heroWrap.darkmode .carousel-inner{
    box-shadow: none;
}

.carousel-indicators{
    margin-bottom: -1rem!important  ;
}

.carousel-indicators [data-bs-target]{
    background-color: #000!important;
    opacity: .3!important;
}

.heroWrap.darkmode .carousel-indicators [data-bs-target]{
    background-color: #fff!important;
    opacity: .5!important;
}

.carousel-indicators .active{
    opacity: 1!important;
}

.heroWrap.darkmode .carousel-indicators .active{
    opacity: 1!important;
}

.collection-wrap img:not(.details img){
    width: 100%;
    height: 210px;
    border-radius: 20px;
    box-shadow: 2px 5px 5px #737373;
}

.heroWrap.darkmode .collection-wrap img{
    box-shadow: none;
}

.row{
    margin: 0!important;
}

.con{
    position: relative!important;
    display: flex!important;
    justify-content: center!important;
}

.details{
    position: absolute;
    bottom: 5px;
    left:0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
}

.collection-wrap .details img{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    box-shadow: none;
}

.details span{
    font-size: 13px;
    color: #fff;
    font-weight: bold;
}

.footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 450px;
    z-index: 4;
    /*background-color: #fff ;*/
    height: auto;
    margin-top: 20px;
    padding: 10px 10px;
    padding-left: 10px;
   /* box-shadow: 0px -5px 5px -5px rgba(0,0,0,0.5);*/
    /*transition: background-color .5s ease; */
}

.heroWrap.darkmode .footer{
    background-color: #111;
}

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

.tabs{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.tabs span{
    font-weight: bold;
    font-size: 0.8rem;
    font-family: 'Jaro';
}

.heroWrap.darkmode .tabs{
    color: #f0f0f0;
}