@import url(https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Sora:wght@100..800&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100..900&family=Noto+Naskh+Arabic:wght@400..700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap);
@import url(../css/bootstrap.min.css);


@font-face {
    font-family: 'droid_arabic_kufiregular';
    src: url('../fonts/alfont_com_alfont_com_droidkufi-regular-webfont.woff2') format('woff2'),
        url('../fonts/alfont_com_alfont_com_droidkufi-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

a,
body {
    color: var(--black)
}

.navbar-nav .active>a,
.navbar-nav .nav-link:hover {
    color: var(--yellow) !important
}

.experience-badge,
.users-badge {
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1)
}

.fw-400,
body {
    font-weight: 400
}

.animate-fade-in,
.circle-image {
    animation: 1s fadeInUp
}

*,
h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0
}

.password-toggle,
.play-button {
    cursor: pointer
}

.carousel-caption,
.divider,
.register-link,
.rightArrow {
    text-align: center
}

:root {
    --purple: #5248DD;
    --white: #FFFFFF;
    --black: #000;
    --lt-black: #263238;
    --yellow: #FFA909;
    --grey2: #5D5D5D;
    --grey3: #292929;
    --stroke: #666666;
    --lightPurple: #F6F5FF;
    --textLightPurle: #A7A1F6;
    --btnLightPurple: #E4E2FF;
    --blue: #434CF4;
    --linkColor: #4F58D8
}

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

a {
    text-decoration: none
}

body {
    font-family: Sora;
    font-size: 14px;
    line-height: normal;
    background-color: var(--lightPurple)
}

.custom-container {
    width: 100%;
    max-width: 1460px;
    margin: 0 auto;
    padding: 0 12px
}

.font-outfit {
    font-family: Outfit
}

.font-sora {
    font-family: Sora
}

.font-16 {
    font-size: 16px
}

.font-18 {
    font-size: 18px
}

.font-20,
.watch-story span {
    font-size: 20px
}

.font-21 {
    font-size: 21px
}

.font-30,
.section-Subheading {
    font-size: 30px
}

.font-32,
.play-button i {
    font-size: 32px
}

.fw-500 {
    font-weight: 500
}

.fw-600 {
    font-weight: 600
}

.fw-700 {
    font-weight: 700
}

.fw-900,
.navbar-nav .active>a {
    font-weight: 900
}

.top-bar {
    padding: 8px 0
}

.header {
    position: sticky;
    top: 0;
    z-index: 1050;
    transition: .3s
}

.navbar-nav {
    gap: 24px
}

.navbar-nav .nav-link {
    color: var(--black);
    font-size: 16px;
    font-weight: 500
}

.navbar-toggler {
    border: none
}

.navbar-toggler-icon {
    width: 25px;
    height: 25px
}

.navbar-toggler:focus {
    box-shadow: none;
    outline: none;
}

.rightWrapper {
    gap: 20px
}

.search img {
    width: 20px;
    height: 20px
}

.loginBox .loginBtn {
    background-color: var(--red);
    color: var(--white);
    padding: 5px 12px;
    border-radius: 4px
}

.offcanvas {
    background-color: var(--white)
}

.offcanvas-body {
    padding: 20px
}

.btn-outline-purple,
.btn-purple {
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase
}

.offcanvas .nav-link {
    font-size: 16px;
    color: var(--black)
}

.middle-header-line {
    background-color: var(--stroke);
    opacity: 1
}

.carousel-overlay,
.input-group {
    position: relative
}

.carousel-item img,
.carousel-overlay img {
    object-fit: cover;
    height: 100vh
}

.carousel-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 2
}

.carousel-caption h2 {
    font-size: 65px;
    color: var(--white);
    margin-bottom: 35px
}

.btn-group {
    gap: 12px
}

.btn-purple {
    background-color: var(--purple);
    border: 1px solid var(--purple);
    color: var(--white);
    border-radius: 0
}

.btn-outline-purple,
.btn-purple:hover {
    color: var(--purple);
    border: 1px solid var(--purple);
    background-color: var(--white)
}

.btn-outline-purple:hover,
.custom-circle-indicators .active {
    background-color: var(--purple)
}

.btn-outline-purple {
    border-radius: 0
}

.btn-outline-purple:hover {
    border: 1px solid var(--purple);
    color: var(--white)
}

.custom-circle-indicators [data-bs-target] {
    border-radius: 50%;
    width: 20px;
    height: 20px
}

.mob-logo {
    display: none
}

#logo {
    max-width: 300px;
    transition: .3s ease-in-out
}

.small-logo {
    max-width: 200px !important
}

.carousel-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .6);
    z-index: 1
}

.about-section {
    padding: 100px 0 40px
}

.about-section::before {
    height: 90px;
    width: 96px;
    top: 40px;
    left: -30px
}

.about-section::after {
    height: 100px;
    width: 103px;
    bottom: 30px;
    right: -30px
}

@keyframes blink-scale {

    0%,
    100% {
        opacity: 1;
        transform: scale(1)
    }

    50% {
        opacity: .5;
        transform: scale(1.2)
    }
}

.section-title {
    color: var(--yellow);
    font-weight: 700;
    margin-bottom: 15px
}

.circle-image {
    position: relative;
    width: 600px;
    height: 600px;
    border-radius: 50%
}

.circle-image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.users-badge {
    top: 0;
    left: 0;
    width: 160px;
    height: 160px;
    position: absolute;
    background-color: var(--white);
    border-radius: 50%;
    padding: 40px 0
}

.users-badge span {
    color: var(--yellow);
    font-size: 50px
}

.users-badge p {
    color: var(--black);
    font-size: 30px
}

