*,
body {
    font-family: default-regular, sans-serif
}

body h1,
body h2 {
    font-family: default-bold
}

#bg-layer,
#s-hover,
#seek-bar {
    bottom: 0;
    left: 0
}

#album-name,
#buffer-box,
.cust-side-bar .cust-sidebar-btn a.btn-green span.bold,
.cust-side-bar .cust-sidebar-btn a.btn-orange div {
    font-weight: 700
}

#current-time,
.control {
    float: left
}

#buffer-box,
*,
.button i {
    line-height: 1
}

@font-face {
    font-family: urdu-regular;
    src: url('../fonts/NotoNastaliqUrdu-Regular.ttf') format('truetype');
    font-display: swap
}

@font-face {
    font-family: urdu-medium;
    src: url('../fonts/NotoNastaliqUrdu-Medium.ttf')
}

@font-face {
    font-family: urdu-semi-bold;
    src: url('../fonts/NotoNastaliqUrdu-SemiBold.ttf')
}

@font-face {
    font-family: urdu-bold;
    src: url('../fonts/NotoNastaliqUrdu-Bold.ttf')
}

@font-face {
    font-family: default-regular;
    src: url('../fonts/sf-pro-display/SFPRODISPLAYREGULAR.OTF');
    font-display: swap
}

@font-face {
    font-family: default-medium;
    src: url('../fonts/sf-pro-display/SFPRODISPLAYMEDIUM.OTF')
}

@font-face {
    font-family: default-bold;
    src: url('../fonts/sf-pro-display/SFPRODISPLAYBOLD.OTF')
}

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

body {
    background-color: var(--bg-white)
}

body.urdu {
    font-family: urdu-regular, default-regualr
}

body h1 {
    font-size: 32px
}

body h2 {
    font-size: 24px
}

body h3,
body h4 {
    font-family: default-medium
}

body h3 {
    font-size: 20px
}

body h4 {
    font-size: 18px
}

body :is(h5, h6, p, a, span, div, button) {
    font-size: 16px;
    font-family: default-regular
}

body.urdu h1,
body.urdu h2,
body.urdu h3,
body.urdu h4 {
    font-family: urdu-semi-bold;
    line-height: 2
}

body.urdu h5,
body.urdu h6 {
    font-family: urdu-medium;
    line-height: 2
}

#searchComponent.font-urdu *,
.font-urdu,
.form-urdu *,
body.urdu .cust-book-listing-card p span,
body.urdu marquee.marquee,
body.urdu p {
    font-family: urdu-regular
}

.default-font {
    font-family: 'default-regular';
}

body.urdu p {
    font-size: 14px;
    line-height: 2
}

:root {
    --bg-primary: #b6eddd;
    --bg-secondary: #f1f1f2;
    --text-primary: #171717;
    --text-secondary: #f4f4f4;
    --bg-white: #ffffff;
    --bg-body: #F6F6F6;
    --bg-grey: #f2f2f2;
    --bg-orange: #d7624c;
    --bg-light-grey: #e5e7eb;
    --bg-light-orange: #fae6e3;
    --text-primary: rgba(10, 91, 60, 1);
    --text-secondary: rgba(10, 91, 60, .50);
    --text-dark: #1d1d1d;
    --text-white: #fefdfd;
    --text-gery: #4e4e4e;
    --text-light-gray: #A2A2A2;
    --text-orange: #D7624C;
    --swiper-theme-color: var(--bg-orange);
    --border-radius-sm: 0.125rem;
    --border-radius-md: 0.375rem;
    --border-radius-lg: 0.5rem;
    --border-radius-xl: 0.75rem;
    --border-radius-2xl: 1rem
}

.primary-shadow {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition: box-shadow .5s ease-out
}

.gradient-listing a,
.saturated-hover {
    transition: .5s ease-out;
    filter: saturate(.5)
}

.primary-shadow:hover {
    box-shadow: 0 10px 30px -10px #d8634b40 !important;
    transition: box-shadow .5s ease-out
}

.primary-shadow.active {
    box-shadow: 0 10px 30px -10px #d8634b40
}

.cust-bg-primary {
    background-color: var(--bg-orange)
}

.bg-primary {
    background-color: var(--bg-primary)
}

#player-track,
.bg-secondary {
    background-color: var(--bg-secondary)
}

.text-primary {
    color: var(--text-primary)
}

.book-part.active span.book-title,
.cust-book-listing-card p span,
.cust-text-primary,
.cust-very-important,
.slider-right .cust-inner-slide .content h3 {
    color: var(--text-orange)
}

.cust-bg-grey {
    background-color: var(--bg-grey)
}

.bg-light-orange {
    background-color: var(--bg-light-orange)
}

.cust-very-important {
    font-size: 24px;
    vertical-align: middle
}

.page-link {
    color: var(--text-dark);
    background-color: var(--bg-grey);
    border: var(--bs-pagination-border-width) solid var(--bg-white)
}

