/* latin */
@font-face {
  font-family: 'Tiro Devanagari Hindi';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../../assets/fonts/TiroDevanagariHindi-Italic.woff2) format('woff2');
  }
/* devanagari */
@font-face {
  font-family: 'Tiro Devanagari Hindi';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../../assets/fonts/TiroDevanagariHindi-Regular.woff2) format('woff2');
}
body{

    margin: 0;

    padding: 0;

    background-image: linear-gradient(#f5f5f5e0, #f5f5f5e0),url(../img/jaapbook.webp);

    background-size: contain;

}

*,
*::before,
*::after {
  box-sizing: border-box;
}

h1,h2,h3,h4,h5,h6{

    font-family: "Poppins", sans-serif;

}
.w-100{width:100%;}
.hindi-regular {

  font-family: "Tiro Devanagari Hindi", serif;

  font-weight: 400;

  font-style: normal;

}

.hide{display: none;}

.main-details{

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.hindi-regular-italic {

  font-family: "Tiro Devanagari Hindi", serif;

  font-weight: 400;

  font-style: italic;

}

.actionsjap {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

}

    .container{

        max-width: 1140px;

        width: 100%;

    padding-right: 15px;

    padding-left: 15px;

    margin: 10px auto;

    }

    #ramBoxContainer{

        display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    margin-right: -15px;

    margin-left: -15px;

    justify-content: space-between;

    }
    .slidingversions {
        min-height: 360px;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    .slidingversions #ramBoxContainer{
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        margin: 0;
    }
    .text-center {

    text-align: center!important;

    }

    .box {

    background-color: #f7641e;

    padding: 10px;

    margin-bottom: 10px;

    cursor: pointer;

    color: #fff;

    text-align: center;

    flex: 0 0 21%;

    font-size: 45px;

    position: relative;

}
.slidingversions .box{
    flex: none;
    padding: 20px;
}
.slidingversions .box.swiper-slide-active {
    scale: 0.9;
}
.slidingversions .box:not(.swiper-slide-active) {
    scale: 0.7;
}
.box span {

    position: absolute;

    font-size: 51px;

    opacity: 0.07;

    top: 0;

    right: 0;

    line-height: 61px;

}

#ramBoxContainer .box.shree {

    pointer-events: none;

    background-color: green;

}

#ramBoxContainer .box.shree span {

    opacity: 0.1;

}

.box b {

    position: absolute;

    left: 10%;

    opacity: 0.08;

    font-weight: 400;

}