.experience-badge {
    bottom: -20px;
    left: -20px;
    background: linear-gradient(to bottom, var(--purple), #7089ed);
    color: var(--white);
    width: 250px;
    height: 250px;
    padding: 70px 10px;
    white-space: normal;
    position: absolute;
    border-radius: 50%
}

.fav-corner-sec,
.secWithStar::after,
.secWithStar::before {
    background-repeat: no-repeat;
    background-position: center center
}

.bookWithIcon,
.checkedPurple,
.linkColor1,
.play-button i,
.watch-story {
    color: var(--purple)
}

.experience-badge span {
    font-size: 55px
}

.experience-badge p {
    font-size: 25px;
    font-weight: 400;
    line-height: 1.2
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.checkedPurple {
    padding-right: 10px
}

.listing-Checked {
    line-height: 1.3
}

.sublistSpc {
    padding-left: 34px;
    line-height: 1.5
}

.play-button {
    width: 70px;
    height: 70px;
    background-color: var(--white);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: transform .2s
}

.play-button::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-top: 3px solid var(--purple);
    border-radius: 50%;
    animation: 1.5s linear infinite spin
}

.play-button::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-bottom: 3px solid #7089ed;
    border-radius: 50%;
    animation: 1.5s linear infinite spin-reverse
}

@keyframes spin {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes spin-reverse {
    from {
        transform: rotate(360deg)
    }

    to {
        transform: rotate(0)
    }
}

.play-button:hover {
    transform: scale(1.1)
}

.rightArrow i,
.yellow-color {
    color: var(--yellow)
}

.dash-title {
    position: relative;
    padding-left: 40px;
    line-height: 1
}

.dash-title::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 35px;
    height: 2px;
    background-color: var(--white);
    z-index: 1
}

.dash-title.yellow-color::before {
    background-color: #ffb108
}

.section-heading {
    font-size: 35px
}

.section-heading2 {
    font-size: 40px
}

.sec-para {
    color: #333
}

.solidBtn {
    display: inline-block;
    background-color: #5248dd;
    border: 1px solid #5248dd;
    color: #fff;
    padding: 20px 50px;
    transition: .3s
}

.solidBtn:hover {
    background-color: transparent;
    color: #5248dd
}

.secWithStar::after,
.secWithStar::before {
    content: "";
    background-image: url(./images/bgstar.png);
    background-size: contain;
    position: absolute;
    animation: 1.5s ease-in-out infinite blink-scale
}

.hollowTxt {
    font-size: 70px;
    writing-mode: sideways-lr;
    -webkit-text-stroke: 2px rgb(0 0 0 / 18%);
    color: transparent;
    line-height: 1
}

.footer,
a.ftr-link {
    color: var(--white)
}

.about-us-sec {
    padding: 100px 0
}

.fav-corner-sec {
    padding: 128px 0;
    /* background-image: url(./images/favCornerBg.jpg); */
    background-size: cover
}

.testimonial-sec {
    padding: 95px 0;
    background-color: #e9e7ff
}

.testimonial-card {
    background-color: #fff;
    box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .1);
    padding: 22px 10px
}

.tc-user {
    border-top: 1px solid #ccc
}

.testimonial-sec .owl-carousel .owl-item {
    padding: 10px
}

.owl-carousel .owl-item .selling-card img,
.owl-carousel .owl-item .testimonial-card img {
    width: auto
}

.owl-carousel__nav .owl-carousel__next,
.owl-carousel__nav .owl-carousel__prev {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--purple);
    border-radius: 100%;
    cursor: pointer
}

.testimonial-sec::before {
    height: 90px;
    width: 96px;
    bottom: 22px;
    left: -30px
}

.testimonial-sec::after {
    height: 100px;
    width: 103px;
    top: 32px;
    right: -30px
}

.footer {
    background: var(--black);
    padding: 45px 0 5px
}

.ftr-desc {
    font-size: 15px;
    line-height: 1.6;
    margin-top: 11px
}

a.ftr-link {
    transition: .3s linear;
    display: flex;
    gap: 8px
}

a.ftr-link img {
    filter: grayscale(1) invert(1) brightness(2)
}

a.ftr-link:hover {
    color: var(--blue)
}

a.ftr-link:hover img {
    filter: none;
    transition: .2s linear
}

.newsletter .btn {
    background: var(--blue);
    border-radius: 0 8px 8px 0;
    padding: 13px 24px
}

.newsletter input[type=email] {
    border-radius: 8px 0 0 8px;
    background-color: #161f26;
    font-weight: 200;
    border: none
}

.newsletter input::placeholder {
    color: var(--white);
    font-weight: 200
}

.newsletter input[type=email]:focus,
.newsletter input[type=email]:focus-visible {
    outline: 0;
    box-shadow: none;
    border: none
}

.ftr-social-link {
    border: 1px solid var(--white);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px
}

.ftr-social-link:hover {
    border-color: var(--blue)
}

.copyright {
    border-top: 1px solid #273b48;
    margin-top: 26px;
    padding: 15px 6px 0
}

.copyright .ftr-link,
.copyright-txt {
    font-weight: 300;
    font-size: 15px
}

.linkColor2 {
    color: var(--linkColor)
}

.commonForm-container {
    background-color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    padding: 40px 20px;
    background-image: url('./images/bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center
}

.commonFormWrapper {
    width: 100%;
    max-width: 1280px;
    margin: auto;
    box-shadow: 3px 3px 20px 0 rgba(0, 0, 0, .1);
    border-radius: 10px;
    background-color: var(--white)
}

.primaryTabs,
.selling-card {
    box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .1)
}