.fancybox__nav .fancybox__button--next,
.fancybox__nav .fancybox__button--prev {
    transform: rotate(180deg)
}

.form-urdu * {
    margin-bottom: 1rem;
    line-height: 2.2
}

.cust-contact-form label {
    font-size: 16px;
    color: var(--text-dark)
}

.cust-contact-form input:focus,
.cust-contact-form textarea:focus,
.cust-contact-form select:focus {
    --tw-ring-color: #d7624c !important;
    --tw-ring-offset-color: #d7624c !important;
    border-color: #d7624c !important;
}

.cust-contact-form select:focus {
    --tw-ring-color: #d7624c;
    --tw-ring-offset-color: #d7624c;
    border-color: #d7624c;
}

.cust-contact-form select option {
    background-color: #ffffff !important;
    color: #000000 !important;
}

.cust-contact-form .urdu-type-enable {
    height: 100% !important;
}

.active>.page-link,
.page-link.active {
    z-index: 3;
    color: var(--text-white);
    background-color: var(--bg-orange);
    border-color: var(--bg-orange)
}

.cust-container {
    max-width: 1300px;
    margin: auto;
    height: 100%
}

.custom-swiper-btn {
    width: 1.25rem;
    height: 1.25rem
}

.swiper,
.top-head {
    width: 100%
}

.custom-swiper-btn::after {
    font-size: 1.7rem !important
}

.swiper-slide-thumb-active {
    border: 2px solid var(--bg-orange)
}

.align-center,
.f-carousel__counter {
    align-items: center
}

.cust-row {
    display: flex;
    flex-wrap: wrap
}

.cust-middle-section .cust-row,
.justify-between {
    justify-content: space-between
}

.justify-center {
    justify-content: center
}

.top-head {
    background: var(--bg-white);
    height: 165px
}

#album-art img,
#player,
.swiper,
.top-head .cust-row,
.top-head .logo {
    height: 100%
}

select {
    padding-right: 20px !important;
    background-position: right 0 center !important;
}

.top-head .cust-row div {
    min-width: 1px;
    min-height: 1px
}

.top-head .title-img {
    width: auto
}

.top-head .logo {
    /* width: 100px; */
    display: flex;
    align-items: center
}

.top-head .logo img {
    width: 135px;
    height: auto
}

.top-head .cust-row .title-img {
    text-align: center;
    width: auto;
    max-width: 300px;
}

header nav {
    padding: 16px 0;
    position: relative;
    z-index: 20
}

.font-urdu {
    line-height: 30px !important;
    word-spacing: 2px
}

.gradient-listing a {
    border: 1px solid transparent;
    border-bottom-color: #e5e7eb93
}

.gradient-listing a:hover,
.saturated-hover:hover {
    filter: none;
    transition: .5s ease-in
}

#scrollToTopBtn {
    box-shadow: 0 0 30px 0 #00000040
}

#scrollToTopBtn:hover {
    box-shadow: 0 0 30px 10px #d8634b40 !important
}

.inner-page-button-urdu-font {
    font-size: 16px;
    line-height: 30px !important
}

marquee.marquee {
    line-height: 1.5;
    /* height: 46px; */
    letter-spacing: 1px;

}

body.urdu marquee.marquee {
    line-height: 2;
    height: 46px
}

.cust-menu-items.active {
    background: #fae6e3;
    border-color: #d7624c;
    color: #d7624c
}

.chips .chip,
.chips h5 {
    letter-spacing: 1px
}

body.urdu .chips .chip {
    font-size: 16px !important;
    font-weight: 300 !important;
    font-family: urdu-regular !important;
    line-height: 30px !important;
    padding: 2px 14px 6px
}

.cust-slider-container h2 {
    color: var(--text-dark);
    margin: 10px 0 20px
}

.cust-slider-container h2.urdu,
.slider-right .cust-inner-slide.urdu-text .content {
    text-align: right
}

.cust-slider-container .cust-row .slider-left,
.cust-slider-container .cust-row .slider-right {
    width: calc(90% / 2)
}

.cust-slider-container .slider-left .swiper {
    padding-bottom: 40px;
    padding-right: 10px;
    overflow-x: clip;
    overflow-y: visible
}

.cust-slider-container .slider-left .swiper-slide-active {
    transform: scale(1.1);
    transition: transform .3s ease-in-out
}

.swiper-slide {
    text-align: center;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center
}

.mySwiper-left .swiper-slide img {
    width: 126px;
    object-fit: cover;
    box-shadow: 8px 8px 8px #0000003D
}

.swiper-pagination-bullet-active {
    width: 30px;
    background: var(--bg-orange);
    border-radius: 12px
}

.slider-right .cust-inner-slide {
    width: 100%;
    height: 190px;
    background-color: var(--bg-grey);
    padding: 10px 30px;
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center
}

.slider-right .swiper-button-next {
    right: 2px;
}