.countnamly {

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.jaapnamlist{

    position: relative

}

.jaapnamlist ul {

    position: absolute;

    list-style: none;

    padding: 0;

    z-index: 9;

    top:10px;

    font-size: 24px;

    width: 100%;

    border: 0;

    z-index: -1;

    visibility: hidden;

    opacity: 0;

    border-bottom: 1px solid #a4a4a4;

    background: #fff;

}

.jaapnamlist ul li{

    cursor: pointer;

    line-height: 1.2;

    padding: 2px 5px;

    margin-bottom: 4px;

    border-bottom: 1px solid #cecaca;

    font-size: 22px;

}

.listnaam.jaapnamlist ul {

    z-index: 99;

    visibility: visible;

    opacity: 1;

    box-shadow: 5px 5px 18px 0px #2626262b;

}

.fieldsinputs {

    display: flex;

    gap:15px;

}

.countnamly select, .countnamly input {

    font-size: 24px;

    width:100%;

    border: 0;

    border-bottom: 1px solid #a4a4a4;

    background: transparent;

}

.countnamly select:focus, .countnamly select:focus-visible,

.countnamly select:focus-within,

.countnamly input:focus, .countnamly input:focus-visible,

.countnamly input:focus-within{

    outline: none;

}

.d-none{

    display: none;

}

/* Modal for login register start here */



.modal{

    display: none;

    position: fixed;

    z-index: 9999;

    padding-top: 100px;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    overflow: auto;

    background-color: rgb(0,0,0);

    background-color: rgba(0,0,0,0.4);

    font-family: sans-serif;

    }

    .modal-content {

        background-color: #f8f8f8;

        width: 100%;

        /* border: 30px solid #fff; */

        overflow: hidden;

        position: relative;

        box-sizing: border-box;

        max-width: 550px;

        margin: auto;

        font-family: "Poppins", sans-serif;

        font-weight: 400;

        font-style: normal;

        border-radius: 0px;

        padding: 25px;

    }

    .modal-close{

    font-size: 20px;

    float: right;

    font-weight: 700;

    color: #000;

    font-size: 25px;

    margin-top: -10px;

    transition: all .2s;

    cursor: pointer;

    width: auto;

    }

    .modal-close:hover{

    color: #3b3b3b;

    }

    .modal-img img{

    width: 100%;

    }

    .modal-text{

    text-align: center;

    color:#ffffff;

    }

    .modal-text h2{

    font-size: 24px;

    font-weight: 600;

    font-family: Lato;

    }

    .modal-text p{

    font-size: 17px;

    margin-top: -15px;

    margin-bottom: 50px;

    font-family: Lato;

    }

    .modal-footer{

    padding: 20px 10px;

    color: rgba(255, 255, 255, 0.5);

    width: auto;

    margin:-15px;

    }

    input[type=text].modal-input{

    color: rgba(0, 0, 0, 0.5);

    width:80%;

    background: rgb(255, 255, 255);

    border: none;

    border-radius: 3px;

    outline: rgba(0, 0, 0, 0.5) none 0px;

    padding: 15px;

    }

    .naamjaptab-content.popforms form input[type=button],

    form.userdetails input[type=button]{

            padding: 14px;

            font-size: 18px;

            background-color: #3bb4f5;

            color: #ffffff;

            width: auto;

            border: none;

            cursor: pointer;

            height: 44px;

            border-radius: 0;

    }

    #clearButton {
        cursor: pointer;
    text-decoration: none;

    font-size: 12px;

    background: #000;

    color: #fff;

    padding: 4px 5px 1px;

    line-height: 1.2;

    }

    .btn{

        background: #333;

        border: 1px solid;

        padding: 8px 15px;

        color: #fff;

        text-decoration: none;

        cursor: pointer;

        font-size: 15px;

    }

    .logo{

    max-width: 90px;

    width: 100%;

    height: 100%;

    }

    .footer-container {

        text-align: center;

        font-family: "Poppins", sans-serif;

        margin-top:25px;

        display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    }

    .support a {

        color: #362c4f;

        font-size: 15px;

    }

    .share-buttons--list a {

       text-decoration: none;

    }

    .share-buttons--list {

        display: flex;

        align-items: center;

        justify-content: center;

    }

    .share-buttons--list p{

        font-size: 14px;

    }

    input#repetitionCount, .jaapnamlist {

    flex: 1;

    }

    .content-details h1{

        font-family: 'Poppins';

    font-weight: 600;

    font-size: 23px;

    }

    .content-details p{

     font-family: 'Poppins';   

    }

    div#message {

        color: #212121;

    }
    .slidingversions .swiper-slide:not(.swiper-slide-active){
        scale: 0.85;
    }
    .slidingversions .swiper-slide.swiper-slide-active{
        scale: 1.2;
    }
    .p-0{padding:0 !important;}
    .post-container{margin:60px 0;}
    .all-posts{display: flex;
    width: 100%;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 4%;}
    .all-posts .post{
    width: 30%;
    background: #fff;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 1px 0px 4px 6px #99999912;
    margin-bottom: 25px;
    }
    .all-posts .post img{width:100%;max-width:100%;}
    .all-posts .post .postdetail{ padding: 12px;}
    .all-posts .post .postdetail .more-link{display: flex;
    flex-direction: column;
    gap: 7px;}
    .all-posts .post .postdetail h4{  margin: 0;font-size:22px;}
    .jaap-tables{width:100%;}
    .jaap-tables h2 {text-align: center;}
    .jaap-tables table{margin-bottom: 30px;width:100%;background: #fdfdfd;}
    .jaap-tables table td { font-size: 18px;}
    .jaap-tables table th { background: #6b6b6b; color: #fff;}
    .jaap-tables table td {font-size: 16px;}
    
    /* Video playing popup view start here*/
    .video-popup {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        
        /* Video container */
        .video-content {
            position: relative;
            width: 80%;
            max-width: 600px;
            background: #fff;
            padding: 10px;
            border-radius: 8px;
            text-align: center;
        }

        /* Close button */
        .close-btn {
    position: absolute;
    top: -16px;
    right: -8px;
    background: red;
    color: white;
    border: none;
    padding: 3px 9px;
    cursor: pointer;
    font-size: 23px;
    border-radius: 50%;
    z-index: 99;
}

        /* Video styling */
        video {
            width: 100%;
            border-radius: 5px;
        }
    .full-cent{
        display: block;
    margin: 0 auto;
    text-align: center;
    width: 130px;
    border-radius:3px;
    }
    /* Video playing popup view end here*/
    .detail-desc p {
    font-family: 'Tiro Devanagari Hindi';
    font-size: 11px;
    line-height: 2;
    font-weight: 400;
}
    @media screen and (max-width: 768px) {
        body{ padding-top: 50px;}
        .slidingversions #ramBoxContainer{height: 320px;}
        a.btn.fixd-btn.yt-btn{top: 70% !important;right: -135px !important;}
        .all-posts .post{width: 48%}
        .post-container{ padding: 0 15px !important;}
        .fieldsinputs{

           flex-direction: column;

        }
        .naamjaptab-content.popforms form input, form.userdetails input{
                height: 45px !important;
        }
    .modal-content{width: 90%;padding: 10px;}
        .content-details {

            padding: 0 15px;

        }

        .footer-container{

            flex-direction: column;

        }

        input#repetitionCount, .jaapnamlist,

        .countnamly input{

            text-align: center;

        }

        .jaapnamlist {

            width: 90%;

            margin: 0 auto;

        }

        .container {

            max-width: 100%;

            width: 100%;

            margin: 10px auto;

        }

        .countnamly {

    flex-direction: column;

    margin-top: 20px;

}

.main-details{

    justify-content: space-around;

    align-items: flex-start;

}

#ramBoxContainer{

    margin:0;

    padding: 0 10px;

}

.box{

    flex: 0 0 25%;

    font-size: 30px;

}

.box span {

    font-size: 24px;

    bottom: -10px;

    right: 0;
    opacity: 0.1;
    top: unset;

}

.box b{

    left: 5%;
    opacity: 0.1;
    top: 4px;

}

.hindi-regular{

    font-size: 19px;

}

.actionsjap{

    justify-content: space-between;

    gap: 10px;

    width: 90%;

}

    }

    @media screen and (max-width: 520px) {
    .main-details .logo { max-width: 100px;}
        .jaapnamlist ul li{

           padding: 4px 9px;

           font-size: 21px;

        }
        .slidingversions .swiper-slide.swiper-slide-active{scale: 1;}
        .jaapnamlist {

    width: 100%;

        }
        
        .slidingversions #ramBoxContainer{
            height: 230px;
            
        }

        .slidingversions .box {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 130px;
            font-size: 26px;
        }
        .tab-list{width:100% !important;}
        .tab-list .leftoption{display: flex;flex-wrap: wrap;}
        .tab-list .leftoption .tablinks{ width:100%;padding: 10px;margin: 2%;font-size: 17px;}
        .tab-list .leftoption .tab button{padding: 6px; width: 40%;}
        .account-details{flex-direction: column-reverse;gap: 20px;}
        .tabcontent{width:100% !important;padding: 0px 2px !important;}
        .tabcontent table th{font-size: 16px !important;padding: 5px !important;}
        .tabcontent table td{font-size: 15px !important;padding: 5px !important;}
        div#thirdTab { text-align: center;}
        form.userdetails{align-items: center;}
    }

    @media screen and (max-width: 27em) {

    input[type=text].modal-input{

    width:90%;

    margin-bottom: 0px;

    }

    input[type=submit].modal-submit-btn{

    width:90%;

    }

    .modal-text p{

    font-size: 15px;

    }

    }

/* Modal for login register start here */



/* Tabs login/register start here */



[data-tab-content] {

    display: none;

  }

  

  .active[data-tab-content] {

    display: block;

  }



  .naamjaptabs {

    display: flex;

    justify-content: space-around;

    list-style-type: none;

    padding: 0;

    border-bottom: 1px solid #000;

    width: 100%;

  }

  

  .naamjaptab {

    cursor: pointer;

    padding: 10px;

    color: #fff;

    border: 1px solid #333;

    margin-bottom: 15px;

    width: 100%;

    background: #000;

  }

  

  .naamjaptab.active {

    background-color: #087fe1;

  }

  

  .naamjaptab:hover {

    background-color: #087fe1;

  }

  .naamjaptab-content.popforms form input[type="submit"],

  form.userdetails input[type="submit"],

  form.userdetails input[type="submit"]:hover,

  .naamjaptab-content.popforms form input[type="submit"]:hover {

    background-color:#087fe1 !important;

    color: #fff;

    height: 50px;

    font-size: 16px;

    cursor: pointer;

    border-color: unset;

  }

  .naamjaptab-content {

    margin-left: 20px;

    margin-right: 20px;

  }  

/* Tabs login/register end here */



/* Login/ Register form start here */

.naamjaptab-content.popforms form {

    display: flex;

    flex-direction: column;

    width: 85%;

    margin: 0 auto;

    gap: 15px;

    width: 100%;

    margin-bottom: 15px;

}

.naamjaptab-content.popforms form input,

form.userdetails input{

    height: 31px;

    padding: 8px;

    background-color: #fff;

    border: 1px solid #333;

}

form.userdetails {

    display: flex;

    flex-direction: column;

}

/* Standard placeholder */

::placeholder {

    font-size:15px;

    color:#212121;

}



/* WebKit browsers */

::-webkit-input-placeholder {

    font-size:15px;

    color:#212121;

}



/* Mozilla Firefox */

::-moz-placeholder {

    font-size:15px;

    color:#212121;

}



/* Internet Explorer 10-11 */

:-ms-input-placeholder {

    font-size:15px;

    color:#212121;

}



/* Microsoft Edge */

::-ms-input-placeholder {

    font-size:15px;

    color:#212121;

}



form.userdetails input{width:80%;margin-bottom: 20px;}

.naamjaptab-content.popforms form input:focus,

.naamjaptab-content.popforms form input:focus-visible,

.naamjaptab-content.popforms form input:hover,

.naamjaptab-content.popforms form input:active,

.naamjaptab-content.popforms form input:-internal-autofill-selected{

    background-color: #fff !important;

    outline: 0;

}

/* Login/ Register form start here */



/*Contact form detail start here */

.contact-container {

	max-width:400px;

	width:100%;

	margin:0 auto;

	position:relative;

}



#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] { font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; }



#contact {

	background:#F9F9F9;

	padding:25px;

	width: 100%;

}



