@import "misc.css";
@import "main.css";
@import "color-scheme.css";
@import "responsive.css";

.counter img {
    width: 164px;
}

#moreContent {
    display: none;
}
.read-more-btn {
    text-align: center;
    border: 1px solid #003a6a;
    padding: 8px 12px;
    background-color: #003a6a;
    color: #fff;
    text-transform: capitalize;
    font-weight: normal;
    border-radius: 5px;
    cursor: pointer;
    float: right;
}

a {
    text-decoration: none !important;
}

.welcome-box p {
    text-align: justify;
}

body {
    position: relative;
    z-index: 1;
}

/* body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("/demo/newlife_site/images/circle-logo.png") center center no-repeat;
    background-size: contain;
    opacity: 0.05; 
    pointer-events: none;
    z-index: 0;
} */

/* About Page */

.about-image img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.about-image h2 {
    position: absolute;
    color: #fff;
}

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

/* Books */

.books-inner img {
    width: 100%;
    height: 300px;
    border-radius: 5px;
    transition: 0.3s ease-in-out;
    object-fit: cover;
    object-position: top;
}

.books-inner {
    /* display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px; */
    /* background-image: url(images/frame.png);
    padding: 50px;
    background-size: 100% 100%;
    background-repeat: no-repeat; */
}

.books-inner a {
    background-color: #004884;
    color: #fff;
    width: 100%;
    margin-top: 10px;
    /* border: 1px solid #ffffff; */
}

.books-inner .yellow {
    background-color: #fdc425;
}

.books-inner:hover img {
    transform: scale(1.02);
    transition: 0.3s ease-in-out;
}

.books-inner a:hover {
    color: #fff;
}

.books-inner .box {
    /* border: 4px solid #004884; */
    /* padding: 20px; */
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding: 15px;
    border-radius: 5px;
    transition: 0.3s ease-in-out;
}

/* .books-inner .box:hover{  
  transition: 0.3s ease-in-out;
  box-shadow: rgb(19 67 167) 0px 3px 8px;
} */

.books-inner:hover .box {
    box-shadow: rgb(19 67 167) 0px 3px 8px;
    transition: 0.3s ease-in-out;
}

.table tr td {
    width: 28%;
    align-content: center;
    border-top: 1px solid #004884 !important;
    border-bottom: 1px solid #004884;
}

.table td {
    border-left: 1px solid #004884;
}

.table tr > td:first-child {
    border-left: none !important;
    align-content: center;
}

.audio_teaching .table tr > td:nth-child(2) {
    border-right: none !important;
    text-align: center;
}
.audioQuestionsandAnswers .table tr > td:nth-child(2),
.QuestionsandAnswers .table tr > td:nth-child(2) {
    border-right: none !important;
}

.table tr > td:nth-child(3) {
    text-align: right;
    align-content: center;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

tr:hover {
    background-color: #f2f2f2;
}

.table tr th {
    background-color: #004884;
}

.table tr th h3 .urdu {
    font-size: 20px;
}

.audio_teaching .table tr th h3 {
    color: #fff;
}

.urdu {
    font-family: "Noto Nastaliq Urdu", serif;
    direction: rtl;
}

.QuestionsandAnswers h2 .urdu,
.audioQuestionsandAnswers h2 .urdu {
    font-size: 24px;
}

.QuestionsandAnswers table td,
.audioQuestionsandAnswers table td {
    padding: 15px 8px 15px 0px !important;
}

.audioQuestionsandAnswers tr td:first-child {
    width: 30%;
}

.QuestionsandAnswers{
    letter-spacing: normal;
        text-align: justify;
}

.albums .box img {
    width: 100%;
    transition: 0.3s ease-in-out;
    height: 170px;
    border-radius: 5px;
    object-fit: cover;
}

.albums .box:hover img {
    transform: scale(1.03);
    transition: 0.3s ease-in-out;
}

.albums .box:hover {
    transition: 0.3s ease-in-out;
    box-shadow: rgb(19 67 167) 0px 3px 8px;
}

.albums .box h4 {
    color: #fff;
    background-color: #004884;
    padding: 10px 0;
    margin-bottom: 0px;
    border-radius: 5px;
}

.albums .box {
    /* margin: 10px; */
    padding: 10px;
    transition: 0.3s ease-in-out;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.albums .box h4 {
    font-size: 16px;
}

.albums .box,
.books-inner {
    margin-bottom: 30px;
}

.books > div {
    gap: 18px;
}

/* play video teaching */
.playlist {
    width: 30%;
    background-color: #004884;
    padding: 20px;
    overflow-y: auto;
    border-right: 1px solid #ddd;
}

.playlist h2 {
    margin-top: 0;
    color: #fff;
}

.playlist ul {
    list-style: none;
    padding: 0;
}

.playlist li {
    color: #fff;
    /* padding: 10px; */
    cursor: pointer;
    border-bottom: 1px solid #ccc;
    transition: background-color 0.3s;
}

.playlist li:hover {
    background-color: #ddd;
    color: #000;
}

.video-player {
    flex: 1;
    /* background-color: #000; */
}

.chapter {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #ccc;
    position: relative;
}

.chapter:hover {
    background-color: #ddd;
}

.chapter-title {
    cursor: pointer;
    padding: 10px;
    /* background-color: #f0f0f0; */
    /* border-bottom: 1px solid #ccc; */
}

.chapter.active { background-color: #f0f0f0; font-weight: bold; color: #004884;}


.verses {
    display: none;
    padding-left: 15px;
    background-color: #eaeaea;
}

.verses li {
    color: #000;
    padding: 8px;
    cursor: pointer;
    border-bottom: 1px solid #bbb;
}

.verses li:hover {
    background-color: #d0d0d0;
}

.table .accordion-header {
    background-color: #f2f2f2;
    cursor: pointer;
}

.accordion-content {
    display: none;
}

.accordion-content.show {
    display: table-row-group;
}

/* .testimonial_box p {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    padding: 15px;
    margin: 0px;
}

.testimonial_box {
    margin: 30px auto;
} */

.taught .box,
.testimonial_box p {
    background-color: #fff;
    margin: 10px 0;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
}

.taught .box:hover,
.testimonial_box p:hover {
    transform: scale(1.01);
    background-color: #003a6a;
    color: #fff;
    transition: 0.2s ease-in-out;
}

.invite form {
    max-width: 600px;
    margin: auto;
}
.invite input,
.invite textarea,
.invite select {
    width: 100%;
    padding: 10px;
    margin-bottom: 12px;
    border: 1px #c9c9c9 solid;
    border-radius: 6px;
}
.invite label {
    font-weight: bold;
}
.invite button {
    padding: 10px 20px;
    background-color: #000;
    color: #fff;
    border-radius: 6px;
    width: 100%;
}


.gallery-grid img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    object-position: top;
    margin-bottom: 26px;
}