.slider-right .swiper-button-prev {
    left: 2px;
}

.slider-right .cust-inner-slide.urdu-text {
    flex-direction: row
}

.slider-right .cust-inner-slide .content {
    width: 65%;
    text-align: left;
    margin: 0 15px
}

.slider-right .cust-inner-slide .image {
    width: 35%;
}

.slider-right .cust-inner-slide .content:hover {
    color: var(--text-dark);
    text-decoration: none
}

.slider-right .cust-inner-slide .content:hover h3 {
    text-decoration: underline
}

.slider-right .cust-inner-slide .content p {
    margin-top: 10px;
    letter-spacing: .6px;
    line-height: 1.2;

}

.slider-right .cust-inner-slide.urdu-text .content p {
    line-height: 2;
}

.slider-right .cust-inner-slide .image img {
    width: 160px
}

.swiper.mySwiper-right {
    margin: 30px auto
}

.swiper.mySwiper-right .swiper-wrapper {
    padding: 20px 0
}
.f-caption {
    background: var(--bg-light-orange);
    text-align: center;
    margin-right: 2px;
}
/* .f-caption {
    width: 132px;
    height: 43px;
    text-align: center;
    padding: 0;
    position: absolute;
    border-radius: 99px;
    bottom: 10.3vh;
    left: 50%;
    transform: translateX(-139%);
    cursor: pointer !important;
    z-index: 1;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    box-shadow: 0 0 0 rgba(215, 98, 76, 0.7);
    animation: pulseShadow 1.5s infinite;
}

@keyframes pulseShadow {
    0% {
        box-shadow: 0 0 0 0 rgba(215, 98, 76, 0.7);
    }

    70% {
        box-shadow: 0 0 20px 15px rgba(215, 98, 76, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(215, 98, 76, 0);
    }
} */


/*
.f-caption a {
    width: 149%;
    position: absolute;
    left: 120%;
    top: 38%;

}

.f-caption a::before {
    content: '';
    width: 30px;
    height: 30px;
    display: block;
    position: absolute;
    left: -10%;
    top: -50%;
    background-image: url('../images/aqwal-reference.png');
    background-position: center;
    background-repeat: no-repeat;
} */
.whitespace-wrap {
        white-space: break-spaces;
        padding-bottom: 40px;
}
.cust-pagination {
    position: sticky;
    top: -1px;
    background: #f2f2f2;
    border-radius: 10px;
    margin-bottom: 25px;
    padding: 15px 20px;
    box-shadow: 0 10px 10px #5e5c5c4a;
    z-index: 1
}

#show-tag-cloud {
    width: 38px;
    display: none
}

#show-tag-cloud svg {
    width: 100%;
    height: auto
}

.arrow {
    border: solid #000;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    margin-bottom: 3px
}

#ins-time,
.backdrop,
.cust-close,
.ham-burger {
    display: none
}

.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg)
}

.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg)
}

.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg)
}

.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}

.backdrop {
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 2;
    background: rgba(4, 4, 4, .577);
    top: 0;
    left: 0
}

.backdrop.active,
.cust-search-bar.search-urdu .keyboard-icon {
    display: block
}

.all-active-book-links ul {
    list-style: none;
    margin-top: 50px
}

.all-active-book-links ul li {
    margin-bottom: 15px;
    padding: 5px;
    background: #d7624c;
    color: #fefdfd
}

.cust-category ul,
.cust-category ul li,
.cust-middle-section {
    background-color: var(--bg-white)
}

.all-active-book-links ul a {
    text-decoration: none;
    color: #fefdfd
}

.book-detail {
    text-align: center
}

.book-detail h2 {
    color: var(--bg-orange)
}

.align-start {
    align-items: flex-start
}

.language-selector-container {
    display: flex;
    justify-content: flex-end
}

#language_selecor {
    background: #f2f2f2;
    padding: 15px;
    display: inline-block;
    margin-left: auto
}

#language_selecor select {
    background: 0 0;
    border: none;
    cursor: pointer;
    padding-right: 10px
}

.cust-categories,
.cust-category {
    background: var(--bg-white);
    border-radius: var(--border-radius-md)
}

#language_selecor select:focus-visible {
    outline: 0;
    justify-content: space-between
}

.cust-categories {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 20px;
    margin: 30px auto;
    box-shadow: 0 3px 13px 0 #0000002e
}

.cust-category {
    width: 30%;
    margin: 15px auto 20px;
    box-shadow: 0 0 14px 0 #00000014;
    height: 400px;
    padding: 15px 0
}

.cust-category h4 {
    margin-bottom: 20px;
    text-align: center
}

.cust-category ul {
    list-style: none;
    padding-left: 20px
}

.cust-category ul.parent {
    height: 320px;
    overflow-y: auto;
    padding-left: 0
}

.cust-category ul li {
    padding: 8px 16px
}

.cust-category ul li a {
    border-bottom: 1px solid var(--bg-grey);
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #1d1d1d
}