.commonForm-left {
    /* background-color: #f2f3ff;
    padding: 59px 39px 24px; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.commonForm-right {
    padding: 64px 48px
}

.formtop {
    margin-bottom: 32px
}

.formtop h1 {
    font-size: 45px;
    font-weight: 700
}

.commonFormWrapper .commonForm-form .form-control {
    padding: 12px 15px;
    border-radius: 10px;
    border: 2px solid #eee;
    transition: .3s
}

.input-group-text {
    border: none;
    background: 0 0;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    color: var(--stroke)
}

.btn-login {
    padding: 12px 20px;
    background: var(--blue);
    border: none;
    border-radius: 10px;
    font-weight: 500;
    width: 100%;
    transition: .3s
}

.btn-login:hover {
    transform: translateY(-2px);
    background: var(--blue);
    box-shadow: 0 5px 15px rgba(0, 98, 204, .3)
}

.social-login {
    display: flex;
    gap: 10px;
    margin-top: 24px;
    justify-content: center
}

.btn-social {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    border: 2px solid #eee;
    transition: .3s;
    max-width: fit-content
}

.btn-social:hover {
    background: #f8f9fa;
    transform: translateY(-2px)
}

.btn-social i {
    margin-right: 10px
}

.divider {
    margin: 24px 0;
    position: relative
}

.divider::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 2px;
    background: #c7c7CC80
}

.divider span {
    background: var(--white);
    padding: 0 16px;
    color: var(--stroke);
    font-size: .9rem;
    position: relative;
    z-index: 1
}

.commonForm-form label {
    margin-bottom: 4px;
    font-size: 14px;
    line-height: 1
}

.commonForm-form input::placeholder {
    color: #b0b0b0;
    font-size: 16px
}

.form-check {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0;
    padding: 0
}

.inpCheckWrap {
    display: flex;
    align-items: center;
    gap: 7px
}

.inpCheckWrap .form-check-input,
.inpCheckWrap .form-check-label {
    float: none;
    margin: 0
}

.register-link {
    margin-top: 20px;
    font-size: .9rem
}

.inpCheckWrap input:checked {
    box-shadow: none;
    position: relative;
    background-color: var(--linkColor);
    border-color: var(--linkColor)
}

.inpCheckWrap input:checked::before {
    content: "";
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    border: 1px solid var(--linkColor);
    position: absolute;
    top: -3px;
    left: -3px;
    border-radius: 4px
}

.form-check-input:focus {
    border-color: var(--linkColor);
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(79, 88, 216, .25)
}

.forgotPassWrap .formtop h1 {
    margin-top: 75px
}

.rightArrow {
    border: 1px solid var(--yellow);
    width: 24px;
    height: 24px;
    border-radius: 50%
}

.selling-card {
    background-color: var(--white);
    padding: 10px;
    transition: all 0.3s ease;
    transform: translateY(0px);
    /* height: 77%; */
    height: 100%;
}

.selling-card:hover {
    transform: translateY(-10px);
}

.dash-title-center {
    position: relative;
    line-height: 1
}

.dash-title-center::before {
    content: "";
    position: absolute;
    top: 50%;
    /* left: 26%; */
    left: 23%;
    /*Change beacuse the - was overlapping the text*/
    transform: translateY(-50%);
    width: 35px;
    height: 2px;
    background-color: var(--white);
    z-index: 1
}

.dash-title-center.yellow-color::before {
    background-color: var(--yellow)
}

.trendigComic-sec {
    padding: 80px 0;
    background-color: #e9e7ff
}

.trendigComic-sec::before {
    height: 90px;
    width: 96px;
    bottom: 60px;
    right: -35px
}

.trendigComic-sec::after {
    height: 100px;
    width: 103px;
    top: 60px;
    left: -35px
}

.section-headingWidth {
    font-size: 35px;
    max-width: 650px
}

.bookWithIcon p {
    font-size: 14px;
    font-weight: 400
}

.primaryTabs {
    z-index: 1;
    position: relative;
    top: 0px;
    transition: top 0.3s ease;
}

.primaryTabs:hover {
    top: -10px;
}

.nav-pills .nav-link.btn-primaryLink {
    color: var(--textLightPurle);
    border: none;
    background-color: var(--btnLightPurple);
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 0
}

.nav-pills .nav-link.btn-primaryLink.active {
    background-color: var(--purple);
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--white);
    border-radius: 0
}

.inner-banner {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.67) 0%, rgba(0, 0, 0, 0.49) 55%, rgba(0, 0, 0, 0.64) 100%);
    position: relative;
    z-index: 1;
    padding: 20px 0;
}

.inner-banner:before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.67) 0%, rgba(0, 0, 0, 0.49) 55%, rgba(0, 0, 0, 0.64) 100%);
    position: absolute;
    z-index: 1;
    padding: 20px 0;
    content: "";
    display: block;
    width: 100%;
    left: 0;
    height: 100%;
    top: 0;
}

.inner-banner .row {
    min-height: 500px;
}

.inner-banner h2 {
    font-family: Outfit;
    font-weight: 500;
    font-size: 65px;
    line-height: 100%;
    text-align: center;
    color: #ffffff;
}

.bg-fixed {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    position: absolute;
    object-fit: cover;
}

.inner-banner .container {
    position: relative;
    z-index: 2;
}

.dash-title-center2:before {
    content: "";
    position: relative;
    width: 35px;
    height: 2px;
    z-index: 1;
    display: inline-block;
    background: var(--yellow);
    margin: 5px 5px;
}

.dash-title-center2 {
    position: relative;
    line-height: 1;
    font-size: 18px;
    font-weight: 600;
}

.bestselling-comic-section {
    padding: 100px 0 40px;
}

.contatc-us-sec {
    padding: 100px 0 80px;
}

.bestselling-comic-section .selling-card {
    /* margin-bottom: 30px; */
}

.lh-1_8 {
    line-height: 1.8;
}

.svg-icon-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

.svg-icon-list {}

.svg-icon-list li svg {
    display: inline-block;
}

.squre-double-image {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding-bottom: 80px;
}

.squre-double-image .sd-image-1 {
    flex: 0 0 calc(50% - 15px);
    max-width: calc(50% - 15px);
    position: relative;
    top: 47px;
}

