/*************************************************************************************/
@import url('../font/stylesheet.css');
/*************************************************************************************/

:root {
    --primary: #E3265C;
    --primary-rgb: 227, 38, 92;
    --secondary: #A354E1;
    --secondary-rgb: 163, 84, 225;
    --tertiary: #E7B86A;
    --tertiary-rgb: 231, 184, 106;
    --text-clr: #1F0F2B;
    --black: #000;
    --ter-invert: #5A4521;
    --white: #fff;
    --border-light: #e1e1eb;
    --border-regular: #d1d1db;
    --body-font-family: 'Open Sans', sans-serif;
    --body-font-size: 16px;
    --body-font-weight: 400;
    --card-bg: #f3f3f3;
    --card-hover: rgba(var(--primary-rgb), 0.2);
    --card-active: #ddd;
    --bg-thm: #fff;
    --thm-grey: #ddd;
    scroll-behavior: auto;
}

body{
    margin: 0;
    padding: 0;
    font-family: var(--body-font-family);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    color: var(--text-clr);
    --col-gap: 20px;
    background: linear-gradient(180.2deg, #FFFFFF 0.17%, #FFFFFF 82.58%, #F3F3F3 112.92%);
    scroll-behavior: unset;
}

img{
    max-width: 100%;
    height: auto;
}

a{
    text-decoration: none;
    color: inherit;
}
a:hover {
    color: inherit;
}

h1, .h1 {
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 1.3;
    font-style: normal;
}
h2, .h2 {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.2;
    font-style: normal;
}
h3, .h3 {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.4;
    font-style: normal;
}
h4, .h4 {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.4;
    font-style: normal;
}
h5, .h5 {
    font-size: 1.2rem;
    line-height: 1.4;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
    margin-bottom: 1rem;
}
.mb-30 {
    margin-bottom: 30px;
}
.row {
    --bs-gutter-y: var(--bs-gutter-x);
}
.font-inter{
    font-family: "Inter", sans-serif;
}
.font-12{
    font-size: 12px !important;
}
input, textarea {
    outline: none;
    box-shadow: none;
}
.back-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    padding: 12px;
    background-color: var(--secondary);
    display: none;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
    background-image: linear-gradient(202.37deg, #e3265cc9 -7.23%, #342187cc 93.24%);
    box-shadow: 0 0 14px -4px var(--text-clr);
    text-align: center;
    z-index: 99;
}

.back-top svg {
    max-width: 100%;
    height: auto;
    vertical-align: text-top;
}
.ql-font-urdu { font-family: 'Noto Nastaliq Urdu', serif; }
.ql-editor[dir="rtl"] { text-align: right; }
body .btn-primary {
    color: #fff;
    background-color: var(--primary);
    border: var(--primary);
}

body .btn-secondary {
    color: #fff;
    background-color: var(--secondary);
    border: var(--secondary);
}
body .btn-secondary:hover, body .btn-secondary:focus {
    color: #fff;
    background-color: var(--secondary);
    border: var(--secondary);
}
body .btn-primary:hover, body .btn-primary:focus {
    background-color: #bf1949;
    border: #bf1949;
    color: #fff;
}
.text-dark-gray {opacity: 0.8;}
.font-14 {
    font-size: 14px !important;
}   
.btn {
    border-radius: 50px;
    padding: 12px 30px;
    box-shadow: none !important;
    font-size: inherit;
    color: var(--text-clr);
}
.font-semibold{
    font-weight: 600;
}
.static-page-content {
    max-width: 1000px;
    margin: 0 auto;
}

.static-page-content h1, .static-page-content .h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    margin-top: 2rem;
}
.static-page-content h2, .static-page-content .h2 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
    margin-top: 2rem;
}
.static-page-content h3, .static-page-content .h3 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    margin-top: 2rem;
}
.static-page-content h4, .static-page-content .h4 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    margin-top: 2rem;
}
.static-page-content h5, .static-page-content .h5 {
    font-size: 1rem;
}
.static-page-content ul, .static-page-content ol{
    margin: 20px 0;
}
.static-page-content ul li{
    margin-bottom: 8px;
}
.header-inner .logo-wrapper .logo-thm-dark {
    display: none;
}

.bg-light {
    background-color: rgb(240 246 246 / 50%) !important;
}
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-inner .menu-cta-wrapper {
    display: flex;
    align-items: center;
    flex-grow: 1;
    justify-content: flex-end;
}

.header-inner ul.main-menu {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
    gap: 9%;
    justify-content: center;
    flex-grow: 0.35;
    white-space: nowrap;
}

.header-inner .logo-wrapper img {
    width: 300px;
}
.header-inner .logo-wrapper {
    max-width: 30%;
}


header.header {
    padding: 40px 0;
    position: relative;
    z-index: 99;
}

.header-inner .menu-cta-wrapper .menu-link {
    /* font-family: 'Inter', sans-serif; */
    font-size: 14px;
}

.header-inner .cta-wrapper {
    display: flex;
    gap: 14px;
    margin-left: 20px;
}

.header-inner .cta-wrapper .btn-outline {
    border: 1px solid currentColor;
    color: currentColor;
    border-radius: 40px;
    padding: 4px 16px;
    min-width: 80px;
    font-size: 14px;
}
.home-page .header-inner .cta-wrapper .btn-outline:hover {
    background-color: #fff;
    border-color: #fff;
    color: var(--primary);
}
.header-inner .cta-wrapper .btn-outline:hover {
    background-color: var(--text-clr);
    border-color: var(--text-clr);
    color: #fff;
}

.menu-toggle {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    box-shadow: none;
    height: 18px;
    width: 24px;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
}

.menu-toggle .bars {display: block;height: 3px;width: 100%;background: var(--white);border-radius: 10px;position: absolute;transition: all 0.25s ease-in-out;transform: rotate(0deg);}

.menu-toggle .bar3 {
    top: 15px;
}

.menu-toggle .bar2 {
    top: 7px;
    left: 0;
    transition: all 0.15s ease-in-out;
}

.menu-toggle .bar1 {
    top: 0;
}

.mobile-dropdown .menu-sm, .mobile-dropdown .menu-sm ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.mobile-dropdown .menu-float {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    bottom: calc(100% - 100vh);
    background: var(--bg-thm);
    overflow: auto;
    display: none;
    border-top: 1px solid #e8e8e8;
    padding: 20px 0;
}
.mobile-dropdown .menu-sm .menu-anchor, .mobile-dropdown .menu-sm button {
    padding: 10px 0;
    display: inline-block;
    background: transparent;
    border: none;
    outline: none;
    position: relative;
    text-align: left;
}

.mobile-dropdown .menu-sm {
    padding: 8px 0;
}

.mobile-dropdown .menu-sm .sub-menu {
    padding-left: 15px;
    display: none;
}

.mobile-dropdown .menu-sm .has-sub > .menu-anchor:after {
    content: "";
    position: absolute;
    top: 9px;
    right: 0;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/%3E%3C/svg%3E");
    transition: all 0.15s ease-in-out;
}

.mobile-dropdown .menu-sm .has-sub > .menu-anchor {
    padding-right: 30px;
    width: 100%;
}

.mobile-dropdown .menu-sm .has-sub > .menu-anchor.active:after {
    transform: rotate(180deg);
}
.mobile-dropdown {
    margin-left: 15px;
}
.menu-toggle.active .bar1 {
    top: 7px;
    transform: rotate(135deg);
}

.menu-toggle.active .bar2 {
    left: -5px;
    opacity: 0;
}

.menu-toggle.active .bar3 {
    top: 7px;
    transform: rotate(-135deg);
}
.menu-anchor.menu-logout {
    color: var(--bs-danger);
}
body.sm-menu-open header.header {
    background-color: var(--bg-thm);
}
.mobile-dropdown .menu-float .menu-sm li {
    margin-bottom: 20px;
}

.mobile-dropdown .menu-float .menu-sm li .btn.btn-primary {
    margin-top: 10px;
}
footer.footer-main {
    position: relative;
    font-family: 'Source Sans Pro';
}
footer.footer-main .footer-top-shape{
    padding-top: 21%;
    background-image: url(../images/footer-shape.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    z-index: 1;
}
footer.footer-main .footer-wrap {
    background: linear-gradient(199.24deg, #6A1B9A -11.59%, #9C27B0 153.3%);
    position: relative;
    padding-top: 6%;
    color: #fff;
    margin-top: -10px;
}

footer.footer-main .footer-wrap:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(202.37deg, #e3265cc9 -7.23%, #342187cc 93.24%);
    mix-blend-mode: normal;
    opacity: 0.4;
}
footer.footer-main .footer-wrap > * {
    position: relative;
    z-index: 1;
    padding: 0 0;
}

footer.footer-main  .footer-downloads {
    text-align: center;
    padding: 100px 0;
}

footer.footer-main .footer-downloads h2 {font-size: 2.6rem;margin-bottom: 40px;}
/****Cookies******/
#silktide-wrapper {
    --focus: 0 0 0 3px #000000, 0 0 0 5px #ffffff;
}
#silktide-wrapper #silktide-modal footer > a {
    display: none;
}
button#silktide-cookie-icon {
    display: none !important;
}
#silktide-wrapper #silktide-banner .actions-row .silktide-logo{
    display: none;
}
#silktide-wrapper #silktide-banner .actions-row{
    justify-content: flex-end;
}
/****Cookies*******/
.download-links a {
    background: #000;
    color: #fff;
    display: inline-flex;
    border-radius: 50px;
    align-items: center;
    font-size: 22px;
    line-height: 1.1;
    font-weight: 600;
    border: 1px solid #fff;
    padding: 8px 40px 8px 30px;
    font-family: 'Inter', sans-serif;
}