.cust-category ul.parent ul li a:nth-last-child() {
    border: none
}

#ins-time,
#s-area,
#seek-bar {
    border-radius: var(--border-radius-sm)
}

.cust-category ul img {
    width: 20px;
    height: 35px;
    object-fit: cover;
    margin-right: 20px
}

.cust-middle-section {
    margin: 0 auto
}

.cust-reasearch-section {
    /* width: 69%; */
    border-radius: var(--border-radius-md);
    overflow: hidden;
    position: relative
}

.cust-reasearch-section .section-title {
    text-align: center;
    margin-bottom: 1px;
    padding: 12px 0;
    display: block;
    position: relative;
    z-index: 2
}

#bg-artwork,
#player-track {
    position: absolute;
    z-index: 1
}

#loading-indicator {
    height: calc(100% - 74px);
}

.cust-reasearch-section::after {
    content: '';
    display: block;
    width: 100%;
    height: 200px;
    background: linear-gradient(180deg, rgb(250 230 227) 0, rgba(255, 255, 255, 0) 100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

.cust-reasearch-section .section-heading {
    padding: 24px 16px;
    width: 100%;
    position: relative;
    z-index: 2
}

.cust-book-listing-card.cust-col-4,
.cust-book-listing-card.cust-col-6 {
    background: var(--bg-white) 0 0 no-repeat padding-box;
    box-shadow: 0 3px 15px #00000014;
    padding: 16px 0;
    border-radius: var(--border-radius-md)
}

body .cust-reasearch-section .section-heading h3 {
    color: var(--text-dark);
    line-height: 1.5;
    text-align: center;
    max-width: calc(100% - 200px);
    margin: auto;
    font-size: 16px
}

body.urdu .cust-reasearch-section .section-heading h3 {
    font-size: 16px;
    font-family: urdu-medium;
    color: var(--text-dark);
    line-height: 2.5;
    text-align: center;
    max-width: 545px;
    margin: auto
}

.cust-reasearch-section .cust-row {
    border-bottom-left-radius: var(--border-radius-md);
    border-bottom-right-radius: var(--border-radius-md)
}

.cust-book-listing-card.cust-col-4 {
    width: clamp(280px, 32.5%, 400px)
}

.cust-book-listing-card.cust-col-6 {
    width: clamp(280px, 50%, 420px);
    margin-bottom: 15px
}

#bg-layer,
#current-time,
#s-area,
#track-length,
.cust-audio-section .audio-player,
.cust-book-listing-card ul li {
    background-color: var(--bg-white)
}

#bg-artwork,
.cust-search-bar .keyboard-icon,
.cust-sidebar-list-container ul li .right-arrow {
    background-size: cover;
    background-repeat: no-repeat
}

.chips-slider .swiper-slide {
    width: auto !important;
    flex-shrink: 0
}

.cust-book-listing-card.urdu,
.cust-search-bar.search-urdu #resultsDropdown,
.cust-search-bar.search-urdu .result,
.cust-sidebar-list-container.urdu,
.direction-rtl,
.nav-urdu,
.rtl,
body.urdu .cust-side-bar .cust-sidebar-btn a {
    direction: rtl
}

.cust-col-4.cust-book-listing-card h4 {
    margin-bottom: 24px
}

.cust-book-listing-card h4 {
    margin-bottom: 16px;
    padding: 0 16px
}

body.urdu .cust-book-listing-card h4 {
    font-size: 15px;
    font-family: urdu-medium
}

.cust-book-listing-card h5 {
    padding: 0 16px;
    color: var(--text-orange);
    margin-bottom: 8px
}

.cust-book-listing-card p {
    font-size: 14px;
    color: var(--text-light-gray);
    margin-bottom: 8px;
    padding: 0 16px
}

.cust-book-listing-card ul {
    list-style: none;
    background: var(--bg-grey);
    margin-bottom: 10px
}

.cust-book-listing-card ul li {
    margin-bottom: 1px;
    padding: 9px 8px 9px 16px
}

.cust-book-listing-card ul li a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--text-dark)
}

.cust-book-listing-card ul li a span.book-thumb {
    width: 27px;
    height: auto;
    max-height: 150px;
    margin-right: 12px
}

.cust-book-listing-card.urdu ul li a span.book-thumb {
    width: 27px;
    height: auto;
    max-height: 150px;
    margin-left: 12px
}

.cust-book-listing-card ul li a span.book-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.book-part span.book-title,
.cust-book-listing-card ul li a span.book-title {
    color: var(--text-dark)
}

body.urdu .cust-book-listing-card ul li a span.book-title {
    font-family: urdu-regular;
    font-size: 14px;
    word-spacing: 3px
}

.cust-side-bar {
    /* width: 29%; */
    border-radius: var(--border-radius-md)
}

.cust-side-bar .cust-sidebar-btn a:hover {
    text-decoration: none
}