.squre-double-image .sd-image-2 {
    flex: 0 0 calc(50% - 15px);
    max-width: calc(50% - 15px);
}

.squre-double-image .badge {
    position: absolute;
    bottom: 0;
    z-index: 1;
    background: #ffffff;
}

.squre-double-image .badge p {
    color: #333333;
}

.squre-double-image .badge {
    position: absolute;
    bottom: 0;
    z-index: 1;
    background: #ffffff;
    width: 253px;
    padding: 24px 18px;
    box-shadow: 2px 2px 20px 0px #00000026;

    transform: translateX(-50%);
    left: 50%;
    bottom: 0px;
}

.squre-double-image .badge p {
    color: #333333;
    white-space: normal;
    font-family: Sora;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    margin-top: 12px;
}

.checked-why-section {
    padding: 65px 0 40px;
    background-color: #e9e7ff;
}

.about-section-2 {
    padding: 100px 0 100px;
}

.icon-card {
    text-align: center;
    background: #FFFFFF;
    padding: 42px 30px;
    box-shadow: 2px 2px 20px 0px #00000026;
}

.icon-card .icon-box {
    background-color: #FFA908;
    width: 80px;
    height: 80px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.icon-card p {
    font-size: 16px;
    line-height: 1.5;
}

.bg-changed-2 {
    /* background-image: url(../images/bg1.jpg);    */
}

.required {
    color: red;
}

.form-design {
    padding-right: 30px;
}

.form-design .form-control {
    height: auto;
    padding: 14px 15px;
    font-size: 16px;
}

.form-design label.form-label {
    font-family: Sora;
    font-weight: 400;
    font-size: 20px;
    line-height: 100%;
}

.contact-us-sec {
    padding: 100px 0 90px;
}

.btn-1 {
    background-color: #5248DD;
    padding: 20px 60px;
    border-radius: 0px;
    color: #fff;
    font-family: Sora;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    border: 2px solid #5248DD;
    text-transform: uppercase;
    transition: border-color .3s, color .3s, background-color .3s;
}

.btn-1:focus,
.btn-1:active,
.btn-1:hover {
    background-color: #212529;
    border-color: #212529;
    color: #fff;
}

.form-design .form-control:focus {
    box-shadow: none;
}

.contact-strip {
    padding: 36px 0;
    position: relative;
    z-index: 1;
    background-color: #434CF4;
}

.icon-contact-box {
    display: flex;
}

.icon-contact-box .ic-icon {
    flex: 0 0 70px;
    max-width: 70px;
    background: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    border-radius: 8px;
}

.icon-contact-box .ic-content {
    align-self: center;
    padding-left: 20px;
}

.accordion-design {}

.accordion-design .accordion-item {
    padding: 0px;
    margin: 15px 0;
}

.accordion-design .accordion-button:not(.collapsed) {
    background-color: #5248dd33;
    color: #5248dd;
}

.accordion-design .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235248dd'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.bestselling-comic-section:before {
    width: 145px;
    height: 145px;
    top: 40px;
    left: -50px;

}

.bestselling-comic-section:after {
    width: 106px;
    height: 106px;
    top: 70%;
    right: -36px;
}

.about-section-2:before,
.about-section-2:after {
    width: 100px;
    height: 100px;
}

.about-section-2:before {
    left: -20px;
    top: 30px;
}

.about-section-2:after {
    right: -20px;
    top: 70%;
}

.svg-icon-list li {
    text-align: center;
}

.faq-sec {
    padding: 100px 0;
}



.btn-purple {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.btn-purple:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: #5248dd;
    top: 0%;
    z-index: 0;
    left: 0;
    z-index: -1;
    transition: all 0.3s ease;
}

.btn-purple:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    background-color: #ffffff;
    top: auto;
    bottom: 0;
    z-index: 0;
    left: 0;
    z-index: -1;
    transition: all 0.3s ease;
}

.btn-purple:hover:before {
    top: -100%;
}

.btn-purple:hover:after {
    height: 100%;
}

.btn-outline-purple {
    position: relative;
    z-index: 1;
    background: transparent;
    overflow: hidden;
}

.btn-outline-purple:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    top: 0%;
    z-index: 0;
    left: 0;
    z-index: -1;
    transition: all 0.3s ease;
}

.btn-outline-purple:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    background-color: #5248dd;
    top: auto;
    bottom: 0;
    z-index: 0;
    left: 0;
    z-index: -1;
    transition: all 0.3s ease;
}

.btn-outline-purple:hover:before {
    top: -100%;
}

.btn-outline-purple:hover:after {
    height: 100%;
}

.form-design .btn-purple {
    /* padding: 20px 60px; */
}

/* Custom CSS */

.main-menu-more {
    display: none;
}

.current-menu-item a {
    color: var(--yellow) !important
}

/* ===========================
   Support Page Styles
=========================== */
.support-section {
    background-color: #f8f9fa;
    padding: 100px 0;
}

.support-icon {
    background: var(--btnLightPurple);
    padding: 10px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 15px;
}

.support-icon i {
    color: var(--purple);
    font-size: 18px;
}

.support-card {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.support-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.support-card h3 {
    color: #333;
    margin-bottom: 15px;
}

.support-card p {
    color: #666;
    margin-bottom: 20px;
}

.accordion-item {
    border: 1px solid rgba(0, 0, 0, 0.125);
    margin-bottom: 10px;
    border-radius: 5px;
}

.accordion-button {
    font-weight: 600;
    color: #333;
}

.accordion-button:not(.collapsed) {
    background-color: #f8f9fa;
    color: #007bff;
}

.accordion-body {
    color: #666;
    line-height: 1.6;
}


/* ===========================
   Product Details Page Styles
=========================== */
.product-details-sec {
    background-color: #f8f9fa;
    padding: 80px 0;
}

.product-gallery {
    position: relative;
}

.main-image {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #e7e7e7;
    padding: 20px;
}

.main-image img {
    width: 100%;
    height: auto;
    transition: opacity 0.3s ease;
    max-height: 480px;
    object-fit: contain;
}

.thumbnail-slider {
    position: relative;
}

.thumbnail-slider .item {
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    padding: 5px;
}

.thumbnail-slider .item.active {
    border-color: var(--purple);
}

.thumbnail-slider .item img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    transition: transform 0.3s ease;
}