.download-links a svg, .download-links a img {
    margin-right: 8px;
}

.download-links a .contents {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.download-links a .sm-label {
    font-weight: 400;
    font-size: 55%;
}

footer.footer-main .footer-downloads .download-links {
    display: flex;
    justify-content: center;
    gap: 20px;
}

footer.footer-main .footer-bottom-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-top: #AB40E0 1px solid;
    padding: 35px 0;
}

footer.footer-main .footer-bottom-bar .bottom-menu {
    display: flex;
    padding: 0;
    margin: 0 -10px;
    list-style: none;
    font-size: 14px;
    flex-wrap: wrap;
}

footer.footer-main .footer-bottom-bar .bottom-menu a {
    color: inherit;
    text-decoration: none;
    position: relative;
    display: inline-block;
    padding-bottom: 2px;
}

footer.footer-main .footer-bottom-bar .bottom-menu li {
    padding: 0 10px;
}

footer.footer-main .footer-bottom-bar p.copyright {
    margin: 0;
}
.footer-inner .logo-wrap img {
    width: 230px;
}

.footer-inner .menu {
    padding: 0;
    margin: 0;
    list-style: none;
}

.footer-inner .menu .menu-link {
    font-size: 14px;
    position: relative;
    padding-bottom: 4px;
    display: inline-block;
}

.footer-inner .menu li:not(:last-child) {
    margin-bottom: 18px;
}
.footer-inner .footer-contents-wrap {
    padding-top: 80px;
    padding-bottom: 60px;
}

.footer-inner .social-links .social-link {
    width: 50px;
    height: 50px;
    background-color: var(--secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 26px;
    padding: 6px;
    transition: all 0.15s ease-in-out;
}

.footer-inner .social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 40px;
}

.footer-inner .language-switcher .dropdown-toggle {
    background: transparent;
    width: 100%;
    border: 1px solid #D1C4E9;
    border-radius: 10px;
    text-align: left;
    display: flex;
    align-items: center;
    font-size: 20px;
    line-height: 1;
    padding: 10px 40px 10px 20px;
}

.footer-inner .language-switcher .dropdown-toggle .icon {
    display: inline-block;
    width: 25px;
    margin-right: 10px;
}

.footer-inner .language-switcher .dropdown-toggle:after {
    content: "";
    border: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='18' viewBox='0 0 30 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 12.2382L26.6671 1.15972C26.9551 0.881431 27.4306 0.888057 27.7253 1.17297L29.7747 3.15411C30.0694 3.43902 30.0761 3.90283 29.7881 4.18112L15.5425 17.7112C15.3952 17.8569 15.1942 17.9232 15 17.9099C14.7991 17.9166 14.6048 17.8503 14.4575 17.7112L0.211874 4.18112C-0.0761193 3.90283 -0.0694218 3.43902 0.225269 3.15411L2.27471 1.17297C2.5694 0.888057 3.04493 0.881431 3.33292 1.15972L15 12.2382Z' fill='%23D1C4E9'/%3E%3C/svg%3E%0A");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.footer-inner .language-switcher .dropdown-menu {
    width: 100%;
    border-radius: 10px;
}

.footer-inner .language-switcher .dropdown-menu .dropdown-item.active, .footer-inner .language-switcher .dropdown-menu .dropdown-item:active {
    background-color: var(--secondary);
}
.footer-inner .menu .menu-link:before, footer.footer-main .footer-bottom-bar .bottom-menu a:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: #fff;
    transition: all 0.15s ease-in-out;
}

.footer-inner .menu .menu-link:hover:before, footer.footer-main .footer-bottom-bar .bottom-menu a:hover:before {
    width: 100%;
}
.footer-inner .social-links .social-link:hover {
    box-shadow: 0 0 6px 3px rgba(255,255,255,0.2);
    transform: scale(1.1);
}
/**********Pages Css***********/
.hero-banner .hero-thumb {
    max-width: 640px;
    margin: 0 auto;
}

.hero-banner {
    padding: 90px 0;
}

.hero-banner .row {
    align-items: center;
}

.hero-banner h1 {font-family: "Source Sans Pro", sans-serif;max-width: 600px;margin-bottom: 35px;}

.clr-primary {
    color: var(--primary);
}

a.clr-primary:hover {
    color: var(--primary);
    text-decoration: underline;
}

.hero-banner .hero-sm-description {color: #505050;font-size: 13px;max-width: 450px;margin-bottom: 30px;}

.hero-banner .hero-users-wrap {
    display: flex;
    font-size: 10px;
    color: #232323;
    line-height: 1.2;
    margin-bottom: 30px;
}

.hero-banner .hero-users-wrap .user-thumb {
    display: inline-block;
    max-width: 100px;
}

.hero-banner .hero-users-wrap .user-numbers {
    display: inline-block;
    padding-top: 4px;
}

.download-apps-wrap .btn-app-store {
    background: var(--text-clr);
    color: #fff;
    display: inline-flex;
    border-radius: 50px;
    align-items: center;
    font-size: 18px;
    line-height: 1.1;
    font-weight: 600;
    border: 1px solid #fff;
    padding: 0px 30px 0px 20px;
    filter: drop-shadow(39px 21px 29.9px rgba(74, 93, 99, 0.15));
}

.download-apps-wrap .btn-app-store .sm-label {
    display: block;
    font-size: 56%;
}

.download-apps-wrap .btn-app-store svg {
    width: 38px;
}


.download-apps-wrap .btn-google-play {
    background: #000;
    color: #fff;
    display: inline-flex;
    border-radius: 50px;
    align-items: center;
    font-size: 19px;
    line-height: 1.1;
    font-weight: 600;
    border: 1px solid #fff;
    padding: 12px 27px;
    filter: drop-shadow(39px 21px 29.9px rgba(74, 93, 99, 0.15));
    font-family: 'Inter', sans-serif;
    transition: all 0.15s ease-in-out;
}
.download-apps-wrap .btn-google-play img {
    margin-right: 8px;
}
.download-apps-wrap .btn-google-play .sm-label {
    display: block;
    font-size: 56%;
}

.download-apps-wrap .btn-google-play svg {
    width: 28px;
    margin-right: 8px;
}

.download-apps-wrap {
    display: flex;
    gap: 15px;
}
.top-right-graphic {
    position: absolute;
    top: 0;
    right: 0;
    width: 860px;
    max-width: 75%;
    z-index: -1;
}
body.home-page .header .menu-cta-wrapper {
    color: #fff;
}
.stats-counts {
    padding: 30px 0 120px;
    text-align: center;
}

.stats-counts .counts {
    font-weight: 600;
    font-size: 35px;
    color: var(--primary);
    margin-bottom: 10px;
}

.stats-counts .icon {
    display: inline-block;
    width: 25px;
    height: 25px;
    margin-right: 10px;
}

.stats-counts .icon svg {
    max-width: 100%;
    height: auto;
}

.stats-counts .count-label {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: #8D8D8D;
    font-size: 22px;
}

.stats-counts .row > *:not(:last-child) {
    border-right: 2px solid var(--border-regular);
}

.stats-counts .counts.clr-secondary {
    color: var(--secondary);
}
.recommended-articles {
    padding: 120px 0 100px;
}
.section-heading-center {
    margin-bottom: 60px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    text-align: center;
}

.card-recomend .thumb-wrap {
    display: block;
    position: relative;
    padding-bottom: 148%;
    border-radius: 15px;
    overflow: hidden;
    z-index: 1;
}

.card-recomend .thumb-wrap > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.card-recomend .cta-wrap {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    padding: 30px 20px;
}

.card-recomend .cta-wrap .cat-btn {
    background-color: var(--primary);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    border-radius: 5px;
    padding: 10px 18px;
    line-height: 1;
    display: inline-block;
}

.card-recomend.thm-secondary .cta-wrap .cat-btn {
    background-color: var(--secondary);
}

.card-recomend .locked {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 2px 2px 7px 1px rgba(var(--primary-rgb), 0.5);
    opacity: 0;
    transition: all 0.15s ease-in-out;
}

.card-recomend .locked svg {
    width: 20px;
    height: auto;
}

.card-recomend.thm-secondary .locked {
    background-color: var(--secondary);
    box-shadow: 2px 2px 7px 1px rgba(var(--secondary-rgb), 0.5);
}

.card-recomend.thm-tertairy .cta-wrap .cat-btn {
    background-color: var(--tertiary);
}

.card-recomend.thm-tertairy .locked {
    background-color: var(--tertiary);
    box-shadow: 2px 2px 7px 1px rgba(var(--tertiary-rgb), 0.5);
}

.card-recomend .rating-outer {margin-top: 28px;}
.rating-outer {
    --w: 160px;
    width: var(--w);
    height: 30px;
    background-position: left center;
    background-size: var(--w);
    background-repeat: no-repeat;
    background-image: url(../images/icons/star-outlined.png);
}

.rating-outer .rating-inner {
    width: 100%;
    height: 100%;
    display: block;
    background-position: left center;
    background-size: var(--w);
    background-repeat: no-repeat;
    background-image: url(../images/icons/star-filled.png);
    max-width: 100%;
}
.card-recomend .thumb-wrap:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(360deg, rgba(48, 39, 39, 0.48) 0%, rgba(190, 136, 1, 0.6) 100%);
    opacity: 0;
    transition: all 0.15s ease-in-out;
}

.card-recomend .thumb-wrap:hover:before {
    opacity: 1;
}