.cust-side-bar .cust-sidebar-btn a.btn-green {
    background-color: #41c468;
    display: flex;
    justify-content: center;
    color: var(--text-white);
    border-radius: var(--border-radius-md);
    text-align: center
}

.cust-side-bar .cust-sidebar-btn a.btn-green span {
    margin: 0 5px
}

.cust-side-bar .cust-sidebar-btn a.btn-orange {
    text-align: center;
    color: var(--text-white);
    background: var(--bg-orange);
    display: block;
    border-radius: var(--border-radius-md)
}

.cust-audio-section {
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-bottom: 15px;
    background-color: #fff
}

.cust-side-bar .sidebar-section-header {
    font-weight: 300;
    color: #1d1d1d;
    text-align: center;
    padding: 12px 16px
}

.cust-categories-listing {
    width: 100%;
    border-radius: var(--border-radius-md);
    padding-bottom: 30px;
    overflow: hidden
}

.topics-overflow-container {
    max-height: 300px;
    overflow-y: auto
}

#app-cover {
    position: relative;
    overflow: hidden;
    min-height: 220px
}

#bg-artwork {
    top: -30px;
    right: -30px;
    bottom: -30px;
    left: -30px;
    background-image: url("https://raw.githubusercontent.com/himalayasingh/music-player-1/master/img/_1.jpg");
    background-position: 50%;
    filter: blur(40px);
    -webkit-filter: blur(40px)
}

#bg-layer {
    position: absolute;
    top: 0;
    right: 0;
    opacity: .51;
    z-index: 2
}

#player {
    position: relative;
    z-index: 3;
    top: 124px
}

#player-track {
    top: 0;
    right: 15px;
    left: 15px;
    min-height: 170px;
    padding: 15px 22px 27px;
    border-radius: var(--border-radius-md);
    transition: top .3s
}

#player-track.active {
    top: -125px
}

#album-name {
    color: var(--text-dark)
}

#track-name {
    color: var(--text-dark);
    margin: 2px 0 13px;
    min-height: 72px;
    height: auto
}

#track-time {
    height: 16px;
    margin-bottom: 5px;
    overflow: hidden
}

#track-length {
    float: right
}

#current-time,
#track-length {
    color: #000;
    font-size: 11px;
    border-radius: var(--border-radius-md);
    padding: 2px 4px;
    transition: .3s
}

#track-time.active #current-time,
#track-time.active #track-length {
    color: #f86d92;
    background-color: transparent
}

#s-area,
#seek-bar {
    position: relative;
    height: 6px
}

#album-art,
#ins-time,
#s-hover,
#seek-bar {
    position: absolute
}

#s-area {
    cursor: pointer
}

#ins-time {
    top: -29px;
    color: #fff;
    font-size: 12px;
    white-space: pre;
    padding: 5px 6px
}

#s-hover {
    top: 0;
    opacity: .2;
    z-index: 2
}

#ins-time,
#s-hover {
    background-color: #3b3d50
}

#seek-bar {
    content: "";
    top: 0;
    width: 0;
    background-color: #fd6d94;
    transition: width .2s;
    z-index: 1
}

#player-content,
.button {
    background-color: #fff;
    border-radius: var(--border-radius-md)
}

#player-content {
    position: relative;
    box-shadow: 0 30px 80px #656565;
    z-index: 2;
    top: 24px
}

#album-art {
    top: -40px;
    width: 115px;
    height: 115px;
    margin-left: 40px;
    transform: rotateZ(0);
    transition: .3s;
    box-shadow: 0 0 0 10px #fff;
    border-radius: 50%;
    overflow: hidden
}

#album-art.active {
    top: -60px;
    box-shadow: 0 0 0 4px #fff7f7, 0 30px 50px -15px #afb7c1
}

#album-art:before,
#buffer-box {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    z-index: 2
}

#album-art:before {
    content: "";
    width: 20px;
    height: 20px;
    margin: -10px auto 0;
    background-color: #d6dee7;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px #fff
}

#album-art img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    z-index: -1
}

#album-art img.active {
    opacity: 1;
    z-index: 1
}

#album-art.active img.active {
    z-index: 1;
    animation: 3s linear infinite forwards rotateAlbumArt
}

#images {
    position: sticky;
    top: 0
}

@keyframes rotateAlbumArt {
    0% {
        transform: rotateZ(0)
    }

    100% {
        transform: rotateZ(360deg)
    }
}

#buffer-box {
    height: 13px;
    color: #1f1f1f;
    font-size: 13px;
    font-family: Helvetica;
    text-align: center;
    padding: 6px;
    margin: -12px auto 0;
    background-color: rgba(255, 255, 255, .19);
    opacity: 0
}

#album-art img,
#buffer-box {
    transition: .1s linear
}

#album-art.buffering img {
    opacity: .25
}

#album-art.buffering img.active {
    opacity: .8;
    filter: blur(2px);
    -webkit-filter: blur(2px)
}