#contact h3 {

color: #F96;

    display: block;

    font-family: "Poppins", sans-serif;

    font-size: 20px;

    font-weight: 400;

    margin: 0;

    text-align: center;

}



#contact h2 {

	margin: 0px 0 15px;

    font-family: "Poppins", sans-serif;

    display: block;

    font-size: 22px;

    font-weight: 500;

     text-align: center;

}



fieldset {

	border: medium none !important;

	margin: 0 0 10px;

	min-width: 100%;

	padding: 0;

	width: 100%;

	display: flex;

}



#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {

	width:100%;

	border:1px solid #CCC;

	background:#FFF;

	font-family: "Poppins", sans-serif;

	margin:0 0 5px;

	padding:10px;

}



#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {

	-webkit-transition:border-color 0.3s ease-in-out;

	-moz-transition:border-color 0.3s ease-in-out;

	transition:border-color 0.3s ease-in-out;

	border:1px solid #AAA;

}



#contact textarea {

	height:100px;

	font-family: "Poppins", sans-serif;

	max-width:100%;

  resize:none;

}



#contact button[type="submit"] {

	cursor:pointer;

	width:100%;

	border:none;

	background:#0CF;

	font-family: "Poppins", sans-serif;

	color:#FFF;

	margin:0 0 5px;

	padding:10px;

	font-size:15px;

}