.card-recomend .thumb-wrap:hover .locked {
    opacity: 1;
}
.new-realese {
    padding: 100px 0;
}
.home-sections-graphics {
    background-image: url(../images/home-sections-bg.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
.features-row-col .description {
    font-size: 24px;
    margin-top: 40px;
}
/* .features-row-col .description {
    font-size: 26px;
    margin-top: 40px;
} */

.features-row-col .thumb img {
    width: 540px;
}
.features-row-col .row {
    padding: 60px 0;
    position: relative;
}
.features-row-col {
    padding: 100px 0;
    overflow: hidden;
}
.watch-video-section {
    padding: 100px 0;
    z-index: 1;
    position: relative;
}
.watch-video-graphic {
    background-image: url(../images/watch-section-bg.png);
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    padding-bottom: 53%;
    padding-top: 12%;
    margin-top: -9%;
    position: relative;
    z-index: -1;
}
.watch-video-section .top-contents {
    text-align: center;
    margin-bottom: 50px;
}

.watch-video-section .top-contents h2 {
    margin-bottom: 40px;
}

.watch-video-section .top-contents .sub-heading {
    font-size: 26px;
}
.video-card-graphic {
    background-image: url(../images/watch-video-bg.png);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center;
    padding: 6% 0 15%;
}
.watch-video-card {
    max-width: 880px;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 0 0 0 rgba(0,0,0,0.5);
    margin: 0 auto;
}

.watch-video-card video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
}

.watch-video-card:before {
    content: "";
    padding-bottom: 56%;
    display: block;
}
.watch-video-card .video-control {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: var(
    --secondary);
    color: #fff;
    border: none;
    box-shadow: none;
    border-radius: 50%;
    padding: 18px;
    transition: all 0.15s ease-in-out;
}

.watch-video-card .video-control .paused {
    display: none;
}

.watch-video-card .video-control svg {
    max-width: 100%;
    height: auto;
}

.watch-video-card video.playing + .video-control .played {
    display: none;
}

.watch-video-card video.playing + .video-control .paused {
    display: inline-block;
}

.watch-video-card video.playing + .video-control {
    opacity: 0;
    visibility: hidden;
}

.watch-video-card:hover video.playing + .video-control {
    opacity: 1;
    visibility: visible;
}
.testimonials-inner .sm-divider {
    width: 100px;
    margin: 40px auto 40px;
    height: 15px;
}

.testimonials-inner h2.section-heading-center {
    margin-bottom: 20px;
    font-size: 3.8rem;
}

.sm-divider {
    width: 80px;
    max-width: 100%;
    margin: 30px 0;
    height: 6px;
    background: linear-gradient(169.02deg, #B2EBF2 -58.33%, #D1C4E9 60.57%);
    border-radius: 10px;
    box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.3);
}

.testi-slider-wrap .testimonial-slider {
    max-width: 650px;
    margin: 0 auto 60px;
    text-align: center;
}

.testi-slider-wrap .testimonial-slider .description {
    font-style: italic;
    margin-bottom: 40px;
}

.testi-slider-wrap .testimonial-slider .testi-metadata {margin: 0;}

.testi-slider-wrap  .testi-card {
    font-size: 22px;
}
.testi-slider-wrap .testimonial-thumb-slider:not(.swiper-initialized) {
    display: none;
}
.testi-slider-wrap  .testimonial-thumb-slider {
    max-width: 990px;
    padding: 20px;
}


.testi-slider-wrap  .client-thumb {
    width: 100%;
    padding-bottom: calc(100% - 10px);
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0.5;
    transition: all 0.15s ease-in-out;
    border: 5px solid #000;
}

.testi-slider-wrap .client-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testi-slider-wrap .swiper-slide.swiper-slide-thumb-active .client-thumb {
    opacity: 1;
    transform: scale(1.2);
}
.watch-video-section:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background-color: rgb(156 39 176 / 5%);
}
.home-sections-graphics .testimonials-section-inner {
    background-color: rgb(156 39 176 / 5%);
}
.testimonials-section-inner {
    /* background-color: rgb(156 39 176 / 5%); */
    padding: 100px 0 70px;
}
.testimonials-section .testi-graphic {
    width: 100%;
    padding-bottom: 12%;
    background-image: url(../images/testimonial-shape.png);
    background-position: center bottom;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.faq-section {
    padding: 120px 0 100px;
}
.faq-section .accordion-item {
    border: 0;
    border-radius: 15px;
    overflow: hidden;
    background-color: transparent;
}

.faq-section .accordion-item .accordion-button {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 24px;
    font-weight: 600;
    padding: 32px 45px;
    line-height: 1.4;
    background: transparent;
    color: inherit;
}

.faq-section .accordion-item .accordion-button:not(.collapsed) {
    background: linear-gradient(213.77deg, #00BCD4 -163.83%, #673AB7 45.54%);
    color: #fff;
}

.faq-section .accordion-item .accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg width='43' height='24' viewBox='0 0 43 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M38.2441 0.285118C38.6473 -0.10261 39.313 -0.0933787 39.7256 0.303582L42.5948 3.06384C43.0073 3.4608 43.0167 4.10702 42.6135 4.49474L22.6697 23.3457C22.4634 23.5488 22.1821 23.6412 21.9102 23.6227C21.6289 23.6319 21.3569 23.5396 21.1507 23.3457L1.20678 4.49474C0.803589 4.10702 0.812966 3.4608 1.22553 3.06384L4.09475 0.303582C4.50732 -0.0933787 5.17305 -0.10261 5.57624 0.285118L21.9102 15.7204L38.2441 0.285118Z' fill='%239C27B0'/%3E%3C/svg%3E%0A");
    background-position: center;
}

.faq-section .accordion-item .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg width='43' height='24' viewBox='0 0 43 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M38.2441 0.285118C38.6473 -0.10261 39.313 -0.0933787 39.7256 0.303582L42.5948 3.06384C43.0073 3.4608 43.0167 4.10702 42.6135 4.49474L22.6697 23.3457C22.4634 23.5488 22.1821 23.6412 21.9102 23.6227C21.6289 23.6319 21.3569 23.5396 21.1507 23.3457L1.20678 4.49474C0.803589 4.10702 0.812966 3.4608 1.22553 3.06384L4.09475 0.303582C4.50732 -0.0933787 5.17305 -0.10261 5.57624 0.285118L21.9102 15.7204L38.2441 0.285118Z' fill='%23fff'/%3E%3C/svg%3E%0A");
}

.faq-section .accordion-item .accordion-body {
    padding: 30px 45px;
    font-size: 24px;
}

.faq-section .accordion-item:not(:last-child) {
    margin-bottom: 30px;
}

.faq-section .accordion-item .accordion-button.collapsed:hover {
    background: rgb(103 58 183 / 10%);
}


.faq-section .section-heading-wrap h2 {
    margin-bottom: 50px;
    font-size: 3.8rem;
    font-weight: 600;
}

.faq-section .sm-divider {
    margin-bottom: 60px;
}

.faq-section .sub-heading {
    font-size: 24px;
    margin-bottom: 60px;
}

.faq-section .faq-announce img {
    max-width: 380px;
    margin: 0 auto;
}

.faq-section .faq-announce {
    text-align: center;
}
.faq-section .section-heading-wrap {
    max-width: 500px;
}
.pricing-section {
    padding: 100px 0;
    text-align: center;
}
.pricing-section .sub-heading {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 1rem;
}

.pricing-section .verified-parteners img {
    max-width: 180px;
}
.pricing-cards-wrap {
    max-width: 850px;
    margin: 0 auto 40px;
}