.thumbnail-slider .item:hover img {
    transform: scale(1.05);
}

.thumbnail-slider .owl-carousel__nav {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 10;
    width: 100%;
    justify-content: center;
}

.thumbnail-slider .owl-carousel__prev,
.thumbnail-slider .owl-carousel__next {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--purple);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.thumbnail-slider .owl-carousel__prev:hover,
.thumbnail-slider .owl-carousel__next:hover {
    background-color: var(--yellow);
    transform: scale(1.1);
}

.thumbnail-slider .owl-carousel__prev img,
.thumbnail-slider .owl-carousel__next img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
}

.product-info {
    padding: 20px;
}

.product-title {
    font-size: 2.5rem;
    color: #333;
}

.product-meta .badge {
    background-color: var(--purple);
    color: white;
    padding: 8px 15px;
    font-size: 14px;
    font-weight: 500;
}

.product-rating .stars {
    color: #ffc107;
    font-size: 1.2rem;
}

.product-description {
    color: #666;
    line-height: 1.6;
}

.product-details ul li {
    color: #666;
}

.product-price .price {
    color: var(--purple);
    font-size: 2rem;
}

.product-actions {
    margin-top: 30px;
}

.product-actions .btn {
    padding: 12px 30px;
    font-weight: 600;
    text-transform: uppercase;
}

.product-tabs {
    margin-top: 50px;
}

.product-tabs .nav-pills {
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

.product-tabs .nav-link {
    color: #666;
    font-weight: 600;
    padding: 10px 20px;
    margin-right: 10px;
}

.product-tabs .nav-link.active {
    background-color: var(--purple);
    color: white;
}

.tab-content {
    padding: 30px 0;
}

.review-item {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.review-header {
    margin-bottom: 10px;
}

.review-text {
    color: #666;
    line-height: 1.6;
}




/* Password Strength Checker start */

.password-strength-group .password-strength-meter {
    width: 100%;
    transition: height 0.3s;
    display: flex;
    justify-content: stretch;
}

.password-strength-group .password-strength-meter .meter-block {
    height: 6px;
    background: #eee;
    margin-right: 6px;
    flex-grow: 1;
}

.password-strength-group .password-strength-meter .meter-block:last-child {
    margin: 0;
}

.password-strength-group .password-strength-message {
    height: 1em;
    text-align: right;
    transition: all 0.5s;
    margin-top: 3px;
    position: relative;
}

.password-strength-group .password-strength-message .message-item {
    position: absolute;
    right: 0;
    opacity: 0;
    transition: opacity 0.2s;
}

/* Activated States */
.password-strength-group[data-strength="1"] .meter-block:nth-child(-n + 1) {
    background: #f51c25;
}

.password-strength-group[data-strength="2"] .meter-block:nth-child(-n + 2) {
    background: #f8a34c;
}

.password-strength-group[data-strength="3"] .meter-block:nth-child(-n + 3) {
    background: #f5c60b;
}

.password-strength-group[data-strength="4"] .meter-block:nth-child(-n + 4) {
    background: #a6d608;
}

.password-strength-group[data-strength="5"] .meter-block:nth-child(-n + 5) {
    background: #1d9c04;
}

.password-strength-group[data-strength="1"] .message-item:nth-child(1) {
    opacity: 1;
    color: #f51c25;
}

.password-strength-group[data-strength="2"] .message-item:nth-child(2) {
    opacity: 1;
    color: #f8a34c;
}

.password-strength-group[data-strength="3"] .message-item:nth-child(3) {
    opacity: 1;
    color: #f5c60b;
}

.password-strength-group[data-strength="4"] .message-item:nth-child(4) {
    opacity: 1;
    color: #a6d608;
}

.password-strength-group[data-strength="5"] .message-item:nth-child(5) {
    opacity: 1;
    color: #1d9c04;
}

/* Password Strength Checker end */






/* chatbot css  */

#comic-chatbot-icon {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #FFA908;
    color: white;
    border-radius: 50%;
    cursor: pointer;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: #FFA909;
    transition: border 0.3s;
    animation: blink1 1s infinite alternate;
}


@keyframes blink1 {
    from {
        box-shadow: none;
    }

    to {
        box-shadow: 0px 0px 8px 10px #ffa90938;
    }
}

#comic-chatbot-icon img {
    width: 50px;
    height: auto;
    object-fit: contain;
}

#comic-chatbot-window {
    position: fixed;
    bottom: 125px;
    right: 20px;
    max-width: 320px;
    background: white;
    padding: 10px 12px 14px 12px;
    box-shadow: 0px 4px 12px rgb(0 0 0 / 20%);
    z-index: 99999;
    max-height: 400px;
    overflow-y: auto;
    border-radius: 8px 8px 0px 8px;
}

.comic-suggestion {
    margin-top: 10px;
    border-top: 1px solid #ddd;
    padding-top: 10px;
}

.chat_close {
    /* use this ✗ as text  */
    font-weight: 600;
    cursor: pointer;
    position: absolute;
    top: 6px;
    right: 10px;
}


/* custom fade in animation  */

.customFadeIn {
    --data-speed: attr(data-speed);
    opacity: 0;
    transition: all 700ms;
    transform: translate(0, 100px);
}

.customFadeIn2 {
    opacity: 0;
    transition: all 700ms;
    transform: unset;
}

.customFadeIn.animate {
    opacity: 1;
    transform: translate(0, 0);
}