#album-art.buffering #buffer-box {
    opacity: 1
}

#player-controls {
    width: 250px;
    margin: auto;
    padding: 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.control {
    width: 33.333%
}

.button {
    margin: 0 5px;
    padding: 20px 0;
    cursor: pointer
}

.button i {
    display: block;
    color: #d7624c;
    font-size: 18px;
    text-align: center
}

.button,
.button i {
    transition: .2s
}

.button:hover {
    background-color: #f2f2f2
}

.button:hover i {
    color: #272727
}

.biography-list,
.cust-aqwal-section .aqwals,
.cust-biography-section-list {
    padding: 16px
}

.cust-sidebar-list-container {
    max-height: 250px;
    overflow: hidden auto
}

.cust-sidebar-list-container.urdu ul li .right-arrow {
    margin-right: 0;
    margin-left: 8px;
    rotate: 180deg
}

.cust-sidebar-list-container ul {
    display: grid;
    grid-template-columns: auto
}

.cust-sidebar-list-container ul li {
    padding: 5px 8px;
    display: flex;
    align-items: flex-start;
    cursor: pointer
}

.cust-sidebar-list-container ul li .right-arrow {
    min-width: 18px;
    min-height: 18px;
    width: 18px;
    height: 18px;
    background-image: url('../images/arrow.png');
    background-position: center;
    display: inline-block;
    margin-top: 3px;
    margin-right: 8px
}

.cust-book-parts-slider {
    width: 100%;
    height: auto;
    background-color: var(--bg-grey);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px
}

.book-part {
    opacity: .5;
    text-align: center;
    padding: 20px 10px;
    border-radius: var(--border-radius-md)
}

.book-part.active {
    opacity: 1;
    border: 2px solid var(--bg-orange)
}

.book-part a {
    display: block;
    margin: auto;
    text-decoration: none
}

.book-part .book-part-thumb {
    display: block;
    width: 150px;
    margin: 0 auto 10px
}

.book-part .book-part-thumb img {
    width: 100%;
    text-align: center;
    margin: auto
}

.slider-right .swiper-button-next:after,
.slider-right .swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
    font-size: 30px;
    color: var(--bg-orange)
}

footer p {
    padding: 20px;
    text-align: center
}

.cust-book-images-container {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between
}

.cust-side-bar-book {
    width: 220px;
    background: var(--bg-grey);
    border-radius: var(--border-radius-md);
    box-shadow: 3px 1px 8px 2px #00000045;
    padding: 20px;
    min-height: calc(100vh - 67px + 25px);
    top: calc(67px + 25px);
    position: sticky
}

.cust-aqwal-section,
.cust-biography-section {
    min-height: 100px;
    height: auto;
    overflow: hidden;
    background-color: var(--bg-white);
    margin-bottom: 15px
}

.cust-tag-cloud li {
    display: inline-block
}

.cust-book-images-inner-container {
    width: calc(100% - 300px)
}

.cust-biography-section {
    width: 100%;
    border-radius: var(--border-radius-md)
}

.cust-aqwal-section {
    width: 100%
}

.cust-thumb-grid {
    max-height: 170px
}

.swiper-slide {
    padding: 8px 4px;
    border-radius: 8px;
}

.cust-aqwal-section .aqwals .aqwal {
    box-shadow: 0 0 2px rgba(4, 4, 4, .288);
    border: 1px solid var(--bg-grey);
    padding: 5px;
    border-radius: var(--border-radius-sm);
    margin: 10px 0
}

.cust-aqwal-section .aqwals .aqwal img {
    width: 100%;
    height: 300px;
    object-fit: contain
}

.cust-aqwal-section .aqwals .main-slider {
    margin: 0 auto 10px;
    position: relative
}

.cust-aqwal-section .aqwals .main-slider .swiper-button-next:after,
.cust-aqwal-section .aqwals .main-slider .swiper-button-prev:after {
    font-size: 26px
}

.cust-search-bar {
    max-width: 75%
}

.cust-search-bar .cust-btn-container {
    width: calc(100% - 125px);
    margin-left: auto;
    position: relative;
    top: 10px;
    z-index: 0
}

.cust-search-bar.search-urdu .search-fields {
    flex-direction: row-reverse
}

.cust-search-bar .search-fields select {
    margin-right: 8px
}

.cust-search-bar.search-urdu .search-fields select {
    margin-right: 0;
    margin-left: 8px;
    direction: rtl
}

.cust-search-bar.search-urdu .cust-btn-container {
    width: calc(100% - 129px);
    margin-left: 0;
    margin-right: auto
}

.cust-search-bar .keyboard-icon {
    display: none;
    position: absolute;
    left: -74px;
    top: -20px;
    background-image: url(../images/keyboard/keyboard-icon.png);
    width: 50px;
    height: 40px;
    background-position: center
}

[x-cloak] {
    display: none !important
}

.cust-search-language-button {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    width: 50%
}