.pricing-cards-wrap  .price-card {
    --card-thm: var(--primary);
    color: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 60px 0 25px;
    text-align: center;
    background-color: var(--text-clr);
    border-radius: 20px;
    border: 2px solid var(--card-thm);
}
.thm-dark .pricing-cards-wrap .price-card {
    background-color: #1F0F2B;
}
.pricing-cards-wrap .price-card .discount-badge {
    background-color: var(--card-thm);
    width: 180px;
    height: 30px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    letter-spacing: 2px;
    font-size: 15px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pricing-cards-wrap .pricing-cards-wrap .row {
    --bs-gutter-x: 2rem;
}

.pricing-cards-wrap .price-card .duration {
    font-size: 14px;
}

.pricing-cards-wrap .price-card .amount {
    font-size: 1.6rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    margin-bottom: 30px;
}

.pricing-cards-wrap .price-card .cancel-notoe {
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    max-width: 250px;
}

.pricing-cards-wrap .price-card .cta-wrap .btn {
    background: var(--card-thm);
    color: var(--card-color);
    text-transform: uppercase;
    font-size: 11px;
    max-width: 260px;
    width: 100%;
    display: inline-block;
    border-radius: 50px;
    padding: 10px 20px;
    line-height: 1;
    border: 1px solid var(
    --tertiary);
    font-family:
    'Inter', sans-serif;
}

.pricing-cards-wrap .price-card .cta-wrap {
    width: 100%;
}

.pricing-cards-wrap .price-card .terms-applied {
    margin-top: 35px;
    font-size: 10px;
    color: #ccc;
}

.pricing-cards-wrap .price-card .terms-applied a {
    color: inherit;
    font-size: inherit;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.pricing-section .verified-parteners {
    margin-bottom: 40px;
}

.pricing-cards-wrap .price-card.card-tertairy {
    --card-thm: var(--tertiary);
    --card-color: var(--ter-invert);
}

.pricing-cards-wrap .price-card.card-secondary {
    --card-thm: var(--secondary);
}
.pricing-section  .pricing-bottom-description {
    font-size: 14px;
    /* color: #5F5F5F; */
    opacity: 0.8;
    max-width: 800px;
    margin: 0 auto;
}
.section-top-contents {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 100px;
}

.section-top-contents .sub-heading {
    font-size: 22px;
    margin: 0;
}

.about-banner .banner-thumb {
    max-width: 450px;
    margin: 0 auto;
}

.about-banner  .row {
    align-items: center;
}

.about-banner .description {
    font-size: 20px;
}
.about-banner .banner-contents-wrap h2 {
    margin-bottom: 40px;
}

.about-banner .banner-contents-wrap {
    max-width: 550px;
    padding: 20px 0;
    margin: 0 auto;
}

.about-banner .banner-contents-wrap .download-apps-wrap {
    margin-top: 80px;
}

.divider .hr {
    border-top: 1px solid #CBBDBD;
}
/*****About Page******/
.about-page {
    background-image: url(../images/about-page-bg.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
/******contact page********/
.contact-form .form-inner-wrap {
    max-width: 740px;
    margin: 0 auto;
}

.contact-form .input-wrap input, .contact-form .input-wrap textarea {
    width: 100%;
    border: 1px solid currentColor;
    border-radius: 10px;
    padding: 22px 15px 6px;
    outline: none;
    resize: none;
}

.contact-form .input-wrap {
    position: relative;
    overflow: hidden;
}

.contact-form .input-wrap label {
    position: absolute;
    top: 1px;
    left: 1px;
    padding: 14px 15px;
    background-color: #fff;
    border-radius: 10px;
    right: 1px;
    max-width: 100%;
    pointer-events: none;
    transition: all 0.15s ease-in-out;
}

.contact-form .input-wrap input:focus + label, .contact-form .input-wrap textarea:focus + label, .contact-form .input-wrap input.isfilled + label, .contact-form .input-wrap textarea.isfilled + label {
    padding: 2px 15px 0;
    font-size: 14px;
    color: var(--primary);
}

.contact-form  .captcha-preview {line-height: 0;border-radius: 10px;overflow: hidden;border: 1px solid currentColor;width: max-content;max-width: 100%;margin-top: 20px;}

.contact-form .row {
    --bs-gutter-x: 2.5rem;
}

.contact-form .form-cta-wrap {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}

.contact-form .form-cta-wrap .accept-terms {
    display: flex;
    align-items: center;
    gap: 20px;
    line-height: 1.2;
}

.contact-form .accept-terms input[type=checkbox] {appearance: none;-webkit-appearance: none;-moz-appearance: none;width: 25px;height: 25px;border: 2px solid var(--primary);border-radius: 4px;background-position: center;background-size: contain;background-repeat: no-repeat;cursor: pointer;}

.contact-form form {
    font-family: "Inter", sans-serif;
}

.contact-form .accept-terms input[type=checkbox]:checked {
    background-color: var(--primary);
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M896 298.666667 384 810.666667 149.333333 576 209.493333 515.84 384 689.92 835.84 238.506667 896 298.666667Z' fill='%23fff'/%3E%3C/svg%3E");
}
.pricing-cards-wrap .price-card .discount-badge svg {
    width: 16px;
    height: auto;
    margin-right: 15px;
}

.price-card .description ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.price-card .description {
    text-align: left;
    font-size: 12px;
    margin: 0 auto 50px;
    max-width: 200px;
}

.price-card .description ul li {
    position: relative;
    padding-left: 30px;
}

.price-card .description ul li:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='18' viewBox='0 0 25 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.65234 8.83823L9.09352 16.2794L23.6523 1.72058' stroke='%23E3265C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.price-card .description ul li:not(.last-child) {
    margin-bottom: 10px;
}
.price-card.pricing-full.card-primary .amount {
    color: var(--primary);
}

.price-card.pricing-full.card-tertairy .amount {
    color: var(--tertiary);
}

.price-card.pricing-full .duration {
    margin-bottom: 10px;
}


.price-card.pricing-full .cancel-notoe {
    margin-bottom: 30px;
}

.price-card.pricing-full.card-tertairy .description ul li::before {
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='18' viewBox='0 0 25 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.2168 8.83823L8.65797 16.2794L23.2168 1.72058' stroke='%23E7B86A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
}
/*********Pages CSs*************/
/*******Dark Theme Style**********/

body.thm-dark {
    background-image: linear-gradient(180.2deg, #1B1A1A 0.17%, #333233 82.58%, #000000 112.92%);
    color: #fff;
    background-color: #000;
    --card-bg: #1a1a1a;
    --border-light: #383838;
    --text-clr: #fff;
    --card-hover: #333;
    --card-active: #333;
    --bg-thm: #000;
    --text-light: #aaa;
    --thm-grey: #555;
}
body.about-page.thm-dark {
    background-image: url(../images/about-page-bg.png), linear-gradient(180.2deg, #1B1A1A 0.17%, #333233 82.58%, #000000 112.92%);
}.thm-dark .testimonials-section .testi-graphic {
    background-image: url(../images/testimonial-dark-shape.png);
}.thm-dark .download-apps-wrap .btn-google-play {
    background: #F3EFE7;
    color: #5F6368;
}

.thm-dark .download-apps-wrap .btn-google-play:hover {
    background-color: #fff;
    color: #000;
}
.thm-dark .stats-counts .count-label {
    color: inherit;
}
.thm-dark .header-inner .logo-wrapper .logo-th-light {
    display: none;
}
.thm-dark .header-inner .logo-wrapper .logo-thm-dark {
    display: block;
}
.thm-dark .hero-banner .hero-sm-description {
    color: inherit;
}
.thm-dark .bg-light {
    background-color: rgb(240 246 246 / 5%) !important;
}
.thm-dark .contact-form .input-wrap label {
    background: #212020;
}
.thm-dark .hero-banner .hero-users-wrap {
    color: inherit;
}
.thm-dark .contact-form .input-wrap input, .thm-dark .contact-form .input-wrap textarea {
    border-color: #fff;
    background-color: #212020;
    color: #fff;
}
.thm-dark .faq-section .accordion-item {
    background: #424242;
    color: #fff;
}

.thm-dark .faq-section .accordion-item .accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg width='43' height='24' viewBox='0 0 43 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M38.2441 0.285118C38.6473 -0.10261 39.313 -0.0933787 39.7256 0.303582L42.5948 3.06384C43.0073 3.4608 43.0167 4.10702 42.6135 4.49474L22.6697 23.3457C22.4634 23.5488 22.1821 23.6412 21.9102 23.6227C21.6289 23.6319 21.3569 23.5396 21.1507 23.3457L1.20678 4.49474C0.803589 4.10702 0.812966 3.4608 1.22553 3.06384L4.09475 0.303582C4.50732 -0.0933787 5.17305 -0.10261 5.57624 0.285118L21.9102 15.7204L38.2441 0.285118Z' fill='%23fff'/%3E%3C/svg%3E%0A");
}
.thm-dark .testi-slider-wrap .client-thumb {
    border-color: var(--white);
}
.thm-dark .features-row-col .rows-wrap .row:nth-child(odd):before {
    content: "";
    position: absolute;
    top: 10%;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    padding-bottom: 32%;
    background-image: url(../images/feature-dark-offset-1.png);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
}
.thm-dark .features-row-col .rows-wrap .row:nth-child(even):before {
    content: "";
    position: absolute;
    top: 10%;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    padding-bottom: 32%;
    background-image: url(../images/feature-dark-offset-2.png);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
}
.faq-section .faq-announce .thm-dark {
    display: none;
}

.thm-dark .faq-section .faq-announce .thm-dark {
    display: block;
}

.thm-dark .faq-section .faq-announce .thm-light {
    display: none;
}
/*******DArk Theme Style***********/
/**********Auth Page*************/
main.main-content.auth-main {
    padding-bottom: 80px;
    min-height: calc(100vh - 90px);
    display: flex;
    align-items: center;
}
body.auth-page {
    background-image: url(../images/auth-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    --body-font-size: 14px;
}
main.auth-main {
}
header.auth-header {
    padding: 40px 0;
}

header.auth-header .menu-list {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: end;
    gap: 5%;
}

header.auth-header .menu-list .menu-link {
    font-size: 16px;
    font-weight: 600;
}

.auth-main .social-logins {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 300px;
    margin: 0 auto;
}

.auth-main .social-logins .btn-white {
    background: #fff;
    width: 100%;
}

.auth-main .social-logins .btn {
    width: 100%;
    text-align: left;
    padding: 13px 20px;
    margin-bottom: 12px;
    display: inline-flex;
    align-items: center;
    /* font-size: 14px; */
}
.auth-main .social-logins .btn img {
    margin-right: 18px;
    object-fit: contain;
}

.auth-main .already-account {
    text-align: center;
    margin-top: 20px;
}

.clr-secondary {
    color:  var(--secondary)
}
.clr-tertairy {
    color:  var(--tertiary)
}
.auth-card {
    background: #fff;
    color: #000;
    border-radius: 20px;
    padding: 40px 50px;
}
.auth-card .top-contents {
    text-align: center;
    margin-bottom: 20px;
}

.auth-card .top-contents h2 {
    font-weight: 600;
    color: #353233;
}

.auth-card .top-contents .sub-heading {
    color: #584F51;
    max-width: 360px;
    margin: 0 auto;
}

.auth-card input, .auth-card textarea {
    width: 100%;
    border: 1px solid #CDD8E4;
    border-radius: 6px;
    padding: 10px 15px;
    /* font-size: 14px; */
    resize: none;
}

.auth-card .row {
    --bs-gutter-x: 15px;
    --bs-gutter-y: 15px;
}
.auth-container {
    max-width: 1150px;
    margin: 0 auto;
}

form .password-wrap {
    position: relative;
}

form .password-wrap .toggle-pass {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 18px;
    color: rgb(102 102 102 / 80%);
    cursor: pointer;
    transition: color 0.15s ease-in-out;
}

form .password-wrap .toggle-pass i {
    pointer-events: none;
    display: inline-block;
    width: 25px;
    text-align: center;
}
form .password-wrap .toggle-pass .fa-eye {
    display: none;
}
form .password-wrap .toggle-pass.active .fa-eye {
    display: inline-block;
}
form .password-wrap .toggle-pass.active .fa-eye-slash{
    display: none;
}
.auth-card ::placeholder {
    color: #403448;
}

form .password-wrap input[type=password] {
    padding-right: 50px;
}

form .password-wrap .toggle-pass:hover {
    color: #000;
}
.auth-card .submit-wrap .btn {
    width: 100%;
}

.auth-card .submit-wrap {
    margin-top: 15px;
}
.auth-card .radio-wrap {
    width: 100%;
    display: flex;
    margin-top: 2px;
}

.auth-card .radio-wrap .item {
    flex: 1 0 0%;
    width: auto;
    display: flex;
    align-items: center;
}

.auth-card .radio-wrap input[type=radio] {
    flex: 0 0 auto;
    width: auto;
}

.auth-card input[type=radio] {
    border: 1px solid #000;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 0;
    width: 16px !important;
    height: 16px !important;
    border-radius: 100%;
    cursor: pointer;
}

.auth-card .group-name span {
    color: #666;
}

.auth-card .dob-wrap {
    width: 100%;
    display: flex;
    gap: 10px;
}

.auth-card .dob-wrap .item {
    width: auto;
    flex: 1 0 0%;
}

.auth-card .group-name {
    margin-bottom: 14px;
}

.auth-card .input-group {
    margin-bottom: 45px;
}

.auth-card .dob-wrap .item label:not(.error) {
    color: #666;
}

.auth-card .dob-wrap .item select {
    width: 100%;
    border: 1px solid #CDD8E4;
    border-radius: 10px;
    padding: 10px 10px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-size: 14px;
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.41 0.59L6 5.17L10.59 0.59L12 2L6 8L0 2L1.41 0.59Z' fill='%23666666'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) 50%;
    background-size: 11px;
}

.auth-card input[type=radio]:checked {border-color: var(--primary);background-color: var(--primary);box-shadow: 0 0 0 2px var(--white) inset;}

.auth-card label {
    cursor: pointer;
    margin-bottom: 5px;
    font-size: 14px;
}
.auth-card .radio-wrap  label {
    padding-left: 10px;
    margin: 0;
}

.input-wrap .drop-zone-overlay {
    border: 1px dashed #CDD8E4;
    border-radius: 4px;
    padding: 12px 20px;
    text-align: center;
    position: relative;
    background: #fff;
}

.input-wrap .drop-zone-overlay ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    /* width: 100%; */
    margin: 0 -11px;
    min-width: 100%;
}
.drop-zone-overlay .preview-item .card-wrap {
    background-color: #f7fafc;
    /* color: transparent; */
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drop-zone-overlay .preview-item .card-wrap.card-image .inner-section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 40%);
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: 0.15s ease-in-out;
}

.drop-zone-overlay .preview-item .card-wrap .inner-section {
    padding: 10px;
    text-align: left;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.drop-zone-overlay .preview-item .card-wrap .inner-section > .flex {
    margin-top: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.drop-zone-overlay .preview-item .card-wrap .inner-section  button.delete {
    margin-left: auto;
    border: none;
    background: #fff;
    width: 35px;
    height: 35px;
    padding: 8px !important;
    border-radius: 5px;
}

.drop-zone-overlay .preview-item .card-wrap .inner-section button.delete svg {
    width: 100%;
    height: 100%;
    vertical-align: text-top;
    pointer-events: none;
}


.drop-zone-overlay .preview-item .card-wrap .inner-section .filesize {
    margin: 0;
    font-size: 14px;
}

.drop-zone-overlay .preview-item .card-wrap .inner-section .name {
    font-size: 14px;
    flex-grow: 1;
    height: 20px;
    overflow: hidden;
    display: -webkit-box;
}
.drop-zone-overlay .preview-item .card-wrap.card-image:hover .inner-section {
    opacity: 1;
    visibility: visible;
}

.drop-zone-overlay .preview-item .card-wrap > img {
    max-width: 80%;
    max-height: 100%;
    object-fit: contain;
}
.drop-zone-overlay .preview-item .card-wrap:not(.card-image) > img {
    display: none;
}
.drop-zone-overlay .preview-item {
    width: 100%;
    flex: 1 0 0%;
    padding: 18px 9px 0;
}

.drop-zone-overlay.draggedover {
    border-color: var(--text-clr);
}
.drop-zone-overlay.draggedover:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: #fff;
    opacity: 0.4;
}
.input-label-group, .input-opt-group {
    margin-bottom: 20px;
}
.steps-viewport {
    overflow: hidden;
}
.steps-track{display:flex;width:100%;transition: transform 0.3s ease-in-out;}
.step{flex:0 0 100%;/* box-sizing:border-box; */}

.pagination{display:flex;gap:8px;justify-content:center;padding: 25px 0 0;}
.pagination .bullet{width:10px;height:10px;border-radius: 10px;background:#D9D9D9;cursor:pointer;position:relative;border: none;outline: none;box-shadow: none;padding: 0;transition: all 0.15s ease-in-out;}
.pagination .bullet.active{background: var(--primary);width: 25px;}
.pagination .bullet-label{position:absolute;top:-28px;left:50%;transform:translateX(-50%);font-size:12px;color:#334155;display:none}
.pagination .bullet:hover .bullet-label{display:block}

.auth-card label.error {
    color: #dc2626;
    font-size: 12px;
    margin-top: 6px;
    display: block;
    margin-top: 2px;
}
.steps-track .step-inner {
    padding: 10px;
}

form#signup-form {
    margin: -10px;
}
.radio-wrap + .group-error {
    margin-top: 5px;
}
.auth-card .opt-item {
    display: flex;
    align-items: flex-start;
    color: #666;
    /* max-width: 350px; */
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.auth-card .opt-item label {
    font-size: 12px;
}
.auth-card  input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 15px !important;
    height: 15px !important;
    padding: 0;
    border-radius: 4px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    cursor: pointer;
}

.auth-card .opt-item label {
    margin: 0;
    flex: 1 0 0%;
}

.auth-card .opt-item input[type=checkbox] {
    margin-right: 10px;
    margin-top: 2px;
    flex: 0 0 auto;
}

.auth-card .opt-item label a {
    color: #111;
    text-decoration: underline;
}

.auth-card input[type=checkbox]:checked {
    background-color: var(--primary);
    border-color: var(--primary);
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 12.6111L8.92308 17.5L20 6.5' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.auth-card .opt-item label.error {
    order: 999;
    width: 100%;
    flex: 0 0 auto;
    margin-left: 28px;
    margin-top: 2px;
}
/*********Auth Page**************/
/*******Dashboard Pages*********/
.admin-dashboard {
    min-height: 100vh;
}

.dashboard-header {
    padding: 30px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-light);
    gap: 30px;
    z-index: 99;
    position: relative;
}

.dashboard-header .header-actions-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-grow: 0.6;
    justify-content: flex-end;
}

.user-profile-wrapper {
    position: relative;
}

.user-profile-wrapper button.user-drop-toggle {
    color: #fff;
    background: #666;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-weight: 700;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
}

.user-profile-wrapper button.user-drop-toggle img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: max-content;
    min-width: 14rem;
    outline: transparent solid 2px;
    outline-offset: 2px;
    background: var(--card-bg);
    color: var(
    --text-clr);
    border: 1px solid var(
    --border-light);
    z-index: 1;
    border-radius: 20px;
    padding: 0px;
    margin-top: 10px;
    display: none;
}

.dropdown .dropdown-head {
    padding: 16px 20px 12px;
    width: 100%;
    border-bottom: 1px solid rgb(230, 236, 250);
    border-top-color: rgb(230, 236, 250);
    border-right-color: rgb(230, 236, 250);
    border-left-color: rgb(230, 236, 250);
    font-size: var(--chakra-fontSizes-sm);
    font-weight: 700;
    color: var(--chakra-colors-navy-700);
}

.dropdown .dropdown-head p {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.8;
}

.dropdown ul.dropdown-list {
    padding: 10px;
    margin: 0;
    list-style: none;
}

.dropdown ul.dropdown-list .dropdown-item a {
    font-weight: 600;
    /* font-size: 14px; */
    line-height: 25px;
    padding: 6px 12px;
    display: inline-block;
    width: 100%;
}

.dropdown .dropdown-item {
    color: inherit;
    padding: 0;
    border-radius: 10px;
}

.dropdown .dropdown-item:focus, .dropdown .dropdown-item:hover {
    background-color: var(--card-hover);
}

.dashboard-header  .cta-wrap {
    display: flex;
    gap: 20px;
}

.dashboard-header  .cta-wrap .btn {
    background-color: var(--card-bg);
    color: var(--text-clr);
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px;
}
.dashboard-header .cta-wrap .btn:hover {
    background-color: var(--card-hover);
}
body.admin-dashboard {
    background-color: var(--bg-thm);
    background-image: none;
    --body-font-size: 14px;
}

.dashboard-header .cta-wrap .btn svg {
    width: auto;
}.dashboard-header .header-search input {
    background-color: var(--card-bg);
    border: none;
    color: var(--text-clr);
    padding: 12px 20px 12px 52px;
    height: 50px;
    border-radius: 8px !important;
    width: 100%;
}

.dashboard-header .header-search ::placeholder {
    color: inherit;
    opacity: 0.8;
}

.dashboard-header  .header-search {
    flex-grow: 0.8;
}
.dashboard-header .header-search svg {
    position: absolute;
    top: 8px;
    left: 10px;
    width: 30px;
    height: 35px;
    opacity: 0.6;
}
.dashboard-main .main-inner {
    padding: 30px 40px;
}

.dashboard-main .main-inner .middle-content {padding-bottom: 40px;}

.dashboard-main .main-inner .right-content {min-height: calc(100vh - 172px);position: sticky;top: 0;margin-top: -30px;padding-top: 30px;}
.create-new-wrap button.btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: auto;
    padding: 10px 20px;
}
.dashboard-main .main-inner .middle-content .nav-pills {
    gap: 40px 50px;
    align-items: center;
    margin-bottom: 30px;
    padding-left: 5px;
}
.dashboard-main .main-inner .middle-content .nav-pills .nav-link {
    font-size: 16px;
    /* min-width: 100px; */
    padding: 8px 0;
    color: inherit;
    border-radius: 8px;
    background: transparent;
    opacity: 0.5;
    /* text-align: left; */
}

.dashboard-main .main-inner .middle-content .nav-pills .nav-link.active {opacity: 1;transform: scale(1.45);/* padding: 0; *//* font-size: 24px; */}
.thm-dark .modal-content {
    background-color: #000;
}

.thm-dark .modal-backdrop {
    background-color: #666;
}

.novel-modal .modal-content {
    border-radius: 20px;
}

.novel-modal .modal-content .modal-header {
    border: none;
    padding: 20px 30px;
}

.novel-modal .modal-content .modal-header .btn-close {
    background: var(--card-bg);
    color: #fff;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: none;
    padding: 8px;
    width: 35px;
    height: 35px;
    box-sizing: border-box;
    box-shadow: none;
    border-radius: 50%;
}

.novel-modal .modal-content .modal-header .btn-close svg {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

.novel-modal .modal-content .modal-header .btn-close:hover {
    background-color: var(--card-hover);
}

.novel-modal .modal-content .modal-body {
    padding: 10px 30px 20px;
    flex: 0 0 auto;
}

.novel-modal .modal-content .modal-body input, .novel-modal .modal-content .modal-body select {
    width: 100%;
    background-color: transparent;
    border: 1px solid var(--border-light);
    padding: 10px 20px;
    border-radius: 4px;
    color: var(--text-clr);
}

.novel-modal .modal-content .modal-body .input-wrap {
    margin-bottom: 20px;
}

.thm-dark .input-wrap .drop-zone-overlay:not(.thm-inherit) {
    background-color: transparent;
    border-color: var(--border-light);
}

.thm-dark .drop-zone-overlay:not(.thm-inherit) .preview-item .card-wrap {
    background-color: var(--card-bg);
}

.novel-modal .modal-content .modal-footer {
    padding: 20px 30px;
    border-color: var(--border-light);
    justify-content: flex-end;
}

.novel-modal .modal-content .modal-footer .btn-none {
    color: inherit;
    opacity: 0.5;
}

.novel-modal .modal-content .modal-footer .btn-none:hover {
    opacity: 1;
}
.modal .modal-body .input-wrap label.error {
    color: red;
    font-size: 12px;
    display: block;
    margin-top: 4px;
}

span.select2.select2-container {
  width: 100% !important;
}

span.select2.select2-container .select2-selection__rendered {
  color: var(--text-clr);
  padding: 15px 20px;
  font-size: inherit;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
}

span.select2.select2-container span.select2-selection {
  border-radius: 4px !important;
  border: 1px solid var(--border-light);
  background: transparent;
  height: auto;
}

span.select2.select2-container span.select2-selection__arrow {
  width: 20px;
  height: 20px;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10' viewBox='0 0 18 10' fill='none'%3E%3Cpath d='M17 1L9.14599 8.41606L1 0.999999' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 15px;
}

span.select2.select2-container span.select2-selection__arrow b {
  display: none;
}

span.select2.select2-container .select2-selection__rendered span.select2-selection__placeholder {
  color: inherit;
  opacity: 0.4;
}

select.select-2 {
  width: 100%;
  appearance: none;
  color: #000;
  padding: 16px 20px;
  font-family: "Gilroy";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  border-radius: 10px !important;
  border: 1px solid #e8e8e8;
  background: #fff;
  height: auto;
  background-position: calc(100% - 23px) 50%;
  background-repeat: no-repeat;
  background-size: 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10' viewBox='0 0 18 10' fill='none'%3E%3Cpath d='M17 1L9.14599 8.41606L1 0.999999' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

span.select2-container span.select2-dropdown {
  position: relative;
  background: var(--bg-thm);
  border: 1px solid var(--border-light);
  border-radius: 4px !important;
  overflow: hidden;
}

body .select2-container--default .select2-results__option--selected {
  background: var(--card-hover);
}

body .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: var(--primary);
}

.select2-container .select2-search--dropdown {
  padding: 8px 8px;
}

.select2-container .select2-search--dropdown input.select2-search__field {
  border: 1px solid #dbe2ea;
  border-radius: 5px;
  outline: none;
  transition: all 0.2s ease;
}

.select2-container .select2-search--dropdown input.select2-search__field:focus {
  border-color: #000;
}

body .select2-container--default .select2-results>.select2-results__options {
  max-height: 300px;
  overflow-y: auto;
}

body .select2-container .select2-results__option {
  padding: 10px 14px;
  outline: none;
  font-weight: 400;
}

span.select2-container.li-nowrap .select2-results__option {
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
}


.novel-modal .modal-content .modal-body label {
    margin-bottom: 8px;
}

.thm-dark span.select2.select2-container span.select2-selection__arrow {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10' viewBox='0 0 18 10' fill='none'%3E%3Cpath d='M17 1L9.14599 8.41606L1 0.999999' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.book-card .thumb-wrap {
    position: relative;
    padding-bottom: 148%;
    border-radius: 15px;
    overflow: hidden;
    z-index: 1;
    margin-bottom: 20px;
}

.book-card .thumb-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.book-card .title {
    font-weight: 600;
}

.book-card .sub-heading {
    margin: 0;
    font-size: 14px;
    color: var(--border-regular);
    opacity: 0.8;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.books-listing.row {
    --bs-gutter-y: calc(var(--bs-gutter-x) * 1.6);
}
/******Dashboard Pages*********/
/*************Write A Novel**************/
.writing-header {
    padding: 30px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-light);
    z-index: 6;
}

.writing-header .header-left {
    display: flex;
    align-items: center;
}

.writing-header .header-right {
    display: flex;
    align-items: center;
}
.writing-header .header-right .btn.btn-cta {
    background-color: var(--card-bg);
    color: var(--text-clr);
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    margin-left: 20px;
}

.writing-header .header-right .btn.btn-cta:hover {
    background-color: var(--card-hover);
}
.writing-header .title {
    margin-bottom: 4px;
}

.writing-header .pub-info {
    margin: 0;
    font-size: 13px;
    opacity: 0.8;
}

.writing-header .header-left .back-to-dash {
    width: 42px;
    height: 42px;
    display: inline-flex;
    justify-content: center;
    align-items: 
center;
    padding: 10px;
    background-color: var(--card-bg);
    border-radius: 50%;
    margin-right: 20px;
    transition: all 0.15s ease-in-out;
}

.writing-header .header-right .user-profile-wrapper {
    margin-left: 20px;
}

.write-novel-main .writing-content-wrap {
    padding: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    z-index: 2;
}

.writing-header .header-left .back-to-dash:hover {
    background-color: var(--card-hover);
}

.write-novel-main .writing-content-wrap .ql-toolbar {
    border: 1px solid var(--border-light);
    background-color: var(--border-light);
    position: sticky;
    top: 0;
    z-index: 9;
    padding: 12px 30px;
}

.write-novel-main .writing-content-wrap .ql-toolbar .ql-picker {
    color: inherit;
}

.write-novel-main .writing-content-wrap .ql-toolbar .ql-stroke {
    stroke: currentColor;
}

.write-novel-main .writing-content-wrap .ql-toolbar .ql-formats button {
    color: inherit;
    border-radius: 5px;
}

.write-novel-main .writing-content-wrap .ql-toolbar .ql-fill {
    fill: currentColor;
}

.write-novel-main .writing-content-wrap .ql-toolbar .ql-picker-options {
    background: var(--card-bg);
}

.write-novel-main .writing-content-wrap .ql-container {
    border-color: var(--border-light);
    flex-grow: 1;
    padding: 30px 40px;
    font-family: inherit;
    font-size: inherit;
}

.write-novel-main {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.write-novel-main .writing-content-wrap select, .write-novel-main .writing-content-wrap button {
    background-color: transparent;
    border: none;
    color: inherit;
}
.ql-snow.ql-toolbar button, .ql-snow .ql-toolbar button {
    width: auto;
}
.ql-editor.ql-blank::before {
    color: var(--text-clr);
    opacity: 0.8;
    left: 0;
}
.write-novel-main .writing-content-wrap .ql-editor {
    padding: 0;
    position: relative;
}
.ql-editor p, .ql-editor ol, .ql-editor ul, .ql-editor pre, .ql-editor blockquote, .ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6 {
    margin-bottom: 1rem;
}
.write-novel-main .writing-content-wrap .ql-toolbar .ql-formats:not(:last-child) {
    border-right: 1px solid var(--border-regular);
    padding-right: 15px;
}
.ql-snow.ql-toolbar button:hover, .ql-snow .ql-toolbar button:hover, .ql-snow.ql-toolbar button:focus, .ql-snow .ql-toolbar button:focus, .ql-snow.ql-toolbar button.ql-active, .ql-snow .ql-toolbar button.ql-active, .ql-snow.ql-toolbar .ql-picker-label:hover, .ql-snow .ql-toolbar .ql-picker-label:hover, .ql-snow.ql-toolbar .ql-picker-label.ql-active, .ql-snow .ql-toolbar .ql-picker-label.ql-active, .ql-snow.ql-toolbar .ql-picker-item:hover, .ql-snow .ql-toolbar .ql-picker-item:hover, .ql-snow.ql-toolbar .ql-picker-item.ql-selected, .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
    color: var(--primary);
}

.ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow .ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button:focus .ql-stroke, .ql-snow .ql-toolbar button:focus .ql-stroke, .ql-snow.ql-toolbar button.ql-active .ql-stroke, .ql-snow .ql-toolbar button.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow.ql-toolbar button:hover .ql-stroke-miter, .ql-snow .ql-toolbar button:hover .ql-stroke-miter, .ql-snow.ql-toolbar button:focus .ql-stroke-miter, .ql-snow .ql-toolbar button:focus .ql-stroke-miter, .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter, .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
    stroke: var(--primary);
}
.ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow .ql-toolbar button:hover .ql-fill, .ql-snow.ql-toolbar button:focus .ql-fill, .ql-snow .ql-toolbar button:focus .ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-fill, .ql-snow .ql-toolbar button.ql-active .ql-fill, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill, .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill, .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{
    fill: var(--primary);
}
.write-novel-main .writing-content-wrap .ql-toolbar .dir-toggle {display: inline-flex;align-items: center;padding: 4px 6px 0px;}
.write-novel-main .writing-content-wrap .ql-toolbar .dir-toggle:hover {
    color: var(--primary);
}
.write-novel-main .writing-content-wrap .ql-toolbar .ql-formats button:hover {
    background-color: var(--border-regular);
}

.ql-toolbar.ql-snow .ql-picker-label:hover {
    background-color: var(--border-regular);
}

.write-novel-main .writing-content-wrap .ql-toolbar .ql-formats .ql-picker-label {
    border-radius: 5px;
}
/**********Write A Noval*****************/

/*****Book Detail*******/
.book-detail-wrap .metadata-wrap .meta-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-light);
    margin-bottom: 10px;
}

