* {
    margin: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: pinnoFont;
    src: url('/assets/PinnoFontNew.ttf');
}

@font-face {
    font-family: pinnoFontBold;
    src: url('/assets/PinnoFontBoldNew.ttf');
}


@media (max-width: 568px) {

    .main-app,
    .main-app-profile,
    .main-app-hashtag,
    .main-app-music,
    .main-app-explore {
        width: 100%;
        height: 100%;
    }

    .content,
    .content-profile,
    .content-explore {
        width: 100%;
    }

    .videoTag,
    #image {
        max-width: 100%;
        max-height: 100%;

    }

    .videoSidebar {
        bottom: 0px;
        right: 0px;
    }

    .videoSidebar__button {
        padding-top: 0px;
        padding-bottom: 0px;
        color: #fff
    }


    .videoFooter {
        font-size: 12px;
    }
}

@media (max-width: 1200px) {

    .main-app,
    .main-app-profile,
    .main-app-hashtag,
    .main-app-music,
    .main-app-explore {
        width: 100%;
        height: 100%;
    }

    .videoSidebar {
        right: 0px;
        bottom: 0px;
    }

    .videoSidebar__button {
        padding-top: 5px;
        padding-bottom: 5px;
        color: #fff
    }


}

@media (min-width: 1200px) {

    .main-app,
    .main-app-profile,
    .main-app-hashtag,
    .main-app-music,
    .main-app-explore {
        left: 23%;
        right: 23%;
        max-width: 60%;
        height: 100%;

    }

    .videoSidebar {
        right: 0px;
        bottom: 0px;
    }


    .videoSidebar__button {
        padding-top: 15px;
        padding-bottom: 0px;
        color: #fff
    }

}

html {
    /* scroll-snap-type: y mandatory; */
}

html,

body {
    height: 100%;
    color: rgb(0, 0, 0);
    background-color: rgb(35, 35, 35);
}



.main-app-landingPage {
      background-color: rgb(35, 35, 35);
        height: 100%;
       position: relative;
        width: 100%;
        overflow: hidden;
        align-items: center;
}
 .mainLanding{
       background-color: rgb(244, 238, 247);
       height: 100vh;
       width: 100%;
       overflow: hidden;
       align-items: center;
       justify-content: center;
       text-align: center;
 }

.landing-section{
   height: 100%;
     width: 100%;
     align-items: center;
     justify-content: center;
     text-align: center;


}

.description{
     color: #050505;
     width:150px ;
     font-family: pinnoFont;
     direction: rtl;
     padding-bottom: 30px;

}
.detals_pinno{
position: absolute;
left: 30px;
top: -40px;
font-size: 70%;
}
.note{
    position: absolute;
    padding-top: 80px;
    justify-content: end;
    text-align: end;
    text-align: end;
    font-size: 11px;
    width: 300px;
    left: -50px;
    z-index: 30;
    font-family: pinnoFont;


}
.img-responsive-mpbile{
    width:40% ;
    height: 50%;



}
.img-responsive{
    width:15% ;
    height: 50%;

}
.note1{
    position: absolute;
    bottom: 12%;
    right: 10%;
    align-items: end;
    justify-content: end;
    text-align: end;

   font-size: 60%;
    z-index: 30;
    font-family: pinnoFont;
}
.stors{
    position: absolute;
    z-index: 30;
    bottom: 10%;
   right: 50%;
}
.icon{
    direction: rtl;
    left: 30px;
    font-size: 20px;

}

.yellow-color{
    color: #cab919;
    float: left;
    float: right;
    margin-left: 3px;
    margin-top: 3px;
}
.green-color{
    color: #19ca28;
    float: left;
    float: right;
    margin-left: 3px;
    margin-top: 3px;

}
.text{
    color: #050505;
    float: left;
    float: right;
}

.description1{
    color: #050505;
    padding-top: 50px ;
    width:150px ;
    direction: rtl;
    font-size: 25px;
    font-family: pinnoFont;

}
.linkText {
    color: blue;
    padding-bottom: 15px;
}


.box-green{
    height: 30%;
    width: 30%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: rgb(59, 151, 4);
}

.rowContainer{
    position: absolute;
    width: 100%;
    height: 90vh;
    top: -19px;
    padding-top: 50px;
}