.cust-search-bar input {
    position: relative;
    z-index: 1
}

.cust-search-bar input:focus {
    box-shadow: 0 0 0 3px #d7624c7a;
    border-color: #d7624c7a
}

#searchComponent.font-urdu .font-english {
    font-family: default-regular !important
}

#searchComponent.font-urdu #searchBox {
    overflow: visible !important;
    white-space: pre;
    line-height: 40px
}

#searchComponent.font-urdu a span {
    line-height: 40px
}

#searchComponent.font-urdu #searchBox::placeholder {
    overflow: visible !important;
    white-space: pre
}

#searchComponent.font-urdu #languageToggleGroup * {
    line-height: 20px !important
}

@media only screen and (max-width:1280px) {

    header nav,
    header nav.active {
        transition: right .5s ease-in-out
    }

    header nav ul li .dropdown {
        position: static !important;
        transform: none !important;
        width: 100% !important
    }

    .top-head {
        height: auto
    }

    .top-head .cust-row {
        flex-direction: row;
        flex-wrap: wrap;
        padding-top: 10px;
        padding-bottom: 10px;
        height: 100%
    }

    .top-head .logo img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    nav ul .cust-dropdown,
    nav ul li a .arrow.down {
        display: none
    }

    .top-head .cust-row div.logo {
        width: auto
    }

    .top-head .cust-row div.logo .logo_image {
        width: 97px
    }

    .top-head .cust-row .ham-burger {
        max-width: 30px
    }

    .top-head .cust-row div.title-img {
        width: 200px
    }

    .top-head .cust-row div.title-img img {
        width: 100%;
        height: auto
    }

    .cust-container {
        width: 100%;
        max-width: 100%;
        padding: 0 40px
    }

    header nav {
        position: fixed;
        right: -300px;
        width: 300px;
        height: 100vh;
        max-height: 100vh;
        overflow-y: auto;
        top: 0;
        background-color: var(--bg-grey);
        padding: 20px 0
    }

    header nav.active {
        right: 0
    }

    header nav ul {
        display: flex;
        flex-direction: column;
        margin: 20px auto
    }

    body.urdu header nav ul li {
        text-align: right
    }

    .language-selector-container {
        width: 100% !important;
        justify-content: center
    }

    #language_selecor {
        margin-left: 0
    }

    .cust-close,
    .ham-burger {
        display: block
    }

    .cust-row {
        flex-direction: column
    }

    .cust-container.home-listing .cust-row {
        flex-direction: column-reverse
    }

    .cust-slider-container .cust-row {
        flex-direction: row;
        gap: 20px
    }

    .cust-slider-container .cust-row .slider-left,
    .cust-slider-container .cust-row .slider-right {
        width: calc(50% - 20px)
    }

    .cust-reasearch-section {
        /* width: 100%; */
        margin-bottom: 20px
    }

    .cust-book-listing-card.cust-col-6 {
        width: clamp(280px, 49%, 400px)
    }

    .cust-side-bar .cust-sidebar-btn {
        display: flex;
        gap: 20px;
        justify-content: center;
        /* width: 100% */
    }

    .cust-categories-listing .cust-row,
    .cust-container.home-listing .cust-reasearch-section .cust-row {
        flex-direction: row
    }

    .cust-book-listing-card.cust-col-4 {
        width: clamp(280px, 49%, 400px);
        margin-bottom: 15px
    }

    .cust-pagination nav {
        justify-content: flex-end
    }

    .cust-side-bar {
        /* width: 100%; */
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        gap: 20px
    }

    .cust-aqwal-section,
    .cust-audio-section {
        width: calc(50% - 15px)
    }
}

@media only screen and (max-width:768px) {

    header nav,
    nav.active {
        transition: right .5s ease-in-out
    }

    .top-head .logo img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .top-head .cust-row div.title-img {
        width: 180px
    }

    .cust-pagination-records-value,
    nav ul .cust-dropdown,
    nav ul li a .arrow.down {
        display: none
    }

    .cust-container {
        width: 100%;
        max-width: 100%;
        padding: 0 20px
    }

    header nav {
        position: fixed;
        right: -300px;
        width: 300px;
        background-color: var(--bg-grey)
    }

    nav.active {
        right: 0
    }

    nav ul {
        display: flex;
        flex-direction: column
    }

    .cust-book-images-inner-container {
        width: 100%
    }

    .cust-book-images-container {
        position: relative
    }

    .cust-side-bar-book {
        position: fixed;
        width: 100%;
        max-width: 300px;
        left: -100%;
        transition: left .5s ease-in-out;
        top: 0;
        height: 100vh;
        z-index: 3;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }

    .cust-side-bar-book .cust-tag-cloud {
        margin-top: 30px
    }

    .cust-side-bar-book .cust-close {
        display: block;
        margin-left: auto
    }

    .cust-side-bar-book.active {
        left: 0;
        transition: left .5s ease-in-out
    }

    #show-tag-cloud,
    .cust-close,
    .ham-burger {
        display: block
    }

    .top-head .cust-row {
        height: 100%
    }

    .language-selector-container {
        width: 100% !important;
        justify-content: center
    }

    #language_selecor {
        margin-left: 0
    }

    .cust-slider-container .cust-row {
        flex-direction: column-reverse
    }

    .cust-slider-container .cust-row .slider-left,
    .cust-slider-container .cust-row .slider-right {
        width: calc(100%)
    }
}