.book-detail-wrap .sub-title {
    color: var(--text-light);
}

.book-detail-wrap  .metadata-wrap {display: flex;gap: 40px;margin: 30px 0;}

.book-detail-wrap .metadata-wrap .meta-label .icon {
    background-color: var(--card-bg);
    color: var(--text-clr);
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border-radius: 10px;
}

.book-detail-wrap .stat-cta-wrap {
    display: flex;
    align-items: center;
    gap: 40px;
    margin: 30px 0;
}

.book-detail-wrap .stat-cta-wrap .item {
    gap: 10px;
    display: flex;
    align-items: center;
}

.book-detail-wrap .description .desc-full {
    display: none;
}

.book-detail-wrap .description-wrap .view-toggle {
    padding: 0 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    border: none;
    color: inherit;
}

.book-detail-wrap .product-thumb {
    background-color: var(--card-bg);
    position: relative;
    padding-bottom: 148%;
    border-radius: 15px;
    overflow: hidden;
    z-index: 1;
    margin-bottom: 20px;
}

.book-detail-wrap .product-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.book-detail-wrap.main-inner > .row {
    --bs-gutter-x: 50px;
}

.book-chapter-listing {
    margin-top: 50px;
    border-top: 1px solid var(--border-light);
    padding-top: 50px;
}