#contact button[type="submit"]:hover {

	background:#09C;

	-webkit-transition:background 0.3s ease-in-out;

	-moz-transition:background 0.3s ease-in-out;

	transition:background-color 0.3s ease-in-out;

}



#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }



#contact input:focus, #contact textarea:focus {

	outline:0;

	border:1px solid #999;

}

::-webkit-input-placeholder {

 color:#888;

 font-family: "Poppins", sans-serif;

}

:-moz-placeholder {

 color:#888;

}

::-moz-placeholder {

 color:#888;

}

:-ms-input-placeholder {

 color:#888;

}

/* Contact form details end here */



/* User Dashboard account page start here*/

.tab {
    border: 1px solid #ccc;
    background-color: #dfe8eb;
    width: 30%;
    border-radius: 10px 0 0 10px;
  }

  a#njlogout {
    text-align: center;
    font-weight: 500;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

  .tab-list{

    display: flex;

    flex-direction: column;

    justify-content: space-between;}

  .tab button {

    display: block;

    background-color: inherit;

    color: black;

    padding: 22px 16px;

    width: 90%;

    border: none;

    outline: none;

    text-align: left;

    cursor: pointer;

    transition: 0.3s;

    font-size: 17px;

    margin: 5%;

    border-radius: 4px;

  }

  

  .tab button:hover {

    background-color: #bee9f7;

  }

  

  .tab button.active {

    background-color: #2a5d84;

    color: #fff;

  }

  

  .tabcontent {

    padding: 0px 20px;

    border: 1px solid #ccc;

    width: 70%;

    min-height: 400px;

    border-radius: 0 10px 10px 0;

  }

  .account-details {

    display: flex;

    align-items: flex-start;

    justify-content: center;

}

