body:lang(np),
body:lang(np) * {
    font-family: laila !important;
}

.background{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
}
.background-2{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    /* opacity: 0.5; */
}

.chaptertitle,.page2-text,.page3-text,.page5-text {
    position: absolute;
    top: 6%;
    left: 16%;
    width: 32%;
    font-size: 4vw;
    padding: 1%;
    color: white;
    border-radius: 40px;
    background: #4b4e6d;
    box-shadow: 10px 12px 5px 0px rgba(111,111,135,0.85);
-webkit-box-shadow: 10px 12px 5px 0px rgba(111,111,135,0.85);
-moz-box-shadow: 10px 12px 5px 0px rgba(111,111,135,0.85);
}
.page2-text,.page3-text{
    top: 6%;
    left: 12%;
    width: 43%;
    border-radius: 20px;
    padding: 2%;
    box-shadow: none;
}
.page3-text{
padding: 1%;
}
.page5-text{
    top: 4%;
    left: 10%;
    width: 44%;
    border-radius: 20px;
}

.blue_bg{
    background-color: #15CBFF;
}
.scale-background{
  animation: bg-zoom 6s forwards;
}
@keyframes bg-zoom{
    0%{}
    100%{
        transform: scale(2);
    }
}
/* characters styles start */
.biru-conv{
    position: absolute;
    z-index: 1;
    width: 25%;
    left: 48%;
    top: 35%;
}
.muna-conv{
    position: absolute;
    z-index: 1;
    width: 25%;
    left: 48%;
    top: 35%;
}
.saman_cover_page{
    position: absolute;
    width: 46%;
    left: 10%;
    top: 40%;
    z-index: 1;
}
.numa_page1{
    position: absolute;
    width: 12%;
    left: 14%;
    top: 36%;
    z-index: 1;
}
.biru_page1{
    position: absolute;
    width: 13%;
    left: 42%;
    top: 34%;
    z-index: 1;
}

.numa_page3{
    position: absolute;
    width: 12%;
    left: 10%;
    top: 40%;
    z-index: 1;
}
.biru_page3{
    position: absolute;
    width: 13%;
    left: 46%;
    top: 37%;
    z-index: 1;
}
.numa_page4,.numa_page5{
    position: absolute;
    width: 18%;
    left: 14%;
    top: 35%;
    z-index: 9;
}
.biru_page4,.biru_page5{
    position: absolute;
    width: 10.5%;
    left: 42%;
    top: 34%;
    z-index: 1;
}
.numa_page5{
    top: 36%;
    width: 12%;   
}
.biru_page5{
    top: 36%;
    width: 18%;
    left: 32%;
}
.biru_page6,.numa_page6{
    position: absolute;
    width: 18%;
    left: 32%;
    top: 36%;
    z-index: 99;
}
.numa_page6{
    width: 12%;
    left: 16%;
    top: 36%;
}
.numa_page7,.biru_page7{
    position: absolute;
    width: 17%;
    left: 16%;
    top: 38%;
    z-index: 99;
}
.biru_page7{
    left: 38%;
    width: 13%;
    top: 36%;
}
.numa_page8,.numa_page9,.biru_page10{
    position: absolute;
    z-index: 1;
    width: 14%;
    left: 18%;
    top: 36%;
}
.biru_page8,.biru_page9{
    position: absolute;
    width: 10.5%;
    left: 40%;
    top: 36%;
    z-index: 1;
}
.biru_page9{
    width: 14.5%;
    left: 36%;
    top: 36%;
}
.numa_page9{
    width: 12%;
    left: 18%;
    top: 38%;
}
.biru_page10{
    width: 16.5%;
    left: 36%;
    top: 38%;
}
.numa_page11{
    position: absolute;
    width: 15%;
    left: 16%;
    top: 40%;
    z-index: 1;
}
.biru_page11{
    position: absolute;
    width: 12.5%;
    left: 40%;
    top: 39%;
    z-index: 1;
}


/* characters styles end*/

/* speech box styles start */
.sp-4{
    position: absolute;
    top: 6%;
    left: 16%;
    width: 24%;
    height: 28%;
    padding: 1.5% 2% 4% 1.5%;
}
.sp-5{
    position: absolute;
    top: 12%;
    left: 32%;
    width: 18%;
    height: 22%;
    padding: 1.5% 1.95% 4.5% 1%;
}
.sp-7{
    position: absolute;
    top: 12%;
    left: 18%;
    width: 18%;
    height: 26%;
    padding: 2% 1% 5% 2%;
}
.sp-8{
    position: absolute;
    top: 6%;
    left: 19%;
    width: 22%;
    height: 30%;
    padding: 1% 2% 5% 3.5%;
}
.sp-10,.sp-11{
    position: absolute;
    top: 10%;
    left: 28%;
    width: 24%;
    height: 28%;
    padding: 1% 3% 5% 1.5%;
}
.sp-6{
    top: 6%;
    left: 30%;
    width: 20%;
    height: 28%;
    padding: 1.5% 2.65% 5.5% 1.5%;
}
.sp-11{
    top: 15%;
    left: 17%;
    width: 20%;
    height: 24%;
    padding: 2% 2% 5% 3%;
}



.box {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
}

.speechbox>p {
    position: relative;
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.mirrored{
    transform: rotateY(180deg);
}
/* speech box styles end */



/* #region video player css */
.sidevideoDiv_coverpg{
    height: 100%;
    width: 35%;
    left: 0%;
}

div[class*="svd"]{
    height: 90%;
    width: 30%;   
}

.svd-l{
    left: 5%;
}

.svd-r{
    right: 5%;
}

.side_video_holder{
    position: absolute;
    top: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    background: #efecff;
    border-radius: 40px;
    overflow: hidden;
    border: 2px solid #6971a0;
    box-shadow: 10px 12px 5px 0px rgba(111,111,135,0.85);
    -webkit-box-shadow: 10px 12px 5px 0px rgba(111,111,135,0.85);
    -moz-box-shadow: 10px 12px 5px 0px rgba(111,111,135,0.85);
}

.videolabel-btm {
    position: absolute;
    bottom: 0%;
    width: 100%;
    background: #969a7d;
    padding: 5%;
}

#nslVideo {
    position: absolute;
    width: 40%;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
}

.video_container {
    position: absolute;
    height: 80%;
    width: 100%;
    bottom: 20%;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    overflow: hidden;
}

.replaybtn_container {
    position: absolute;
    bottom: 0%;
    height: 20%;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    /* background-color: #62654C; */
}

#replay_video_btn {
    width: 70%;
    margin: auto;
    pointer-events: none;
}
.vid {
    height: 85%;
    width: 100%;
}

/* #endregion */

/* #region common */
.txt1{
    z-index: 99;
}
    .p-abs{
        position: absolute;
    }

    .c-x{
        left: 50%;
        transform: translateX(-50%);
    }

    .c-y{
        top: 50%;
        transform: translateY(-50%);
    }
    .c-xy{
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
/* #endregion */

@media (min-aspect-ratio:4/3) {
    .txt1, .txt3,.page3-text {
        font-size: 4.5vh;
    }
    .page2-text{
        font-size: 4.5vh;
    }
    .imgName,
    .lesMore {
        font-size: 4vh;
    }
}

@media (max-aspect-ratio:4/3) {
    .txt1, .txt3 ,.page2-text{
        font-size: 2.8vw;
    }
}