.book-chapter-listing .top-contents {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
}

.book-chapter-listing .top-contents .count {
    width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    border-radius: 50%;
}

.book-chapter-listing .top-contents .name {
    margin: 0;
}

.book-chapter-listing .top-contents .cta-wrap {
    margin-left: auto;
    display: flex;
    gap: 10px;
}

.book-chapter-listing .top-contents .cta-wrap .btn {
    background-color: var(--card-bg);
    color: var(--text-clr);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 20px;
    gap: 6px;
    border-radius: 15px;
}

.book-chapter-listing .top-contents .cta-wrap .btn svg {
    width: 20px;
    height: 20px;
}

.book-chapter-listing .top-contents .cta-wrap .btn:hover {
    background-color: var(--card-hover);
}

.book-chapter-listing .item {
    margin-bottom: 50px;
}
/*****Book Detail*********/
.nav-tabs {
    border-bottom: 1px solid var(--thm-grey);
}

.nav-tabs .nav-link {
    color: inherit;
    padding: 10px 22px;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    background-color: var(--thm-grey);
    border-color: var(--thm-grey);
    color: var(--text-clr);
}

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    border-color: var(--thm-grey);
}
.static-page-content table {
    border: 1px solid var(--thm-grey);
}

.static-page-content table td, .static-page-content table th {
    padding: 10px;
    border: 1px solid var(--thm-grey);
}
/******Media Queries*********/
@media (min-width: 1400px) {
    
}
@media(min-width: 992px){

    .dashboard-main .main-inner > .row {
        --bs-gutter-x: 60px;
    }

    .dashboard-main .main-inner > .row > .col-lg-9 {border-right: 1px solid var(--border-light);}
}
@media(min-width: 768px){
    
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 90%;
    }
    .pt-md-6{
        padding-top: 5rem;
    }
    .pt-md-7{
        padding-top: 7rem;
    }
    .pt-md-9{
        padding-top: 9rem;
    }
    .pt-md-8{
        padding-top: 10rem;
    }
    .pt-md-9{
        padding-top: 12rem;
    }


    .pb-md-6{
        padding-bottom: 5rem;
    }
    .pb-md-7{
        padding-bottom: 7rem;
    }
    .pb-md-7{
        padding-bottom: 9rem;
    }
    .pb-md-8{
        padding-bottom: 10rem;
    }
    .pb-md-9{
        padding-bottom: 12rem;
    }
    .static-page-content .nav-tabs .nav-link {
        flex: 1 0 0%;
    }
}