@media only screen and (max-width:640px) {

    header nav,
    nav.active {
        transition: right .5s ease-in-out
    }

    .cust-close,
    .slider-right .swiper-button-next:after,
    .slider-right .swiper-button-prev:after,
    .swiper-rtl .swiper-button-next:after,
    .swiper-rtl .swiper-button-prev:after {
        font-size: 22px
    }

    .top-head .cust-row div.logo .logo_image {
        width: 80px
    }

    .top-head .cust-row div.logo .ham-burger {
        width: 30px
    }

    .top-head .cust-row div.title-img {
        width: 160px
    }

    .cust-container {
        width: 100%;
        max-width: 100%;
        padding: 0 20px
    }

    .cust-container.home-listing,
    .swiper.mySwiper-right .swiper-wrapper {
        padding: 0
    }

    #audio-playist,
    body .cust-reasearch-section .section-heading h3 {
        max-width: 100%
    }

    .cust-container.home-listing>.cust-row,
    .cust-slider-container .cust-row {
        flex-direction: column-reverse
    }

    header nav {
        position: fixed;
        right: -300px;
        width: 300px;
        background-color: var(--bg-grey)
    }

    nav.active {
        right: 0
    }

    nav ul {
        display: flex;
        flex-direction: column
    }

    nav ul .cust-dropdown,
    nav ul li a .arrow.down {
        display: none
    }

    .cust-slider-container .cust-row .slider-left,
    .cust-slider-container .cust-row .slider-right {
        width: 100%;
        margin: 20px auto
    }

    .slider-right .cust-inner-slide {
        padding: 10px 25px;
        flex-direction: column-reverse;
        height: auto
    }

    .swiper-button-next,
    .swiper-rtl .swiper-button-prev {
        right: var(--swiper-navigation-sides-offset, 0)
    }

    .swiper-button-prev,
    .swiper-rtl .swiper-button-next {
        left: var(--swiper-navigation-sides-offset, 0)
    }

    .slider-right .cust-inner-slide .content {
        width: 100%;
        text-align: center
    }

    .slider-right .cust-inner-slide .image {
        margin-bottom: 15px
    }

    .cust-close,
    .ham-burger {
        display: block
    }

    .cust-close {
        text-align: right;
        color: var(--text-dark)
    }

    .swiper.mySwiper-left .swiper-pagination {
        bottom: -10px
    }

    .swiper.mySwiper-right {
        margin-top: 0;
        margin-bottom: 0
    }

    .cust-pagination nav {
        justify-content: flex-end !important
    }

    .pagination {
        flex-direction: row
    }

    .pagination li {
        padding: 0;
        width: auto
    }

    .cust-reasearch-section,
    .cust-side-bar {
        width: 100%;
        margin-bottom: 20px
    }

    .cust-categories-listing {
        padding: 16px;
        margin-top: 0
    }

    .cust-book-parts-slider,
    .cust-pagination {
        padding: 15px 10px
    }

    .cust-book-listing-card.cust-col-4,
    .cust-book-listing-card.cust-col-6 {
        width: 100%;
        margin-bottom: 14px
    }

    .cust-pagination {
        width: calc(100% + 40px);
        margin: auto auto auto -20px;
        border-top-right-radius: 0;
        border-top-left-radius: 0
    }

    .book-part .book-part-thumb,
    .cust-aqwal-section,
    .cust-audio-section,
    .cust-book-images-inner-container {
        width: 100%
    }

    .cust-book-images-container {
        position: relative
    }

    .cust-side-bar-book {
        position: fixed;
        width: 100%;
        max-width: 300px;
        left: -100%;
        transition: left .5s ease-in-out;
        top: 0;
        height: 100vh;
        z-index: 3;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }

    .cust-side-bar-book .cust-tag-cloud {
        margin-top: 30px
    }

    .cust-side-bar-book .cust-close {
        display: block;
        margin-left: auto
    }

    .cust-side-bar-book.active {
        left: 0;
        transition: left .5s ease-in-out
    }

    .book-part {
        padding: 0;
        overflow: hidden
    }

    .book-part span.book-title {
        font-size: 14px
    }

    .cust-sidebar-list-container ul {
        gap: 10px
    }

    .cust-side-bar {
        gap: 0
    }

    .cust-side-bar .cust-sidebar-btn {
        flex-direction: column
    }

    .min-h-\[300px\] {
        min-height: 1px !important;
        height: auto
    }
}