.tabcontent table {

    width: 100%;

    border: 1px solid #ccc;

    border-radius: 3px;

    padding: 6px;

}

table tr th:first-child{width:33.3%;}

table tr th:last-child{width:33.3%;}

table, th, td {

    border: 1px solid #ccc;

    border-collapse: collapse;

    padding: 10px;

    text-align: center;

    word-wrap: break-word;

  }
.tabcontent table td a { text-decoration: none;}
textarea.edittitle, textarea.addjaap {width: 90%;height: 100px;padding: 9px;}

.custrow{display:flex;align-items:center;justify-content:space-between;}

.custrow{flex:1;}

.tabcontent table th{font-size: 21px;border-bottom: 1px solid #ccc;}

.action-btn{display: flex;align-items:center;justify-content:center;gap:5px;}

.action-btn span{cursor: pointer;}
.fixd-btn{position: fixed;right: -32px;transform: rotate(90deg);top: 85%;z-index:99;}
a.btn.fixd-btn.yt-btn {right: -135px; top: 40%;padding: 0px 15px 6px 15px;animation: inout 1s ease infinite;}
@keyframes inout {
                0% {
                    -webkit-box-shadow: 0 0 0 0px rgb(247 100 0 / 50%);
    -moz-box-shadow: 0 0 0 0px rgb(247 100 0 / 50%);
    box-shadow: 0 0 0 0px rgb(247 100 0 / 50%);
                }

                100% {
                    -webkit-box-shadow: 0 0 0 10px rgb(247 100 0 / 10%);
                    -moz-box-shadow: 0 0 0 10px rgb(247 100 0 / 10%);
                    box-shadow: 0 0 0 10px rgb(247 100 0 / 10%);
                }
            }
.m-0{margin:0;}.mt-5{margin-top: 5rem;}
.tabcontent table tr th, table.naamjaplist tr th{background: #2a5d84f2;color: #fff;}
.tabcontent table tr:nth-child(odd),
table.naamjaplist tr:nth-child(odd){ background: #ffffff8c;}
  /* User Dashboard account page end here*/