@media(max-width: 1199px){
 
}

@media(max-width: 991px){
    
    h1, .h1 {
        font-size: 3.2rem;
    }
    h2, .h2 {
        font-size: 2.6rem;
    }
    h3, .h3 {
        font-size: 2.2rem;
    }
    h4, .h4 {
        font-size: 1.6rem;
    }
    .auth-card {
        padding: 30px 30px;
    }
    .header-inner ul.main-menu {
        display: none;
    }
    .watch-video-graphic {
        padding-bottom: 40%;
    }
    header.header {
        padding: 25px 0;
    }
    .hero-banner .top-right-graphic {
        max-width: 60%;
    }
    .create-new-wrap {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 99;
    }
    .analytics-section {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--bg-thm);
        z-index: 999;
        max-height: 100vh;
        overflow: auto;
        padding: 20px;
        transform: translateX(100%);
        transition: 0.2s ease-in-out;
        transition-property: transform, visibility;
    }

    .dashboard-main .main-inner .right-content {
        position: unset;
        min-height: unset;
        margin-top: 0;
        padding-top: 0;
    }

    .analytics-section.show {
        transform: none;
        visibility: visible;
    }
    .analytics-section .btn-close {
        position: absolute;
        top: 20px;
        right: 20px;
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        background: transparent;
        opacity: 1;
        padding: 0px;
        box-sizing: border-box;
    }

    .analytics-section .btn-close svg {
        max-width: 100%;
    }
}