/* Style changes 24-06-2025 */
.users-badge,
.experience-badge {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.translated-rtl .gt_float_switcher img {
    margin: 0 0 0 5px !important;
}

.translated-rtl .wpcf7,
.translated-rtl .wpcf7 input[type="url"],
.translated-rtl .wpcf7 input[type="email"],
.translated-rtl .wpcf7 input[type="tel"] {
    direction: rtl;
}

.translated-rtl .form-design {
    padding-right: 0;
    padding-left: 30px;
}

.translated-rtl .icon-contact-box .ic-content {
    padding-left: 0;
    padding-right: 20px;
}

#gt_float_wrapper {
    top: 15px !important;
}

.gt_float_switcher {
    font-size: 16px !important;
}

.translated-rtl .newsletter .btn {
    border-radius: 8px 0 0 8px;
}

.translated-rtl .about-section .container>.row .col-lg-6:first-child {
    padding-left: 30px !important;
    padding-right: 0 !important;
}

.circle-image {
    width: auto;
    height: auto;
}

/* Font Size Changes 24-06-2025 */

.section-heading2,
.section-heading,
.section-headingWidth,
.formtop h1,
.users-badge span,
.experience-badge span {
    /* font-size: 32px; */
    font-size: 36px;
}

.font-30,
.font-32,
.section-Subheading,
.play-button i {
    /* font-size: 24px; */
    font-size: 28px;
}

.font-18,
.font-20,
.font-21,
.watch-story span,
.dash-title-center2,
.support-icon i,
.users-badge p,
.experience-badge p {
    /* font-size: 18px; */
    font-size: 22px;
}

.font-16,
body,
.navbar-nav .nav-link,
.nav-pills .nav-link.btn-primaryLink,
.nav-pills .nav-link.btn-primaryLink.active,
.ftr-desc,
.copyright .ftr-link,
.copyright-txt,
.btn-outline-purple,
.btn-purple,
.offcanvas .nav-link,
.commonForm-form input::placeholder,
.bookWithIcon p,
.squre-double-image .badge p,
.icon-card p,
.form-design .form-control,
.form-design label.form-label,
.btn-1 {
    /* font-size: 14px; */
    font-size: 16px;
}

.navbar-nav .nav-link {
    /* font-size: 16px; */
    font-size: 20px;
}

/* Arabic */
/* .translated-rtl .section-heading2, 
.translated-rtl .section-heading, 
.translated-rtl .section-headingWidth,
.translated-rtl .formtop h1,
.translated-rtl .users-badge span,
.translated-rtl .experience-badge span{
    font-size: 28px;
}

.translated-rtl .font-30, 
.translated-rtl .font-32,
.translated-rtl .section-Subheading,
.translated-rtl .play-button i{
    font-size: 22px;
}

.translated-rtl .font-18,
.translated-rtl .font-20,
.translated-rtl .font-21, 
.translated-rtl .watch-story span,
.translated-rtl .dash-title-center2,
.translated-rtl .support-icon i,
.translated-rtl .users-badge p,
.translated-rtl .experience-badge p{
    font-size: 16px;
}


.translated-rtl .font-16, 
.translated-rtl body,
.translated-rtl .navbar-nav .nav-link, 
.translated-rtl .nav-pills .nav-link.btn-primaryLink, 
.translated-rtl .nav-pills .nav-link.btn-primaryLink.active,
.translated-rtl .ftr-desc, .copyright .ftr-link, .copyright-txt,
.translated-rtl .btn-outline-purple,
.translated-rtl .btn-purple,
.translated-rtl .offcanvas .nav-link,
.translated-rtl .commonForm-form input::placeholder,
.translated-rtl .bookWithIcon p,
.translated-rtl .squre-double-image .badge p,
.translated-rtl .icon-card p,
.translated-rtl .form-design .form-control,
.translated-rtl .form-design label.form-label,
.translated-rtl .btn-1{
    font-size: 13px;
} */
/* font-family fot Arabic version */
.translated-rtl body,
.translated-rtl p {
    font-family: "Noto Kufi Arabic", sans-serif;
}

.translated-rtl .h1,
.translated-rtl .h2,
.translated-rtl .h3,
.translated-rtl .h4,
.translated-rtl .h5,
.translated-rtl .h6,
.translated-rtl h1,
.translated-rtl h2,
.translated-rtl h3,
.translated-rtl h4,
.translated-rtl h5,
.translated-rtl h6,
.translated-rtl .carousel-caption h2,
.translated-rtl .inner-banner h2,
.translated-rtl .section-heading2,
.translated-rtl .section-heading,
.translated-rtl .section-headingWidth,
.translated-rtl .formtop h1,
.translated-rtl .font-30,
.translated-rtl .font-32,
.translated-rtl .section-Subheading {
    font-family: "Cairo", sans-serif;
}


a.skip-link.screen-reader-text {
    display: none !important;
}

/**
*Loader section CSS Starts here
*/

#loginLoader {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner-border {
    width: 3rem;
    height: 3rem;
}

/**
*Loader section CSS Starts here
*/







/****/
.login-animate {
    /* height: 450px;
    object-fit: cover; */
    width: 100%;
    z-index: 1;
}

.signup-animate {
    /* height: 450px; */
    /* object-fit: cover; */
    width: 100%;
    z-index: 1;
}

.common-cartoon-wrapp {
    position: relative;
    z-index: 1;
    width: 100%;
}

.common-cartoon-wrapp .cartoon-text {
    display: none;
    border: 2px solid #000000;
    border-radius: 20px;
    padding: 10px 10px;
    max-width: 70%;
    font-size: 14px;
    margin-left: 20%;
    position: absolute;
    background: #F0EEB9;
    top: 0;
    right: 0;
    transform: translate(0, -100%);
    z-index: 10;
    color: #666666;
}