.image_app{
    position: absolute;
    top: 0px;
    padding-top: 0px;
    right: -45px;
    width: 69%;
    height: 110%;
    /* left: 250px; */
    filter: drop-shadow(-10px -10px 10px rgb(149, 219, 111));
    transform: rotate(-5deg)
}

.image_app2{
    position: absolute;
    top: 15%;
    padding-top: 0px;
 left: 30%;
    width: 75%;
    height: 80%;
    /* left: 250px; */
    filter: drop-shadow(-10px -10px 10px rgb(149, 219, 111));
    transform: rotate(-12deg)
}
.avatars{
    left: 35%;
    position: absolute;top: -8px;
    width: 40%;
    height: 125%;
    align-items: center;
    align-content: center;

}


.box-saka{
    width: 110%;
    height: 92%;
    border-radius:30px;
    background-color:white;
    position: absolute;
    left: 5%;
    top: 4%;

}
.box-saka-mobile{
    width: 110%;
    height: 90%;
    border-radius:30px;
    background-color:white;
    position: absolute;
    left: 20px;
    top: 30px;
}
.hapyclient{
    position: absolute;


}
.happy{
    position: absolute;
    top: 20px;
    font-size: 60%;
    left: 8%;
}
.count_count{
    position: absolute;
    top: 20px;
    font-size: 70%;
    right: 8%;
}
.box-user_mobile{
    border-radius:80px;
    z-index: 100;
    height: 50px;
    width: 55%;
    top: 40%;
    left: 10%;
    position: absolute;
    box-shadow:5px 2px 20px 5px  rgb(149, 219, 111);
    background-color: rgb(255, 255, 255);

}
.discription{
    font-size: 13px;
    font-weight: bold;
}

.box-user{
    border-radius:80px;
    z-index: 100;
    height: 50px;
    width: 300px;
    top: 48%;
    position: absolute;
    box-shadow:5px 2px 20px 5px  rgb(149, 219, 111);
    background-color: rgb(255, 255, 255);
    align-items: center;
}








.main-app:-webkit-scrollbar {
    display: none;
}

.main-app-hashtag:-webkit-scrollbar {
    display: none;
}

.main-app-profile:-webkit-scrollbar {
    display: none;
}

.main-app-profile .material-icons.md-18 {
    font-size: 80px;
}


.header {
    position: relative;
    /* position:absolute; */
    max-height: 500px;
    width: 100%;



}


.bg_image {
    position: relative;
    max-height: 300px;
   width: 100%;
    z-index: -10;
    padding-left: 4px;
    padding-right: 4px;
    -webkit-filter: blur(15px);
    backdrop-filter: blur(15px);
    background-image: linear-gradient(0deg, rgb(35, 35, 35), transparent);
}




.detailContainer {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    /* text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center; */
    justify-content: flex-end;
    /* -webkit-box-align: center; */
    /* -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center; */
    color: white;
    z-index: 10;


}










.container {
    position: relative;
    max-width: 96.5rem;
    margin-left: 15px;
    margin-right: 15px;

    display: grid;
    grid-template-columns: auto auto auto;


}





.menu-container {
    z-index: 100;
}

.menu-container-profile {
    z-index: 100;
}
.menu-container-music {
    z-index: 100;
}






[type="checkbox"] {
    display: none;
}

[type="checkbox"]:checked+.app .toggle {
    transform: translateX(95%);
    background-color: rgb(59, 151, 4);
}

[type="checkbox"]:checked+.app {
    opacity: 1;
    color: #fff;

}
















audio::-webkit-media-controls-enclosure {
    background-color: transparent;
}
audio::-webkit-media-controls-mute-button {
    display: none;
}


audio::-webkit-media-controls-play-button {
    background-color:rgb(58, 151, 4);
    border-radius: 50%;
    color: #FFFFFF;
}

audio::-webkit-media-controls-play-button:hover {
    background-color:rgb(58, 151, 4);
}



audio::-webkit-media-controls-return-to-realtime-button{
    color: #007aff;
    background-color: #CCCCCC;
}
audio::-webkit-media-controls-slider-thumb{
    color: #51A351;
}
audio::-webkit-media-controls-time-remaining-display {
    display: none;
}
audio::-webkit-media-controls-current-time-display {
    display: none;
}