@media(max-width: 767px){
    body{
        --body-font-size: 14px;
    }
    
    h1, .h1 {
        font-size: 3rem;
    }
    h2, .h2 {
        font-size: 1.9rem;
    }
    h3, .h3 {
        font-size: 1.6rem;
    }
    h4, .h4 {
        font-size: 1.4rem;
    }
    .pt-6{
        padding-top: 5rem;
    }
    .pt-7{
        padding-top: 7rem;
    }
    .pt-9{
        padding-top: 9rem;
    }
    .pt-8{
        padding-top: 10rem;
    }
    .pt-9{
        padding-top: 12rem;
    }
    .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        --bs-gutter-x: 15px;
    }
    header.auth-header .menu-list .menu-link {
        font-size: 16px;
    }
    .auth-card{
        padding: 30px 20px;
    }
    .auth-main .social-logins {
        margin-top: 40px;
    }
    .back-top {
        right: 15px;
        bottom: 15px;
        width: 45px;
        height: 45px;
        padding: 10px;
    }
    main.main-content.auth-main {padding-bottom: 50px;}

    .pagination .bullet {
        width: 8px;
        height: 8px;
    }
    .header-inner .logo-wrapper {
        max-width: 40%;
    }

    .hero-banner {
        padding: 30px 0;
    }

    .download-apps-wrap .btn-google-play {
        font-size: 14px;
        padding: 10px 20px;
    }

    .download-apps-wrap .btn-google-play img {
        width: 15px;
    }

    .hero-banner .hero-thumb {
        margin-top: 30px;
    }

    .hero-banner h1, .thm-dark .hero-banner .hero-sm-description, .hero-banner .hero-users-wrap {
        margin-bottom: 25px;
    }

    .stats-counts .row > *:not(:last-child) {border-right: 0;}

    .stats-counts .row > *:not(:last-child) .count-label {
        border-bottom: 2px solid #666;
        padding-bottom: 25px;
    }

    .stats-counts .counts {
        font-size: 25px;
        margin-bottom: 5px;
    }

    .stats-counts .count-label {
        font-size: 16px;
    }

    .stats-counts .icon {
        width: 20px;
        height: 20px;
    }

    .stats-counts .row {
        --bs-gutter-x: 1rem;
    }

    .recommended-articles {
        padding: 60px 0 50px;
    }

    .stats-counts {
        padding-bottom: 80px;
    }

    .section-heading-center {
        margin-bottom: 40px;
    }

    .card-recomend {
        margin-bottom: 20px;
    }

    .rating-outer {
        --w: 140px;
    }

    .card-recomend .rating-outer {
        margin-top: 20px;
    }

    .new-realese {
        padding: 70px 0 60px;
    }

    .features-row-col {
        padding: 60px 0 20px;
    }

    .features-row-col .description {
        font-size: 18px;
        margin-top: 20px;
    }

    .features-row-col .rows-wrap .row:nth-child(even) {
        flex-wrap: wrap-reverse;
    }

    .features-row-col .row {
        padding: 40px 0;
    }

    .features-row-col .rows-wrap .row:nth-child(even) .thumb {
        padding-right: 40px;
    }

    .thm-dark .features-row-col .rows-wrap .row:nth-child(even):before {
        padding-bottom: 60%;
        top: 20%;
    }

    .thm-dark .features-row-col .rows-wrap .row:nth-child(odd):before {
        padding-bottom: 60%;
        top: 20%;
    }

    .thm-dark .features-row-col .rows-wrap .row:nth-child(odd) .thumb {
        padding-left: 20px;
    }

    .watch-video-section {
        padding: 60px 0;
    }

    .watch-video-section .top-contents .sub-heading {
        font-size: 18px;
    }

    .watch-video-section .top-contents h2 {
        margin-bottom: 20px;
    }
    .watch-video-card .video-control {
        width: 50px;
        height: 50px;
        padding: 12px;
    }

    .watch-video-graphic {
        padding-top: 2%;
    }

    .testimonials-section-inner {
        padding: 40px 0;
    }

    .testimonials-inner h2.section-heading-center {
        font-size: 2.4rem;
    }

    .testimonials-inner .sm-divider {
        height: 8px;
        width: 70px;
        margin: 30px auto;
    }

    .testi-slider-wrap .testi-card {
        font-size: 18px;
    }

    .testi-slider-wrap .testimonial-slider .description {
        margin-bottom: 30px;
    }

    .faq-section {
        padding: 50px 0;
    }

    .faq-section .section-heading-wrap h2 {
        font-size: 2.4rem;
        margin-bottom: 30px;
    }

    .faq-section .sm-divider {margin-bottom: 30px;}

    .faq-section .sub-heading {
        font-size: 16px;
        margin-bottom: 30px;
    }

    .sm-divider {
        width: 60px;
    }

    .faq-section .accordion-item .accordion-button {
        font-size: 18px;
        padding: 20px 20px;
    }

    .faq-section .accordion-item .accordion-body {
        padding: 20px;
        font-size: 18px;
    }

    .faq-section .accordion-item:not(:last-child) {
        margin-bottom: 20px;
    }
    .faq-section .accordion-item {
        border-radius: 10px;
    }
    .pricing-section {
        padding: 50px 0;
    }

    .pricing-cards-wrap .price-card .discount-badge {
        font-size: 13px;
        width: 150px;
    }

    .pricing-cards-wrap .price-card .amount {
        font-size: 1.5rem;
    }

    footer.footer-main .footer-downloads {
        padding: 50px 0;
    }

    footer.footer-main .footer-downloads h2 {
        font-size: 1.8rem;
        margin-bottom: 30px;
    }

    .download-links a {
        font-size: 16px;
        padding: 8px 30px;
    }

    .download-links a svg, .download-links a img {
        width: 24px;
    }

    .footer-inner .footer-contents-wrap {
        padding-top: 30px;
        padding-bottom: 20px;
    }

    .footer-inner .logo-wrap img {
        width: 160px;
    }

    .footer-inner .social-links .social-link {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .footer-inner .social-links {
        margin-bottom: 20px;
        margin-top: 10px;
    }

    footer.footer-main .footer-bottom-bar {
        text-align: center;
        justify-content: center;
        padding: 25px 0;
        gap: 10px;
    }

    footer.footer-main .footer-bottom-bar .bottom-menu {
        justify-content: center;
    }
    .footer-inner .logo-wrap {
        margin-bottom: 10px;
    }
    .pricing-section .pricing-bottom-description {
        font-size: 12px;
    }
    .section-top-contents .sub-heading {
        font-size: 16px;
    }
    .contact-form .row {--bs-gutter-x: 1.5rem;}

    .contact-form .form-cta-wrap .accept-terms {
        gap: 10px;
        font-size: 12px;
    }

    .contact-form .accept-terms input[type=checkbox] {
        width: 22px;
        height: 22px;
    }

    .section-top-contents {
        margin-bottom: 60px;
    }
    .about-banner .banner-thumb {
        max-width: 250px;
    }

    .about-banner .banner-contents-wrap h2 {
        margin-bottom: 20px;
    }

    .about-banner .description {
        font-size: inherit;
    }

    .about-banner .banner-contents-wrap .download-apps-wrap {
        margin-top: 30px;
    }
    .pricing-cards-wrap .row {
        --bs-gutter-y: 3rem;
    }
    .static-page-content h1, .static-page-content .h1 {
        font-size: 1.8rem;
    }
    .static-page-content h2, .static-page-content .h2 {
        font-size: 1.4rem;
    }
    .static-page-content h3, .static-page-content .h3 {
        font-size: 1.2rem;
    }
    .static-page-content h4, .static-page-content .h4 {
        font-size: 1.1rem;
    }
    .static-page-content h5, .static-page-content .h5 {
        font-size: 1rem;
    }
    .writing-header {
        flex-wrap: wrap;
        padding: 20px 15px;
    }

    .write-novel-main .writing-content-wrap .ql-container {
        padding: 20px 15px;
    }

    .write-novel-main .writing-content-wrap .ql-toolbar {
        padding: 10px 15px;
    }
    .dashboard-main .main-inner {
        padding: 20px 15px;
    }
    .dashboard-header .cta-wrap .btn {
        display: none;
    }
    .dashboard-header .header-search {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--bg-thm);
        padding: 20px 15px;
        display: none;
        border-top: 1px solid var(--border-light);
    }

    .dashboard-header .search-toggle {
        color: var(--text-clr);
        border: none;
        padding: 0 2px;
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .dashboard-header .search-toggle svg {max-width: 100%;}
    .user-profile-wrapper button.user-drop-toggle {
    width: 40px;
    height: 40px;
}

.dashboard-header .header-actions-wrap {
    gap: 12px;
}

.dashboard-header .logo-wrap img {
    max-width: 130px;
}

.dropdown ul.dropdown-list {
    padding: 8px;
}

.dropdown {
    border-radius: 15px;
    min-width: 11rem;
}

.dropdown ul.dropdown-list .dropdown-item a {
    font-size: 90%;
    padding: 3px 10px;
}
    .dashboard-header {
        padding: 20px 15px;
    }
    .dashboard-main .main-inner .middle-content .nav-pills {
        gap: 20px 35px;
        margin-bottom: 20px;
    }
    .dashboard-main .main-inner .middle-content .nav-pills .nav-link.active {
        transform: scale(1.3);
    }
    .book-card .title {
        font-size: 1rem;
    }
    .books-listing.row {
        --bs-gutter-y: calc(var(--bs-gutter-x) * 1.3);
    }
    .create-new-wrap button.btn {
        width: 50px;
        height: 50px;
        padding: 14px;
    }

    .create-new-wrap button.btn svg {
        max-width: 100%;
        height: auto;
    }
    .novel-modal .modal-content .modal-header, .novel-modal .modal-content .modal-body, .novel-modal .modal-content .modal-footer {
        padding-left: 15px;
        padding-right: 15px;
    }

    .novel-modal .modal-content .modal-footer .btn-submit {
        padding: 10px 30px;
    }

    .novel-modal .modal-dialog .modal-content {
        border-radius: 10px;
    }

    .novel-modal .modal-content .modal-body input, .novel-modal .modal-content .modal-body select {
        padding: 9px 15px;
    }

    span.select2.select2-container .select2-selection__rendered {
        padding: 12px 15px;
    }
    #silktide-banner {
        padding: 20px;
    }
    #silktide-banner {
        padding: 20px;
    }

    #silktide-modal {
        padding: 20px;
    }

    #silktide-modal h1 {
        font-size: 20px;
    }

    #silktide-modal p {
        font-size: 14px;
    }

    #silktide-modal .modal-close {
        padding: 6px;
    }

    #silktide-modal .switch__off, #silktide-modal .switch__on {
        font-size: 11px;
        right: 6px;
    }

    #silktide-modal .switch {
        width: 58px;
        height: 30px;
    }

    #silktide-modal .switch .switch__pill {
        width: 100%;
        height: 100%;
    }

    #silktide-modal .switch .switch__dot {
        width: 26px;
        height: 26px;
    }

    #silktide-modal .switch input:checked ~ .switch__dot {
        left: calc(100% - 28px);
    }

    #silktide-modal .switch input:checked ~ .switch__off {
        right: calc(100% - 32px);
    }

    #silktide-modal .switch input:checked ~ .switch__on {
        right: calc(100% - 26px);
    }
}
/******Media Queries End******/