.common-cartoon-wrapp .cartoon-text:before {
    content: "";
    position: absolute;
    width: 84px;
    height: 40px;
    background: url("data:image/svg+xml,%3Csvg%20id%3D%22Layer_2%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2051.87%2042.72%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23F0EEB9;%7D.cls-2%7Bfill:%23040404;%7D%3C/style%3E%3C/defs%3E%3Cg%20id%3D%22Layer_1-2%22%20data-name%3D%22Layer%201%22%3E%3Cg%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M50.75.02C37.52%2C25.72%2C17.52%2C46.08%2C1.52%2C40.9%2C9.28%2C28.25%2C14.06%2C14.96%2C11.16.02h39.59Z%22/%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M6.74%2C42.72c-1.87%2C0-3.72-.28-5.53-.86l-1.21-.39.66-1.08C9.64%2C25.75%2C12.66%2C12.8%2C10.18.02h1.96c.01.06.02-.06.04%2C0%2C2.45%2C12.9-.45%2C25.74-9.13%2C40.27C18.84%2C44.05%2C37.65%2C23.09%2C49.63%2C0c.45%2C0%2C.74.02.74.02h1.5C40.53%2C22.05%2C22.68%2C42.72%2C6.74%2C42.72Z%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    bottom: -40px;
    right: -5px;
    background-size: contain;
    background-repeat: no-repeat;
}



.translated-rtl .common-cartoon-wrapp .cartoon-text {
    right: auto;
    left: 0;
    margin-left: 0;
    margin-right: 20%;
}

.translated-rtl .common-cartoon-wrapp .cartoon-text:before {
    transform: scaleX(-1);
    right: auto;
    left: -5px;
}






@media(max-width: 991px) {

    .common-cartoon-wrapp .cartoon-text {
        top: 60%;
        left: 0%;
        transform: translate(0, 0%);
    }

    .common-cartoon-wrapp .cartoon-text:before {
        transform: rotate(180deg) scaleX(-1);
        bottom: auto;
        top: -40px;
    }






    .stepForm_container .step-wrapper li {
        min-width: 33.33% !important;
        text-align: center !important;
    }

    .signup-animate,
    .login-animate {
        height: auto;
        max-width: 75%;
    }

    .stepForm_container .step-wrapper li {
        min-width: 33.33%;
        text-align: center;
    }

    .common-cartoon-wrapp .cartoon-text {
        font-size: 10px;
        border: 1px solid #000;
        margin: 0;
        left: 72%;
        top: 20%;
        min-height: 60px;
    }

    .common-cartoon-wrapp .cartoon-text:before {
        width: 24px;
        height: 18px;
        top: 26px;
        transform: rotate(90deg);
        left: -21px;
    }

    .translated-rtl .common-cartoon-wrapp .cartoon-text {
        max-width: 33%;
    }

    .translated-rtl .common-cartoon-wrapp .cartoon-text:before {
        left: auto;
        right: -20px;
        transform: rotate(270deg)scaleX(-1);
    }


}


@media(max-width:575px) {
    .common-cartoon-wrapp .cartoon-text {
        left: 70%;
    }

    .commonForm-right {
        margin-top: 70px;
    }

}

@media(max-width:400px) {
    .common-cartoon-wrapp .cartoon-text {
        font-size: 8px;
    }
}


/* why best animation css start */


.custom-space {
    height: 264px;
    /* Adjust the height as needed for big space */
}

.comic-cartoon-bottom-wrapper .common-cartoon-wrapp {
    position: relative;
    z-index: 1;
}

.comic-cartoon-bottom-wrapper .common-cartoon-wrapp .cartoon-text {
    display: block;
    border: 2px solid #000000;
    border-radius: 20px;
    padding: 15px;
    max-width: 40%;
    font-size: 18px;
    font-weight: 500;
    margin-left: 0;
    position: absolute;
    background: #ffffff;
    top: 60%;
    left: 40%;
    transform: translate(0, -100%) !important;
    display: none;
    z-index: 2;
}

.comic-cartoon-bottom-wrapper .common-cartoon-wrapp .cartoon-text p {
    margin: 0 0 10px;
}

.comic-cartoon-bottom-wrapper .common-cartoon-wrapp .cartoon-text:before {
    content: "";
    position: absolute;
    width: 84px;
    height: 40px;
    /* background: url('data:image/svg+xml,<svg width="105" height="51" viewBox="0 0 105 51" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M103.5 1.5C68.5 46.5 34.0262 49.7658 0.710938 49.7658C23.5 39 36.5 26.5 42.7109 1.5" fill="white"/><path d="M103.5 1.5C68.5 46.5 34.0262 49.7658 0.710938 49.7658C23.5 39 36.5 26.5 42.7109 1.5" stroke="black" stroke-width="2"/></svg>'); */
    background: url('data:image/svg+xml,<svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.87 42.72"><defs><style> .cls-1 { fill: %23fffeff; } .cls-2 { fill: %23040404; } </style></defs><g id="Layer_1-2" data-name="Layer_1"><g><path class="cls-1" d="M50.75.02C37.52,25.72,17.52,46.08,1.52,40.9,9.28,28.25,14.06,14.96,11.16.02h39.59Z"/><path class="cls-2" d="M6.74,42.72c-1.87,0-3.72-.28-5.53-.86l-1.21-.39.66-1.08C9.64,25.75,12.66,12.8,10.18.02h1.96c.01.06.02-.06.04,0,2.45,12.9-.45,25.74-9.13,40.27C18.84,44.05,37.65,23.09,49.63,0c.45,0,.74.02.74.02h1.5C40.53,22.05,22.68,42.72,6.74,42.72Z"/></g></g></svg>');
    bottom: 1px;
    left: -62px;
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(90deg);
}


.comic-cartoon-bottom-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999999999;
    width: 100%;
}

.comic-cartoon-bottom-wrapper .sequence-img {
    width: 40%;
    height: auto;
    left: -50%;
    transition: left 0.2s ease;
    z-index: -1;
}

.question-list {
    gap: 16px;
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

.question-list .list-group-item {
    padding: 10px 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}


.question-list .question-btn {
    display: block;
    background-color: #f6f6f6;
    width: 100%;
    text-align: left;
}

.question-list .question-btn:hover {
    background: #ffffff;
    box-shadow: 0 0 5px 0px #00000026;
}


@keyframes anim_fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.anim_fadeIn {
    animation: anim_fadeIn 0.8s ease forwards;
}

@keyframes anim_fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.anim_fadeOut {
    animation: anim_fadeOut 0.8s ease forwards;
}

@keyframes anim_fadeInRight {
    from {
        opacity: 0;
        transform: translate(5%, -100%);
    }

    to {
        opacity: 1;
        transform: translate(0, -100%);
    }
}

.anim_fadeInRight {
    animation: anim_fadeInRight 0.8s ease forwards;
}

@keyframes anim_fadeInUp {
    from {
        opacity: 0;
        transform: translate(0, -5%);
    }

    to {
        opacity: 1;
        transform: translate(0, -100%);
    }
}

.anim_fadeInUp {
    animation: anim_fadeInUp 0.8s ease forwards;
}


.adventure-btn {
    background: #4593c7;
    color: #ffffff;
    border: 1px solid #4593c7;
    font-size: 18px;
    font-weight: 500;
    padding: 5px 20px;
    border-radius: 25px;
    line-height: 24px;
}

.adventure-btn:hover,
.adventure-btn:focus {
    background: #ffffff;
    color: #4593c7;
    border-color: #4593c7;
}

/* why best animation css end */



.animation-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.6;
    display: none;
    z-index: 9999999;
}

.cartoon-inner-text-wrapper {
    max-height: 70vh;
    height: auto;
    overflow-y: auto;
}


.translated-rtl {}

.pointer-event-none.why-best-animation-char-show,
.pointer-event-none .comic-cartoon-bottom-wrapper,
.pointer-event-none .commonForm-left,
.pointer-event-none .common-cartoon-wrapp {
    pointer-events: none;
}



@media(max-width: 1199px) {
    .comic-cartoon-bottom-wrapper .common-cartoon-wrapp .cartoon-text {
        font-size: 16px;
    }

    .comic-cartoon-bottom-wrapper .common-cartoon-wrapp .cartoon-text p:not(:last-child) {
        margin-bottom: 10px;
    }

    .comic-cartoon-bottom-wrapper .common-cartoon-wrapp .cartoon-text {
        max-width: 57%;
    }

    .comic-cartoon-bottom-wrapper .sequence-img {
        width: 36%;
    }

    .comic-cartoon-bottom-wrapper .common-cartoon-wrapp .cartoon-text:before {
        width: 40px;
        height: 30px;
        left: -34px;
        top: auto;
        bottom: 12px;
    }
}

@media(max-width: 767px) {
    .comic-cartoon-bottom-wrapper .common-cartoon-wrapp .cartoon-text {
        max-width: 60%;
    }

    .comic-cartoon-bottom-wrapper .common-cartoon-wrapp .cartoon-text {
        font-size: 14px;
    }
}

/* Arabic */
.lang-ar .comic-cartoon-bottom-wrapper .common-cartoon-wrapp .cartoon-text {
    right: 16% !important;
    left: auto !important;
}

.lang-ar .comic-cartoon-bottom-wrapper .common-cartoon-wrapp .cartoon-text::before {
    right: -62px !important;
    left: auto !important;
    bottom: 50px !important;
    transform: rotate(272deg) !important;
}


.arebic-static-img {
    transform: scaleX(-1);
    /* mirror in Arabic */
}

/**
* Grade button css starts here 
* */

.question-list .grade-btn {
    display: block;
    background-color: #f6f6f6;
    width: 100%;
    text-align: left;
}

.question-list .grade-btn:hover {
    background: #ffffff;
    box-shadow: 0 0 5px 0px #00000026;
}

/**
* Grade button css ends here 
* */

/*Primary & Middle Animation Arabic CSS */

.arebicCanvasImage {
    transform: scaleX(1);
}

.close-button-arabic {
    position: absolute;
    top: 10px;
    left: 10px;
    cursor: pointer;
    font-size: 20px;
    color: #000;
}

.close-button-default {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 20px;
    color: #000;
}

.inside-adventure-btn {
    background: #4593c7;
    color: #ffffff;
    border: 1px solid #4593c7;
    font-size: 18px;
    font-weight: 500;
    padding: 5px 20px;
    border-radius: 25px;
    line-height: 24px;
}

.inside-adventure-btn:hover,
.inside-adventure-btn:focus {
    background: #ffffff;
    color: #4593c7;
    border-color: #4593c7;
}

#site-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 1);
    /* optional: blurred or light background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

body.loading {
    overflow: hidden;
}

.close-button.close-button-arabic {
    left: 10px;
}

.close-animation-btn.close-animation-btn-default {
    right: 10px;
}

.close-animation-btn.close-animation-btn-arabic {
    left: 10px;
}

/**Inner Section Animation CSS Starts Here*/

.product-thumbnail.curriculum-grade-image {
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
    /* smooth zoom */
}

.product-thumbnail.curriculum-grade-image:hover {
    transform: scale(1.1);
    /* zoom by 10% */
}

/**Inner Section Animation CSS Ends Here*/

.close-curriculum-btn-default {
    right: 10px;
    position: absolute;
    top: 10px;
    cursor: pointer;
    font-size: 20px;
    color: #000;
}


.close-curriculum-btn-default-ar {
    position: absolute;
    top: 10px;
    cursor: pointer;
    font-size: 20px;
    color: #000;
    left: 10px;
    right: auto;

}