@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Margarine&display=swap");

@import url('https://fonts.googleapis.com/css2?family=Coiny&display=swap');

@font-face {
    font-family: "GillSans";

    src: url("../fonts/GillSans.eot");

    src: url("../fonts/GillSans.eot") format("embedded-opentype"),
        url("../fonts/GillSans.woff2") format("woff2"),
        url("../fonts/GillSans.woff") format("woff"),
        url("../fonts/GillSans.ttf") format("truetype"),
        url("../fonts/GillSans.svg#GillSans") format("svg");
}

@font-face {
    font-family: "GillSansHeavy";

    src: url("../fonts/GillSansHeavy.eot");

    src: url("../fonts/GillSansHeavy.eot") format("embedded-opentype"),
        url("../fonts/GillSansHeavy.woff2") format("woff2"),
        url("../fonts/GillSansHeavy.woff") format("woff"),
        url("../fonts/GillSansHeavy.ttf") format("truetype"),
        url("../fonts/GillSansHeavy.svg#GillSansHeavy") format("svg");
}

@font-face {
    font-family: 'Sweetie Summer';
    src: url('../fonts/Sweetie%20Summer.ttf') format('truetype'),
        url('../fonts/Sweetie%20Summer.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Sweetie Summer Display';
    src: url('../fonts/Sweetie%20Summer%20-%20Display.ttf') format('truetype'),
        url('../fonts/Sweetie%20Summer%20-%20Display.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Shooting Star';
    src: url('../fonts/Shooting-Star.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    text-decoration: none;
}

/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
    background: #fff;
    font-family: "Poppins", system-ui;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

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

.btn {
    text-transform: inherit !important;
}

button:focus,
.btn:focus {
    box-shadow: none !important;
    outline: none;
}

::-ms-input-placeholder {
    /* Edge 12-18 */
    color: #b08cac;
}

::placeholder {
    color: #b08cac;
}

/* ===== Scrollbar CSS ===== */

/* Firefox */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--white);
    -webkit-overflow-scrolling: touch;
    /* Smooth scrolling on mobile devices */
    ;
}

/* Chrome, Edge, and Safari */

*::-webkit-scrollbar {
    width: 0px;
    /* Hide the scrollbar */
    height: 0px;
    /* Hide the horizontal scrollbar */
    ;
}

*::-webkit-scrollbar-track {
    background: var(--white);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 10px;
    border: 3px none var(--white);
}

/* Show the scrollbar on hover and during scrolling */

*::-webkit-scrollbar {
    transition: width 0.3s ease;
}

*::-webkit-scrollbar:hover {
    width: 15px;
    /* Show the scrollbar on hover */
    height: 15px;
    /* Show the horizontal scrollbar on hover */
    ;
}

img{
    max-width: 100%;
}

header {
    /* box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.2); */
    position: sticky;
    top: 0;
    background: #3ab390;
    z-index: 9999;
    border-radius: 0 0 24px 24px;
}

nav.navbar {
    border-radius: 0 0 24px 24px;
}

.color1 {
    background: #e97132;
}

.color2 {
    background: #78206e;
}

.color3 {
    background: #ffff00;
}

.color4 {
    background: #ee0000;
}

.color5 {
    background: #404040;
}

.color6 {
    background: #00b0f0;
}

.color7 {
    background: #92d050;
}

.color8 {
    background: #0070c0;
}

.color1 .item-title,
.color2 .item-title,
.color4 .item-title,
.color5 .item-title,
.color8 .item-title {
    color: #fff;
}

.color3 .item-title,
.color6 .item-title,
.color7 .item-title {
    color: #000;
}

.container{
    max-width: 1320px;
    width:100%;
}

.login-btn {
    display: inline-block;
    border-radius: 36px;
    background: #61c2a6;
    color: #fff !important;
    width: fit-content;
    padding: 17px 23px;
    height: 48px;
    font-family: "Poppins", system-ui;
    text-transform: capitalize;
    font-weight: 400;
    border: 0;
    font-size: 15px;
    letter-spacing: 0px;
    line-height: 100%;
    text-align: center;
    display: flex;
    align-items: center;
}

/* .login-btn:hover,
.login-btn:focus-visible,
.btn:first-child:active {
    background: #028984;
    color: #000;
} */

.get-started-btn {
    display: inline-block;
    border-radius: 36px;
    background: #ffffff;
    color: #3AB390;
    width: fit-content;
    padding: 17px 23px;
    height: 48px;
    font-family: "Poppins", system-ui;
    text-transform: capitalize;
    font-weight: 400;
    border: 0;
    font-size: 15px;
    letter-spacing: 0px;
    line-height: 100%;
    text-align: center;
    display: flex;
    align-items: center;
}

.logout-hanging-btn {
    display: inline-block; border-radius: 40px; background: #3AB390;
    color: #fff; padding: 15px 25px; width: fit-content;
    font-family: "Poppins", system-ui; text-transform: capitalize;
    font-weight: 400; border: 0; font-size: 15px; letter-spacing: 0px;
    line-height: 100%; text-align: center; display: flex; align-items: center;
    position: absolute; right: 50px; bottom: 50px;
}
.logout-hanging-btn.right-160{right: 160px;}

/* .get-started-btn:hover,
.get-started-btn:focus-visible {
    background: #14b2ac;
    color: #000;
} */

.login-btn img {
    width: 24px !important;
    height: 24px !important;
    margin-right: 10px;
}

.get-started-btn img {
    width: 24px !important;
    height: 24px !important;
    margin-right: 10px;
}

.navbar-nav .nav-item {
    margin-right: 55px;
    position: relative;
}

.navbar-nav .nav-item::before {
    content: '';
    background: url(../images/home-icon.png) no-repeat center left;
    position: absolute;
    left: -22px;
    top: 4px;
    width: 22px;
    height: 21px;
}

.navbar-nav .nav-item .nav-link {
    font-size: 18px;
    font-weight: 400;
    color: #000;
    font-family: "Poppins", system-ui;
    transition: ease-in-out 0.6s;
}

.navbar-nav .nav-item .nav-link.active,
.navbar-nav .nav-item .nav-link:hover {
    color: #02a09a;
}

.banner {
    display: block;
    position: relative;
    /* background:  url("../images/learmnie-banner-bg.webp"),linear-gradient(156deg, rgba(1,1,29,1) 0%, rgba(147, 0, 54, 1) 34%, rgba(53, 39, 133, 1) 88%, rgba(1, 1, 29, 1) 102%); */
    background: url(../images/banner-bg.png) no-repeat;
    background-size: cover;
}

.banner .banner-slider {
    position: relative;
}

.banner .banner-slider .owl-dots {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    position: absolute;
    bottom: 32px;
    z-index: 1;
}

.banner .banner-slider .owl-dots .owl-dot {
    display: block;
    width: 10px;
    height: 10px;
    background-color: #d8a0d1;
    border: 1px solid #de54cc;
    transition: 500ms;
    border-radius: 100px;
    margin: 0 4px;
}

.banner .banner-slider .owl-dots .owl-dot.active {
    background-color: #ffffff;
    border-color: #ffffff;
    width: 16px;
}

/* .banner .banner-item {
	display: block;
	background-image: url("../images/shape1.png"), url("../images/shape2.png"),
    url("../images/shape3.png");
	background-position: top left, top right, bottom center;
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-size: auto, auto, auto;
	position: relative;
} */
.banner .banner-item {
    background: none;
    background-color: transparent;
}

.banner .banner-area {
    /* display: flex;
  flex-wrap: wrap;
  align-items: center; */
    min-height: auto;
    padding: 0 25px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /* width: 1800px; */
    max-width: 100%;
    margin: 0 auto;
    height: 718px;
    /* aspect-ratio: 2 / 1; */
}

.banner .banner-area .the_boy {
    position: absolute;
    left: 0;
    top: 104px;
}

.banner .banner-area .the_girl {
    position: absolute;
    right: 0;
    bottom: -22px;
}

.banner .banner-area img {
    margin: 0 0 25px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.banner .banner-area picture {
    display: block;
}

.banner .banner-area .banner-left {
    display: block;
    position: absolute;
    top: 27%;
    transform: translateY(-27%);
    /* margin-top: -50px; */
    width: 650px;
    max-width: 50%;
    text-align: center;
}

.banner .banner-area .banner-left h2 {
    display: block;
    font-family: "Coiny", system-ui;
    color: #FFFFFF;
    font-size: 55px;
    font-weight: 900;
    line-height: 51px;
    text-transform: capitalize;
    margin: 0;
}

.banner .banner-area .animated-bee {
    position: absolute;
    right: 30px;
    top: 50px;
    transform: rotate(42deg) scaleX(-1);
    transform-origin: center center;
    width: 145px;
}

.banner .banner-area .animated-bee img {
    margin-bottom: 0;
}

.banner .banner-area .banner-left h2 span {
    display: block;
    font-family: "GillSans";
    color: #FFFFFF;
    font-size: 34px;
    line-height: 51px;
    font-weight: 400;
    text-transform: capitalize;
    margin: 10px 0 0 0;
}

.banner .banner-area .banner-left .btn {
    margin: 60px 0 0 0;
}

.banner .banner-area .banner-right {
    display: block;
    width: 658px;
    max-width: 50%;
    padding: 0 0 0 60px;
    margin: 0 0 0 auto;
}

.about-section {
    display: block;
    /* background-color: #009CFF; */
    background-color: #82e6df;
    padding: 68px 0;
}

.about-section .about-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.about-section .about-texts {
    display: block;
    float: left;
    flex: 1;
    font-size: 22px;
    line-height: 33px;
}

.about-section .about-texts.order-2+.about-image {
    padding-right: 40px;
}

/* .about-section .about-texts:not(:last-child) {
  padding: 0 40px 0 0;
} */

.about-section h2 {
    display: block;
    color: #000;
    font-family: "Coiny", system-ui;
    font-size: 33px;
    font-weight: 900;
    line-height: 45px;
    margin: 0 0 30px;
}

.about-section p {
    display: block;
    color: #FFF;
    font-size: 17px;
    font-weight: 400;
    line-height: 30px;
    margin: 20px 0 0 0;
}

.about-section .about-image {
    display: block;
    float: left;
    width: 538px;
    max-width: 39%;
}

.about-section .about-image img {
    display: block;
    width: 100%;
    height: auto;
}


.about-data-section {
    display: block;
    background: url(../images/bg-1.webp) no-repeat bottom center;
    background-size: 100% auto;
    background-color: #F2F9FD;
    padding: 20px 0;
}

.about-data-section .about-data-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.about-data-section .about-data-container .about-data-left {
    display: flex;
    flex-flow: column;
    float: left;
    width: 384px;
}

.about-data-section .about-data-container .about-data-left img {
    display: block;
    width: 100%;
    height: auto;
}

.about-data-section .about-data-container .about-data-right {
    display: block;
    float: left;
    flex: 1;
    padding: 0 0 0 38px;
}

.about-data-section .about-data-container .about-data-right p {
    display: block;
    color: #000;
    font-size: 17px;
    font-weight: 400;
    line-height: 32px;
}

.about-data-section .about-data-container .about-data-right p:not(:first-child) {
    margin: 30px 0 0 0;
}

/*sign up*/
.login,
.sign-up {
    /* background-image: url(../images/shape1.png), url(../images/shape4.png);
    background-position: top left, bottom right;
    background-repeat: no-repeat, no-repeat;
    background-size: auto, auto; */
    height: auto;
    padding: 40px 0;
}

.login::after,
.sign-up::after {
    content: " ";
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #f8f4f2;
    background-image: url(../images/login-bg.png);
    background-size: 100% 100%;
    z-index: -1;
    background-position: top left;
}

.profile-selection {
    background: url(../assets/images/select-profile-bg.png) no-repeat !important;
}

.login .login-content,
.sign-up .signup-content {
    height: auto;
    align-items: center;
}


.login .login-content .login-form,
.sign-up .signup-content .signup-form {
    background-color: #fff;
    padding: 33px 61px;
    border-radius: 20px;
    margin-left: 0;
    box-shadow: 0px 4px 74px 0px rgba(0, 0, 0, 0.03);
}

.login-form h2,
.signup-form h2 {
    font-family: "Coiny", system-ui;
    font-size: 37px;
    font-weight: 700;
    text-align: center;
    color: #000000;
    margin-bottom: 15px;
    text-transform: capitalize;
}

.login-form h2 {
    margin-bottom: 29px;
}

.login-form p {
    line-height: 26px;
}

.login-form .submit-btn p {
    display: flex;
}

.signup-form label {
    font-family: Poppins;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    color: #000000;
    text-transform: capitalize;
    cursor: pointer;
}

.signup-form label a {
    color: #1AB59C;
}

.signup-form input::placeholder {
    font-family: Poppins;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #b08cac;
}

.signup-form .forgot {
    text-align: right;
}

.signup-form .forgot a {
    font-family: Poppins;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    color: #69105e;
}

.sign-up .tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    max-width: 58%;
    margin-left: auto;
    margin-right: auto;
}

.sign-up .tab {
    flex: 1;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
    width: 128px;
    height: 34px;
    margin: 0 6px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    font-family: "Poppins", system-ui;
    color: #fff;
    background: url(../images/radio-inactive.png) no-repeat center left 25px #e638cf;
    transition: ease-in-out 0.6s;
}

.sign-up .tab.active {
    background: url(../images/radio-active.png) no-repeat center left 25px #1AB59C;
}

.sign-up .form-container {
    display: none;
}

.sign-up .form-container.active {
    display: block;
}

.sign-up input[type="text"],
.sign-up input[type="number"],
.sign-up input[type="email"],
.sign-up input[type="password"],
.sign-up select {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #1AB59C;
    border-radius: 5px;
    background-color: #f8f4f2;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

#reset-pin-form input[type="password"] {
    width: 100%;
}

#forgot_psswrd.login-form {
    padding: 33px 94px;
}

.signup-form .submit-btn a {
    font-family: Poppins;
    font-size: 17px;
    font-weight: 600;
    line-height: 25.5px;
    color: #fff;
    padding: 14px 60px;
    background-color: #b62ca4;
    border-radius: 36px;
}

.mobile-d-none {
    display: none;
}

.profile-container {
    position: relative;
    display: inline-block;
    max-width: 96px;
}

.profile-container .camera-icon {
    right: 0px;
}

.profile-img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    background: #ffe2fb;
}

.camera-icon {
    position: absolute;
    bottom: -16px;
    right: 204px;
    background-color: white;
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 45px;
    height: 45px;
}

.signup-form .submit-btn,
.signup-form input[type="submit"] {
    background: #1AB59C;
    border-radius: 30px;
    width: 234px;
    height: 55px;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 17px;
    font-family: Poppins;
    border: 0;
    margin-top: 40px;
}

.signup-form .submit-btn:hover {
    background: #14937e;
}

.signup-form .sign-in {
    text-align: center;
    color: #484348;
    font-size: 14px;
    font-weight: 400;
    font-family: Poppins;
}

.signup-form .sign-in a {
    color: #1AB59C;
    font-weight: 600;
}

.dob-select select {
    width: 100%;
    padding: 10px;
    border: 1px solid #c340b2;
    border-radius: 5px;
    background-color: #fff5fe;
    color: #333;
    appearance: none;
    /* Remove default dropdown arrow */
    -webkit-appearance: none;
    /* For Safari */
    -moz-appearance: none;
    /* For Firefox */
    position: relative;
    font-size: 16px;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"><path fill="%237D3C98" d="M10 50 L70 110 L130 50"></path></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
}

/*sign up*/

/*OTP Modal*/

#staticBackdrop .modal-dialog {
    max-width: 570px;
    border-radius: 20px;
}

#staticBackdrop .modal-dialog .modal-content {
    border-radius: 20px;
}

.verifyotp.modal-body {
    padding: 29px;
}

.verifyotp h2 {
    color: #000;
    font-family: "Coiny", system-ui;
    font-size: 37px;
    font-weight: 700;
    text-transform: capitalize;
    margin-bottom: 15px;
    margin-top: 10px;
}

.verifyotp p {
    color: #888282;
    font-size: 16px;
    font-weight: 500;
}

.verifyotp p span {
    color: #b614a1;
    display: block;
    margin-top: 8px;
}

.verifyotp h6 {
    margin-top: 10px;
}

.otpModal .btn-close,
#staticBackdrop .btn-close {
    /* background: var(--bs-btn-close-bg) center/1em auto no-repeat #f6dff3; */
    width: 68px;
    height: 68px;
    border-radius: 3px 8px 1px 57px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 9;
}

/* OTP Input Fields */
.otpModal {
    z-index: 1;
}

.otpModal::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(34, 1, 30, 0.8);
    left: 0;
    top: 0;
    z-index: -1;
}

.otpModal .modal-dialog {
    max-width: 570px;
}

.otp-input-container {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.otp-input,
.pin-input {
    width: 16%;
    height: 95px;
    font-size: 24px;
    text-align: center;
    border: 1px solid #1AB59C;
    border-radius: 10px;
    background: #f8f4f2;
}

/* Verify Button */

.verify-btn {
    background-color: #1AB59C;
    color: white;
    border: none;
    border-radius: 36px;
    cursor: pointer;
    font-size: 16px;
    width: 234px;
    height: 55px;
    font-size: 17px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 25px;
}

.verify-btn:hover {
    background: #14937e;
}

/* Resend OTP Text */

.resend-text {
    margin-top: 10px;
    font-size: 14px;
    color: #4b3434;
    display: flex;
    justify-content: space-between;
}

.resend-link {
    color: #1AB59C;
    cursor: pointer;
    text-decoration: underline;
    background: transparent;
    border: 0;
}

/*OTP Modal*/

/*create your pin*/

.create-pin-box {
    background-color: #fff;
    padding: 87px 93px;
    border-radius: 20px;
    margin-left: 0;
    box-shadow: 0px 4px 74px 0px rgba(0, 0, 0, 0.03);
}

.HeadRange {
    position: relative;
}

.tooltip {
    background-color: transparent !important;
}

.tooltip-inner {
    background-color: #000 !important;
    color: #fff !important;
    padding: 10px !important;
    border-radius: 8px !important;
    font-size: 14px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.tooltip-arrow::before {
    border-top-color: #000 !important;
}

.HeadRange .custom-tooltip {
    position: absolute;
    top: -6px;
    right: 28px;
    width: 17px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 10px;
    padding: 0;
    background: #000;
    display: none;
}

.tnd-pp-div {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}

.create-pin-box h1 {
    color: #000;
    font-family: "Coiny", system-ui;
    font-size: 34px;
    font-weight: 700;
    text-transform: capitalize;
    margin-bottom: 43px;
    text-align: center;
}

.create-pin-box h1.pin-genarate-heading span {
    font-size: 16px;
    display: inline-block;
    background-color: #02a09a38;
    padding: 7px 13px;
    font-weight: 400;
    margin-top: 10px;
    display: none;
}

.create-pin-box h1:hover span {
    display: block;
}

.create-pin-box label {
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 500;
    color: #000;
}

#pin input[type="text"] {
    width: 100px;
    height: 95px;
    background-color: #fff5fe;
    border: 1px solid #c340b2;
    padding: 14px;
    border-radius: 10px;
}

.create-pin-box .inputs input[type="password"],
.create-pin-box #pin input[type="text"] {
    width: 100%;
    height: auto;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #c340b2;
    border-radius: 5px;
    background-color: #fff5fe;
}

/*create your pin*/

/*listing page*/

.listing {
    /* background-image: url(../images/listing-page-bg.webp); */
    position: relative;
    /* background-repeat: no-repeat;
  background-size: cover;
  background-position: 100% 100%; */
    padding: 40px 0 60px;
}

.list-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.list-container2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 100px;
}

.list-container .item,
.list-container2 .item {
    /* background: white; */
    border-radius: 10px;
    /* box-shadow: 0px 4px 54px 0px rgba(15, 1, 13, 0.9); */
    text-align: center;
    padding: 10px;
    transition: transform 0.3s;
    max-width: 205px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
}

/* .list-container .item a,
.list-container2 .item a {
  color: #000;
} */

/* .list-container .item:first-child {
  transform: rotate(-10.799deg);
}

.list-container .item:nth-child(2) {
  transform: rotate(9.201deg);
}

.list-container .item:nth-child(3) {
  transform: rotate(-10.799deg);
}

.list-container .item:nth-child(4) {
  transform: rotate(9.201deg);
}

.list-container2 .item:first-child {
  transform: rotate(9.201deg);
  top: 30px;
  position: relative;
}

.list-container2 .item:nth-child(2) {
  transform: rotate(-10.799deg);
  position: relative;
  top: 100px;
}

.list-container2 .item:nth-child(3) {
  transform: rotate(9.201deg);
}

.list-container2 .item:nth-child(4) {
  transform: rotate(-10.799deg);
  position: relative;
  top: 100px;
} */

.list-container .item img,
.list-container2 .item img {
    width: 100%;
    height: 183px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.list-container .item:hover,
.list-container2 .item:hover {
    transform: translateY(-5px);
    opacity: 0.7;
}

.list-container .item-title,
.list-container2 .item-title {
    font-size: 18px;
    font-weight: 600;
    padding: 14px 0;
}

#exampleModalToggle .modal-body,
#ebookModalToggle .modal-body,
#istoryModalToggle .modal-body {
    padding: 0;
}

/* #exampleModalToggle .btn-close,
#quizModalToggle .btn-close,
#ebookModalToggle .btn-close {
  position: absolute;
  right: 0;
  z-index: 9;
} */

.modal .btn-close {
    z-index: 9;
    /* background: var(--bs-btn-close-bg) center/0.8em auto no-repeat #ffeafd; */
    width: 36px;
    height: 36px;
    border-radius: 50%;
    position: absolute;
    right: 2px;
    top: 2px;
    z-index: 9;
    /* border: 1px solid #000; */
    opacity: 1;
}

#exampleModalToggle .big-img,
#quizModalToggle .big-img {
    border-radius: 20px;
    border: 9px solid #eddaeb;
    position: relative;
    padding-bottom: 70.25%;
    width: 85%;
    height: 0;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

#istoryModalToggle .big-img,
#ebookModalToggle .big-img,
.cmn_cssModal.onlyforallstories .big-img {
    border-radius: 7px;
    border: 0px solid #eddaeb;
    position: relative;
    padding-bottom: 0;
    width: 62%;
    height: 250px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    margin: auto;
}

#istoryModalToggle .big-img img,
#ebookModalToggle .big-img img,
.cmn_cssModal.onlyforallstories .big-img img {
    width: 100% !important;
    height: 250px !important;
    object-fit: unset !important;
}

.cmn_cssModal.onlyforallstories .big-img {
    border-radius: 0px; position: relative;
    padding-bottom: 70.25%; width: 56%; height: 0;
    overflow: hidden; aspect-ratio: 8 / 10; margin: auto; 
}
.cmn_cssModal.onlyforallstories .big-img img {
    height: 215px !important;
    object-fit: cover !important;
    border-radius: 0px;
}
.cmn_cssModal .big-img {
    border-radius: 0px;
    position: relative;
    padding-bottom: 70.25%;
    width: 56%;
    height: 0;
    overflow: hidden;
    aspect-ratio: 8 / 10;
    margin: auto;
}

#playGameModalToggle .big-img {
    border-radius: 11px;
    position: relative;
    padding-bottom: 70.25%;
    width: 70.25%;
    height: 0;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    margin: auto;
}

.toppart {
    padding: 35px 50px 10px;
}

.modal-content .title,
#quizModalToggle .title,
#ebookModalToggle .title,
#istoryModalToggle .title {
    color: #2e2929;
    /* font-size: 60px; */
    /* font-weight: 800; */
    text-transform: capitalize;
}

.modal-content .title .pinktxt,
#quizModalToggle .title .pinktxt,
#ebookModalToggle .title .pinktxt,
#istoryModalToggle .title .pinktxt {
    color: #2e2929;
    font-size: 26px;
    font-weight: 400;
}

.modal-content .title .smalltxt,
#quizModalToggle .title .smalltxt,
#ebookModalToggle .title .smalltxt,
#istoryModalToggle .title .smalltxt {
    color: #2e2929;
    font-size: 32px;
    font-weight: 400;
}

.modal-content .toppart p,
#ebookModalToggle .toppart p,
#istoryModalToggle .toppart p {
    padding: 25px 0 42px;
    color: #000;
    font-size: 22px;
    line-height: normal;
}

.modal-content .toppart p{font-size: 18px; padding: 0;}

.modal-content .center-part,
#ebookModalToggle .center-part,
#istoryModalToggle .center-part {
    background: #f8f4f2;
    padding-left: 52px;
    padding-right: 52px;
    margin-bottom: 30px;
}

.cmn_cssModal .center-part .col-xl-3,
.cmn_cssModal .center-part .col-lg-3,
.cmn_cssModal .center-part .col-md-3,
.cmn_cssModal .center-part .col-sm-3,
#ebookModalToggle .center-part .col-xl-3,
#ebookModalToggle .center-part .col-lg-3,
#ebookModalToggle .center-part .col-md-3,
#ebookModalToggle .center-part .col-sm-3,
#istoryModalToggle .center-part .col-xl-3,
#istoryModalToggle .center-part .col-lg-3,
#istoryModalToggle .center-part .col-md-3,
#istoryModalToggle .center-part .col-sm-3 {
    width: 20%;
}



.modal-content .center-part h6,
.four-boxes h6,
#quizModalToggle .text-container h6,
#ebookModalToggle h6,
#istoryModalToggle h6 {
    color: #7e797e;
    font-size: 14px;
    font-weight: 700;
    text-transform: capitalize;
    margin-bottom: 8px;
}

.modal-content .center-part h6{white-space: nowrap;}

.modal-content .center-part h3,
.four-boxes h3 {
    color: #000;
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
}

#istoryModalToggle .center-part h3,
#ebookModalToggle .center-part h3,
.onlyforallstories .center-part h3 {
    color: #000;
    font-size: 13px;
    font-weight: 600;
    text-transform: capitalize;
}

.modal-content .center-part .img-container,
.four-boxes .img-container {
    background: #fff;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 4px 10px #ebc2e7;
    border: 1px solid #02A09A;
    margin-bottom: 14px;
    margin-left: auto;
    margin-right: auto;
}
.modal-content .center-part .img-container{width: 44px; height: 44px;}
.modal-content .center-part .img-container img{width: 22px; height: 22px;}

#istoryModalToggle .center-part .img-container,
#ebookModalToggle .center-part .img-container,
.onlyforallstories.cmn_cssModal .center-part .img-container {
    background: #fff;
    width: 57px;
    height: 57px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 4px 10px #ebc2e7;
    border: 1px solid #edc0e8;
    margin-bottom: 14px;
    margin-left: auto;
    margin-right: auto;
}

.modal-content .center-part .border-end,
.four-boxes .border-end,
#ebookModalToggle .center-part .border-end,
#istoryModalToggle .center-part .border-end {
    border-right: 1px solid #d49ccf;
}

.viewbtn {
    height: 53px;
    min-width: 170px;
    width: 100% !important; 
    max-width: 235px !important;
    padding: 8px;
    border-radius: 200px;
    background: #02A09A;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0;
    line-height: 1.2;
}

.listenbtn {
    height: 53px;
    width: 235px !important;
    padding: 8px;
    border-radius: 200px;
    background: #18CDC6;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding-left: 80px;
    padding-right: 80px;
    margin: 0;
}

.listenbtn:hover,
.listenbtn:focus {
    background: #14b2ac;
    color: #fff;
}

a.customizebtn {
    margin-top: 10px;
}

.toppart.videobox .viewbtn {
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 7px;
    width: 235px !important;
}


.viewbtn:hover,
.viewbtn:focus {
    background: #028984;
    color: #fff;
}

.customizebtn {
    height: 53px;
    width: 235px;
    padding: 8px;
    border-radius: 200px;
    background: #1AB59C;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: 0;
    margin-right: 0;
}

.customizebtn:hover,
.customizebtn:focus {
    background: #14937e;
    color: #fff;
}

.customizebtn:active {
    background: #14937e !important;
    color: #fff !important;
}

/* .modal-content .btn-close {
	background: var(--bs-btn-close-bg) center/0.8em auto no-repeat #ffeafd;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	position: absolute;
	right: -20px;
	top: -20px;
	z-index: 9;
	border: 1px solid #000;
	opacity: 1;
} */

#quizModalToggle .modal-body {
    padding: 33px 52px;
}

#quizModalToggle .toppart {
    padding: 0;
}

#quizModalToggle .center-box {
    border-radius: 20px;
    border: 1px solid #1AB59C;
    background: #f8f4f2;
    box-shadow: 0px 4px 9px 0px rgba(222, 84, 204, 0.3);
    margin-top: 40px;
    margin-bottom: 40px;
}

#quizModalToggle .center-box .img-container {
    background: #fff;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 4px 10px #ebc2e7;
    border: 1px solid #02A09A;
}

#quizModalToggle .text-container {
    text-align: left;
}

#quizModalToggle .text-container h3 {
    color: #000;
    font-size: 30px;
    font-weight: 600;
    text-transform: capitalize;
}

/*listing page*/

/*story details page*/

.story-details {
    background: url(../images/purple-bg.webp) no-repeat center;
    background-size: cover;
    padding: 128px 0 38px;
}

.book-section {
    position: relative;
}

.book-section .author-label,
.book-section .label {
    color: #f7c3fe;
    font-family: "Margarine", sans-serif;
    font-size: 14px;
    margin: 0px 0px 12px;
}

.book-section .author-name {
    font-size: 37px;
    margin: 0px 0px 20px;
    color: #fff;
}

.book-section .info {
    font-size: 21px;
    margin: 0px 0px 20px;
    color: #fff;
}

.book-section .about-heading {
    font-size: 23px;
    color: #f9d8fe;
    margin-top: 40px;
    font-family: "Margarine", sans-serif;
    margin-bottom: 0px;
}

.book-section .about-text,
.book-section p {
    font-size: 15px;
    color: #fff;
    line-height: 24px;
    margin-bottom: 28px;
}

.four-boxes {
    background: #fff;
    border-radius: 9px;
    box-shadow: 0px 11px 34px 0px rgba(52, 1, 45, 0.65);
    margin-bottom: 60px;
}

.story-details .right-img img {
    border: 14px solid #fff;
    border-radius: 10px;
    box-shadow: 0px 4px 14px 0px #060215;
    outline: 1px solid #f6caf1;
}

.buttons {
    display: flex;
    align-items: center;
    padding-top: 40px;
}

.read-option {
    background: transparent;
    border: 0;
    transition: transform 0.2s ease-in-out;
    display: flex;
    gap: 10px;
    align-items: center;
}

.read-option .icon {
    background: #fff;
    padding: 10px 12px;
    border: 1px solid #7f00ff;
    outline: 3px solid #fff;
    border-radius: 9px;
    box-shadow: 0px 11px 34px 0px rgba(52, 1, 45, 0.65);
    width: 60px;
    height: 60px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.read-option:hover {
    transform: scale(1.1);
}

.read-option span {
    font-size: 17px;
    color: #fff;
    text-transform: capitalize;
    text-align: left;
}

/*story details page*/

.footer {
    display: block;
    background-color: #fff;
}

.footer .footer-container {
    display: block;
    padding: 46px 0;
}

.footer .footer-container .rw {
    display: flex;
    flex-wrap: wrap;
    margin: -15px;
}

.footer .footer-container .rw .colm {
    display: block;
    float: left;
    max-width: 20%;
    flex: 0 0 20%;
    padding: 15px;
}

.footer .footer-container .rw .colm:first-child {
    max-width: 40%;
    flex: 0 0 40%;
}

.footer .footer-container h3 {
    display: block;
    color: #000;
    font-family: "GillSansHeavy";
    font-size: 22px;
    font-weight: 700;
    line-height: 26px;
    text-transform: uppercase;
    padding: 0;
    margin: 0 0 20px 0;
}

.footer .footer-container .footer-links {
    display: block;
    margin: 0;
    padding: 0;
}

.footer .footer-container .footer-links li {
    display: block;
    margin: 0;
}

.footer .footer-container .footer-links li:not(:first-child) {
    margin: 14px 0 0 0;
}

.footer .footer-container .footer-links li a {
    display: inline-block;
    color: #000;
    font-size: 17px;
    font-weight: 400;
    line-height: 21px;
}

.footer .footer-container .footer-links li a:hover {
    color: #b62ca4;
}

.footer .footer-container .footer-logo {
    display: inline-flex;
}

.footer .footer-container .footer-logo img {
    display: block;
    height: 50px;
    width: auto;
}

.footer .footer-container .copyright {
    display: block;
    color: #000;
    font-size: 17px;
    font-weight: 400;
    line-height: 22px;
    margin: 38px 0 0 0;
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    margin: 22px 0 0 0;
}

.social-links a {
    display: block;
    float: left;
}

.social-links a:not(:last-child) {
    margin-right: 12px;
}

.social-links a img {
    display: block;
    width: 26px;
    height: auto;
}

.footer {
    display: block;
    background-color: #fff;
}

.footer .footer-container {
    display: block;
    padding: 46px 0;
}

.footer .footer-container .rw {
    display: flex;
    flex-wrap: wrap;
    margin: -15px;
}

.footer .footer-container .rw .colm {
    display: block;
    float: left;
    max-width: 20%;
    flex: 0 0 20%;
    padding: 15px;
}

.footer .footer-container .rw .colm:first-child {
    max-width: 40%;
    flex: 0 0 40%;
}

.footer .footer-container h3 {
    display: block;
    color: #000;
    font-family: "GillSansHeavy";
    font-size: 22px;
    font-weight: 700;
    line-height: 26px;
    text-transform: uppercase;
    padding: 0;
    margin: 0 0 20px 0;
}

.footer .footer-container .footer-links {
    display: block;
    margin: 0;
    padding: 0;
}

.footer .footer-container .footer-links li {
    display: block;
    margin: 0;
}

.footer .footer-container .footer-links li:not(:first-child) {
    margin: 14px 0 0 0;
}

.footer .footer-container .footer-links li a {
    display: inline-block;
    color: #000;
    font-size: 17px;
    font-weight: 400;
    line-height: 21px;
}

.footer .footer-container .footer-links li a:hover {
    color: #02a09a;
}

.footer .footer-container .footer-logo {
    display: inline-flex;
}

.footer .footer-container .copyright {
    display: block;
    color: #000;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    margin: 20px 0 0;
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    margin: 22px 0 0 0;
}

.social-links a {
    display: block;
    float: left;
}

.social-links a:not(:last-child) {
    margin-right: 12px;
}

.social-links a img {
    display: block;
    width: 26px;
    height: auto;
}

.story-details .buttons {
    position: static;
    justify-content: flex-start;
}

.btn .icon>img {
    height: auto;
    width: 40px;
}

.four-boxes {
    margin-top: 50px;
}

.four-boxes h3,
.modal-content .center-part h3 {
    margin-top: 0 !important;
}

/*Quiz*/
.backgroundwhite {
    background-image: none !important;
}

.toon {
    max-width: 100px;
}

.result-main-cntn-box {
    /* background-image: url(../images/result-page-bg.webp); */
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    padding: 70px 0;
}


.quiz {
    /* background-image: url(../images/quiz-bg.webp);  */
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 100% 100%;
    padding: 27px 0 60px;
}

.quiz-head {
    display: flex;
    justify-content: center;
    color: #FFF;
    font-family: 'GillSans';
    font-size: 50px;
    font-weight: 900;
    text-transform: uppercase;
    align-items: center;
    margin-bottom: 0px;
    display: none;
}

.quiz-head span {
    display: none;
}

.quiz-container {
    max-width: 1200px;
    margin: 0px auto 0;
    position: relative;
}

.question h3 {
    color: #e91e63;
    font-size: 18px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.question h3 span {
    background: #02A09A;
    width: 48px;
    height: 48px;
    padding: 11px 12px;
    display: flex;
    align-items: center;
    vertical-align: top;
    color: #fff;
    font-size: 16px;
    object-fit: fill !important;
    border-radius: 50%;
}

.question h3 .text {
    display: inline-block;
    width: calc(100% - 59px);
    background: none;
    vertical-align: top;
    line-height: 38px;
    margin: 0;
    padding: 0 13px;
    color: #000;
    font-size: 27px;
    font-family: "Poppins", system-ui;
    font-weight: 700;
}

.options {
    margin-left: 75px;
}

.question .options {
    margin-left: 0px;
}

.question .options .row {
    margin-left: 0;
    margin-right: 0;
}

.question .options .forres img {
    height: 200px;
    object-fit: contain;
}

.options .form-check {
    display: flex;
    align-items: center;
}

.options label {
    /* color: #fff; */
    color: #000;
    font-size: 20px;
    font-weight: 400;
    line-height: 161.3%;
    /* 34.257px */
    margin-left: 12px;
    font-family: "Poppins", system-ui;
}

.options .form-check-label span {
    background: #E1E1E1;
    padding: 1px 4px 1px 7px;
    border-radius: 6px;
    border: 1px solid #E1E1E1;
    background: #fff;
    color: #000;
    float: left;
    margin-right: 10px;
    font-size: 18px;
}

.options .form-check-input {
    margin-right: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    position: relative;
    top: 0px;
    right: 0;
    bottom: 0;
    left: 0;
    height: 25px;
    width: 25px;
    transition: all 0.15s ease-out 0s;
    background: transparent;
    /* border: 2px solid #fff;
  color: #fff; */
    border: 2px solid #000;
    color: #000;
    cursor: pointer;
    display: inline-block;
    margin-right: 0.5rem;
    outline: none;
    position: relative;
    z-index: 1000;
}

.options .form-check-input:checked {
    background: url(../images/checked.png) no-repeat center;
    border: 0px;
}

.options .form-check-input:checked+.form-check-label {
    color: #DE54CC;
    font-weight: 600;
}

.options .form-check-input:checked+.form-check-label span {
    border: 1px solid #DE54CC;
    background: #DE54CC;
    color: #fff;
    font-weight: 400;
}

.options .form-check-input:focus {
    box-shadow: none;
}

/* css for newly designed quiz */

.custom-radio-card {
    position: relative;
}

.custom-radio-input {
    display: none !important;
}

.custom-radio-label {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    height: 100%;
    min-height: 120px;
    margin-left: 0;
}

.custom-radio-label:hover .radio-option,
.custom-radio-label:hover .radio-text {
    border: 1px solid #a1a4a0;
}

.custom-radio-label .radio-option {
    /* background-color: #BEFFFD; */
    color: #fff;
    /*padding: 4px 8px;*/    
    margin-bottom: 8px;
    font-weight: bold;
    width: 100%;
    text-align: center;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
    /*border-radius: 5px;
    border: 1px solid #ddd;*/
}

.custom-radio-label .radio-option img {
    max-height: 200px;
    height: 100%;
    max-width: 250px;
}

.custom-radio-label .radio-option.even {
    /*background-color: #BBF3F1;*/
}

.custom-radio-label .radio-text {
    font-size: 17px;
    color: #000;
    background: #f8f8f8;
    width: 100%;
    border-radius: 5px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", system-ui;
    font-weight: 600;
    transition: all 0.3s ease-in-out;
    padding: 5px;
    line-height: 19px;
    overflow-y: auto;
}

.custom-radio-label img.view-quiz-img {
    width: 100%;
    max-height: 100px;
    object-fit: contain;
}

.custom-radio-input:checked+.custom-radio-label {
    /* border-color: #f06292;
  background-color: #fde9f1; */
    position: relative;
}

/* When the selected answer is correct */
.custom-radio-label.correct .radio-text {
    background-color: #21d63c;
    color: #fff;
}

/* When the selected answer is wrong */
.custom-radio-label.incorrect .radio-text {
    background-color: #D83134;
    color: #fff;
}

.explanation-box {
    background-color: #FFF3F6;
    color: #721c24;
    border-radius: 8px;
    margin-top: 20px;
    font-family: "Poppins", sans-serif;
    animation: fadeIn 0.3s ease-in-out;
    overflow: hidden;
    /* border:1px solid #21d63c; */
}

.explanation-box .explanation-header {
    font-weight: bold;
    display: flex;
    align-items: center;
    font-size: 18px;
    background: #D83134;
    padding: 10px 15px;
    gap: 10px;
    color: #fff;
    font-weight: 600;
    font-family: 'poppins';
}

.explanation-box .explanation-body {
    font-size: 14px;
    line-height: 1.6;
    padding: 10px 15px;
    color: #413840;
    font-size: 18px;
    border: 1px solid #D83134;
    border-top: 0;
    border-radius: 0 0 8px 8px;
}

.correct-explanation-box .correct-explanation-header {
    font-weight: bold;
    display: flex;
    align-items: center;
    font-size: 18px;
    background: #21d63c;
    padding: 10px 15px;
    gap: 10px;
    color: #fff;
    font-weight: 600;
    font-family: 'poppins';
    border-radius: 8px 8px 0 0;
}

.correct-explanation-box .correct-explanation-body {
    font-size: 14px;
    line-height: 1.6;
    padding: 10px 15px;
    color: #413840;
    font-size: 18px;
    border: 1px solid #21d63c;
    border-top: 0;
    border-radius: 0 0 8px 8px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.ans_1_related_text,
.ans_2_related_text,
.ans_3_related_text,
.ans_4_related_text {
    border: 1px solid #ccc;
    width: 100%;
    display: block;
    padding: 20px;
    border-radius: 8px;
    background: #effbf0;
    height: 100%;
    line-height: 1.4;
}



/* css for newly designed quiz ends*/

.continue-btn {
    background: #1AB59C;
    color: #fff;
    border: none;
    padding: 15px;
    font-size: 18px;
    border-radius: 50px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: flex;
    max-width: 386px;
    justify-content: center;
    margin: auto;
}

.continue-btn:hover {
    background-color: #14937e;
}

.continue-btn2,
.review_quiz_btn {
    /* background: #fff;
  color: #580068; */
    background: #1AB59C;
    color: #fff;
    font-weight: 500;
    border: none;
    padding: 15px 36px;
    font-size: 18px;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: flex;
    opacity: 1;
    /* max-width: 277px; */
    height: 43px;
    justify-content: center;
    align-items: center;
    /* margin: auto; */
    transition: ease-in-out 0.6s;
}

.review_quiz_btn {
    max-width: max-content;
    border-radius: 25px;
    margin-left: auto;
    margin-right: auto;
}

.continue-btn2:focus,
.review_quiz_btn:focus {
    background: #14937e !important;
}

.continue-btn2:hover,
.review_quiz_btn:hover {
    /* background-color: #DE54CC; */
    background-color: #14937e;
    color: #fff;
}

#review_sec_story {
    padding: 50px 0;
}

#backBtn.continue-btn2 {
    background: #f7f7f7;
    color: #636262;
    /* border:1px solid #DFDBDB; */
    width: 40px;
    height: 40px;
    padding: 0;
    position: absolute;
    left: -353px !important;
}

#nextBtn.continue-btn2,
#quizContinue.continue-btn2 {
    padding: 0;
    width: 40px;
    height: 40px;
    position: absolute;
    right: -40px !important;
    background: #f7f7f7 !important;
}

.build-now-btn {
    background: #1AB59C;
    color: #fff;
    box-shadow: 0px 4px 44px 0px rgba(0, 0, 0, 0.58);
    font-weight: 500;
    border: none;
    padding: 15px 80px;
    font-size: 18px;
    border-radius: 23px 0;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: flex;
    /* max-width: 277px; */
    height: 72px;
    justify-content: center;
    align-items: center;
    margin: auto;
    transition: ease-in-out 0.6s;
    text-transform: uppercase;
}

.build-now-btn:hover,
.build-now-btn:focus {
    background: #14937e;
}

/*Quiz*/

.video-rating {
    background: url(../images/select-profile-bg.png) no-repeat center;
    background-size: cover;
    padding: 128px 0 38px;
}

.video-rating.video-rating-child {
    background: #fff;
}

.video-rating.eBook_section {
    padding: 0 !important;
}

.video-rating h1 {
    font-size: 44px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
    text-transform: capitalize;
}

#story-rating-form h1 {
    font-size: 42px;
    font-weight: 700;
    color: #000;
    margin-bottom: 20px;
    text-transform: capitalize;
}

.rating-from {position: relative;}
.rating-from textarea.form-control{width: 75%;}

.video-rating h4 {
    font-size: 27px;
    font-family: "Margarine", sans-serif;
    font-weight: 400;
    color: #fff;
}

.video-rating label {
    color: #fff;
    font-size: 19px;
    font-weight: 400;
    font-family: "Margarine", sans-serif;
    text-align: left;
}

.video-rating textarea {
    border-radius: 10px;
    /* border: 1px solid #E100FF; */
    background: #FFF;
    resize: none;
}

.video-rating .form-check-label {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    font-family: "Poppins", system-ui;
    padding-top: 11px;
}

.video-rating .form-check-label span {
    background: #E1E1E1;
    padding: 3px 6px 3px 9px;
    border-radius: 6px;
    border: 1px solid #E1E1E1;
    background: #E6E6E6;
}

.video-rating .form-check-input {
    margin-right: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 25px;
    width: 25px;
    transition: all 0.15s ease-out 0s;
    background: #fff;
    border: 1px solid #fff;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin-right: 0.5rem;
    outline: none;
    position: relative;
    z-index: 1000;
}

.video-rating .form-check-input:checked {
    background: url(../images/ellipse.png) no-repeat center;
}

.video-rating .form-check-input:checked+.form-check-label {
    color: #fff;
}

.video-rating .form-check-input:checked+.form-check-label span {
    border: 1px solid #fff;
    background: #FCD3E2;
}

.video-rating .form-check-input:focus {
    box-shadow: none;
}

.video-rating .submit-btn {
    border-radius: 36px;
    background: #1AB59C;
    width: 172px;
    height: 55px;
    font-size: 17px;
    font-weight: 600;
    font-family: "Poppins", system-ui;
    text-transform: uppercase;
    border: 0px;
    color: #fff;
    transition: ease-in-out 0.6s;
}

.video-rating .submit-btn:hover {
    background: #14937e;
}

.video-container {
    width: 100%;
    height: 0;
    position: relative;
    padding-bottom: 56.25%;
}

.video-container video {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: 100%;
    border-radius: 20px;
    border: 20px solid #EDDAEB;
}

.video-container .video-thumbnail,
.video-container iframe {
    border-radius: 20px;
    border: 9px solid #EDDAEB;
    height: 188px;
}


.toppart .title .pinktxt {
    /* color: #02a09a; */
    color: #2e2929;
    font-size: 24px;
    font-weight: 400;
}

.play-btn {
    position: absolute;
    left: 26%;
    cursor: pointer;
    top: 152px;
}

.play-button {
    position: absolute;
    left: 50%;
    cursor: pointer;
    top: 44%;
    transform: translate(-50%, -50%);
    width: 58px;
    background: transparent;
    border: 0;
}

.video-thumbnail {
    position: relative;
}

.audioplay-btn {
    position: absolute;
    bottom: -16px;
    left: 50%;
    cursor: pointer;
}

.audioplay-btn img {
    width: 62px;
    height: 54px;
}

.video-container video.paused+.play-btn {
    display: block;
}

#ratings input {
    display: none;
}

#ratings label {
    cursor: pointer;
    font-size: 90px;
    background: linear-gradient(to bottom, #3AB390 0%, #3AB390 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    width: 100px;
    height: 100px;
    line-height: 60px;
    text-align: center;
    float: left;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    opacity: 1 !important;
}
.submit-btn {
    text-transform:inherit !important;
}

#ratings label:hover {
    font-size: 90px;
    color: #fff;
}

#ratings label:before {
    display: inline;
    width: auto;
    height: auto;
    line-height: normal;
    vertical-align: baseline;
    margin-top: 0;
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
    -webkit-font-smoothing: antialiased;
    content: "\f005";
}

#ratings input:checked+label~label {
    opacity: .4 !important;
}

#ratings input:checked+label~label:before {
    content: "\f005";
}

#ratings {
    display: inline-block;
}

#ratings:hover label:before {
    content: "\f005";
}

#ratings:hover label:hover~label:before {
    content: "\f005";
}

#story-rating-form label.mb-3 {
    font-size: 30px;
    color: #0C0C0C;
    font-weight: 600;
    line-height: 120%;
}

textarea#story_message {
    background-color: #F9F9F9;
    padding: 24px;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
}

#bigvideoModalToggle2 .modal-lg,
#bigvideoModalToggle3 .modal-lg {
    max-width: 1000px;
    position: relative;
}

#bigvideoModalToggle2 .modal-lg video {
    max-width: 100%;
}

#bigvideoModalToggle3 .modal-lg iframe {
    height: 420px;
    object-fit: fill;
    max-width: 100%;
}

#bigvideoModalToggle2 .btn.close,
#bigvideoModalToggle3 .btn.close {
    position: absolute;
    top: 19px;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 35px;
}


#bigvideoModalToggle2 .btn.share {
    position: absolute;
    top: 19px;
    right: 35px;
    font-size: 35px;
}

:not(.btn-check)+.btn:active {
    border-color: transparent;
    background-color: #18CDC6;
}

#bigvideoModalToggle2 .btn:focus {
    box-shadow: none;
}

.menuNav_box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.loginBtn_area {
    display: flex;
    gap: 12px;
    padding-left: 32px;
    /* border-left: 1px solid #FFFFFF33; */
    padding-right: 32px;
    position: relative;
}

.loginBtn_area::before {
    content: " ";
    width: 1px;
    height: 24px;
    background-color: #FFFFFF33;
    position: absolute;
    left: 0;
    top: 10px;
}

a.nav-link {
    color: white;
    font-size: 15px;
    font-weight: 400;
    padding-right: 32px;
}

/*profile page*/

.profilebg {
    background: url(../images/purple-bg.webp) no-repeat;
    background-size: cover;
    padding: 213px 0 352px;
}


.wrong-user-input {
    position: absolute;
    right: 487px;
    top: 154px;
    z-index: 99;
    color: red;
}



/*build quiz*/

.buildquiz-head img {
    width: 81px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
}

.buildquiz-head div {
    /* color: #fff; */
    text-align: center;
    font-family: "Poppins", system-ui;
    font-size: 50px;
    font-weight: 600;
    text-transform: capitalize;
}

.select-age-country {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #815A76;
}

.select-age-country label {
    color: #000;
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 10px;
}

.select-age-country h4 {
    font-size: 30px;
    font-weight: 600;
    /* color:#fff; */
}

.country-select-wrapper {
    display: flex;
    flex-direction: column;
}

.custom-dropdown {
    position: relative; min-width: 190px; line-height: 37px;
    display: inline-block; background: #f1f1f1;
}
.custom-dropdown .country-select{
    padding: 5px 30px 5px 10px;
}

.custom-dropdown .dropdown-button {
    /* padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  cursor: pointer; */
    margin: 0;
    font-size: 30px;
    color: #fff;
    font-weight: 600;
    padding-right: 40px;
    text-align: left;
}

.custom-dropdown .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #02a09a;
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
}

.custom-dropdown .dropdown-menu li {
    padding: 10px;
    cursor: pointer;
    color: #fff;
    font-size: 20px;
}

.custom-dropdown .dropdown-menu li:hover {
    background-color: #1967d2;
}

/* Show dropdown on hover (optional JavaScript can also be used) */
.custom-dropdown:hover .dropdown-menu {
    display: block;
}

.global-select-wrapper {
    display: none;
}


.country-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding: 10px;
    padding-right: 30px;
    background-color: transparent;
    /* color: #fff; */
    font-size: 18px;
    border: 2px solid #fff;
    border-radius: 5px;
    cursor: pointer;
    border: 0;
    padding: 0;
    font-size: 30px;
    font-weight: 600;
}

.country-select:focus {
    outline: none;
    border-color: #d5c8df;
    /* Lighter border color on focus */
}

select#country option {
    padding-left: 20px;
}

.custom-dropdown::after {
    content: '\25BC';
    /* Down arrow symbol */
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #d5c8df;
    /* Light color for the arrow */
    pointer-events: none;
    /* Prevent interaction with the arrow */
}

.country-select option {
    background-color: #02a09a;
    /* Same background as the body */
    /* color: white;  */
}

.quiz-container .topics-wrapper {
    margin-bottom: 35px;
}

.topics-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 35px;
}

.topics-wrapper label {
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #000;
    margin-bottom: 37px;
    ;
}

.topics {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 16px;
}

.topic {
    background-color: white;
    color: #050505;
    border: none;
    border-radius: 30px;
    padding: 14px 34px;
    font-size: 21px;
    cursor: pointer;
    transition: ease-in-out 0.6s;
    border: 1px solid #1AB59C;
}

.topic:hover,
.topic.selected {
    background-color: #02a09a;
    color: #fff;
    box-shadow: 0px 4px 34px 0px rgba(0, 0, 0, 0.45) !important;
    border: 1px solid transparent;
}
.topic.disabled {
    background-color: #e0e0e0;
    color: #666;
    cursor: not-allowed;
    opacity: 0.6;
}

#quiz-filter-res {
    /* background: #ed3030; */
    padding: 10px;
    border-radius: 5px;
    width: max-content;
    top: -163px;
    position: absolute;
    right: 10px;
    color: #ed3030;
}

@media (max-width: 768px) {
    .topics {
        justify-content: center;
    }
}


/*build quiz*/


/*story listing*/

.stories {
    background: #fdf9f9;
    padding: 20px 0;
}

.story-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.story-list-header h1 {
    font-size: 54px;
    font-weight: 600;
    color: #000;
}

.filter-buttons {
    display: flex;
    gap: 10px;
}

.filter-rgt .filter-button {
    background-position-x: 99%;
}

.filter-button {
    display: inline-flex;
    align-items: center;
    padding: 11px 34px 11px 30px;
    line-height: 20px;
    border: 1px solid #847F7F;
    border-radius: 10px;
    background-color: #fff;
    font-size: 16px;
    color: #000;
    cursor: pointer;
    height: 44px;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-color: #fff;
    background-position-x: 95%;
    background-position-y: 8px;
    border: 1px solid #000000;
    transition: background-color 0.3s, border-color 0.3s;
}

.filter-button span {
    margin-left: 10px;
    font-size: 14px;
    transform: translateX(0);
    transition: transform 0.3s ease;
}

.filter-button:hover,
.filter-button:focus {
    background-color: #f0f0f0;
    border: 1px solid #847F7F;
}

.filter-button:hover span {
    transform: translateX(5px);
    /* Slight arrow movement on hover */
}

.stories .title {
    font-weight: 600;
    font-size: 24px;
    color: #000;
    margin-bottom: 20px;
    /* text-transform: capitalize; */
}

.custom_showpost_class .explore-image-box {
    width: 90% !important;
}

.videobox .explore-image-box {
    width: 100%;
}

.explore-image-box {
    display: block;
    width: 90%;
    padding: 5px !important;
    overflow: hidden;
    position: relative;
    border-radius: 5px;
    border: 1px solid #EED7D7;
    background: #fff;
}
.explore-image-box.estory_child a{display: block;}
.explore-image-box.estory_child img{
    border-top-left-radius: 5px !important;
    border-top-right-radius: 5px !important;
    margin-bottom: 0 !important;
}
.explore-image-box.estory_child .story-cat{display: none;}
.explore-image-box.estory_child .childrating{padding: 0px 0px; border: 0;}
.explore-image-box.estory_child .childrating p{display: none;}

.explore-image-box.white_box button.play-button.viewVideo {
    max-width: 70px;
}

.explore-image-box.white_box button.play-button.viewVideo img {
    height: fit-content;
}

.explore-image-box .likedislike {
    margin-left: auto;
    margin-right: 6px;
}


.story-cat {
    display: flex;
    align-items: center;
    padding: 0 5px 6px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    color: #02a09a;
    border-bottom: 1px solid rgba(150, 97, 143, 0.25);
}

.story-cat .tag {
    padding: 6px;
    border: 1px solid #ededed;
    width: 36px;
    height: 36px;
    justify-content: center;
    align-items: center;
    display: flex;
    border-radius: 50%;
    margin-right: 8px;
}

.likedislike button i {
    font-size: 26px;
}

.story-cat .tag img {
    width: 24px;
    height: auto;
    object-fit: contain !important;
}

/* .stories .explore-image-box button img {
  object-fit: contain;
  height: fit-content;
} */

.childrating,
.parentrating {
    display: flex;
    align-items: center;
    padding: 3px 15px;
    border-bottom: 1px solid #ededed;
    justify-content: space-between;
}

.childrating p,
.parentrating p {
    font-size: 12px;
    font-weight: 500;
    color: #02a09a;
    text-transform: uppercase;
}

.childrating .stars,
.parentrating .stars {
    border-bottom: none;
    padding: 0;
}

.star-rating {
    font-size: 24px;
    color: #ffcc00;
    display: inline-block;
}

.star {
    color: #ddd;
}

.star-filled {
    color: #ffcc00;
}

.likedislike button {
    border: 1px solid #FBE8F8;
    box-shadow: 0px 4px 11px rgba(195, 64, 178, 0.12);
    width: 53px;
    height: 53px;
    border-radius: 50%;
}

.stories .owl-carousel {
    position: relative;
}

.stories .owl-nav .owl-prev,
.stories .owl-nav .owl-next {
    font-size: 50px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow:0px 5px 20px rgba(0, 0, 0, 0.1);
    background-color: #fff !important;
}

.stories .owl-nav .owl-prev span,
.stories .owl-nav .owl-next span {
    font-size: 50px;
}

.stories .owl-nav .owl-prev {
    position: absolute;
    left: -25px;
    bottom: 159px;
    z-index: 999999;
}

.stories .owl-nav .owl-next {
    position: absolute;
    right: -25px;
    bottom: 159px;
    z-index: 999999;
}

.stories .explore-image-box img {
    /*height: 280px;*/
    object-fit: cover;
    width: 100%;
}

.videobox .explore-image-box img {
    height: 200px;
}

.listen {
    color: #4B494B !important;
}

.child-profile-added-msg {
    width: max-content;
    position: absolute;
    right: 486px;
    bottom: 363px;
}

/*story listing*/



/*audio book*/

.audiobook-bg {
    /* background: url(../images/purple-bg.webp) no-repeat center; */
    background: #fff;
    background-size: cover;
    padding: 0px 0;
    /* display: flex;
    align-items: center;
    justify-content: center; */
}

.div-001 {
    padding: 0 !important;
}

.story-slider .expand-icon {
    position: absolute;
    top: -134px;
    right: 23px;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    background: #fff;
    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.15);
    padding: 8px;
    cursor: pointer;
    border-radius: 10px;
}

.story-slider .carousel-control-next-icon,
.story-slider .carousel-control-prev-icon {
    width: 3rem;
    height: 3rem;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: flex;
    top: 0;
    bottom: 0;
    margin: auto;
    background-image: none;
    background-color: #FFEAFD;
}

.modal-backdrop {
    z-index: 9;
}

.story-slider .owl-carousel .item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 20px;
    box-sizing: border-box;
    justify-content: center;
}

.story-slider .slide-text {
    padding-right: 20px;
    box-sizing: border-box;
    padding-left: 125px;
}

.story-slider .slide-text h2 {
    color: #02a09a;
    text-align: center;
    font-family: "Margarine", sans-serif;
    font-size: 48px;
    font-weight: 400;
    margin-bottom: 40px;
}

.story-slider .slide-text p {
    color: #fff;
    text-align: left;
    font-size: 25px;
    font-weight: 400;
    margin-top: 0px;
    max-width: 70%;
}

.story-slider .slide-image {
    width: initial;
    display: inline-flex;
    padding-right: 125px;
}

.story-slider .slide-image img {
    width: 476px;
    height: 455px;
    margin: auto;
    text-align: center;
    justify-content: center;
    display: flex;
}

#content {
    display: flex;
    justify-content: center;
    align-items: center;
}

#content.fullscreen {
    height: 65vh;
}

.hidden {
    display: none !important;
}

/*audio book*/



/*profile dropdown*/

.header_profile_img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
    object-fit: cover !important;
}

.profile img+span {
    color: #ffffff;
    font-family: "Poppins", system-ui;
    font-size: 19px;
    font-weight: 400;
    text-transform: capitalize;
}

.profile span {
    color: #ffffff;
    font-family: "Margarine", sans-serif;
    font-size: 19px;
    font-weight: 400;
    text-transform: capitalize;
}

.profile-dropdown {
    display: none;
    position: absolute;
    top: 48px;
    right: -9px;
    background: white;
    border: 1px solid rgba(117, 125, 128, 0.3);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
    width: 220px;
    padding: 16px;
    border-radius: 10px;
    font-size: 14px;
    z-index: 999;
}

.profile-dropdown a {
    display: block;
    padding: 10px 5px;
    color: #767676;
    text-decoration: none;
    transition: ease-in-out .6s;
    font-size: 15px;
}

.profile-dropdown a i {
    transition: ease-in-out .6s;
}

.profile-dropdown a:hover,
.profile-dropdown a:hover i {
    color: #000;
    font-weight: 500;
    background: #e4e0e0;
}

/*profile dropdown*/

.fa-eye:before {
    content: "\f06e";
}

.eye-toggle,
.eye-toggle_c {
    position: absolute;
    top: 57%;
    font-size: 20px;
    right: 76px;
    transform: translateY(-50%);
    cursor: pointer;
}

.password-container {
    position: relative;
}

.password-container input {
    padding-right: 40px;
}

.shwopass {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #888;
}

.shwopass a {
    cursor: pointer;
    color: #000;
}

.shwopass:hover {
    color: #333;
}


/*story slider*/

.slider {
    margin: auto;
    text-align: center;
}

.slide {
    display: none;
    font-size: 1.5rem;
}

.slide .textpart {
    max-width: 40%;
}

.slide .textpart p {
    font-size: 24px;
    text-align: left;
    /* color: #fff; */
    color: #000;
    line-height: 165.3%;
}

.slide .imgpart {
    flex: 1;
    margin: auto;
    height: 90vh;
    text-align: center;
}


.full-screen-height2 .container.full-width,
.full-screen-height2 .container.full-width .customslider,
.full-screen-height2 .container.full-width #slider,
.full-screen-height2 .container.full-width #slider .slide{height: 100%;}
.full-screen-height2 .container.full-width #slider .slide .imgpart{height: 100vh;}
.full-screen-height2 .container.full-width #slider .slide .imgpart .main_img{height: 100%;}

#fullscreen-section .container.full-width #slider .slide .question{height: calc(100vh - 99px); align-items: center; display: flex;}
#fullscreen-section .container.full-width #slider .slide .question .row{flex: 1; width: 100%;}
#fullscreen-section .container.full-width #slider .slide .question.full-screen-height{height: 100%;}

.mycustomclass {
    height: calc(100vh - 99px);
}
.mycustomclass.full-screen-height{
    /*height: calc(100vh - 100px);
    box-shadow: 0 0px 14px rgba(103, 16, 91, 0.20) !important;*/
    height: 100%;
}

.slide .imgpart .main_img {    
    /* height: auto;
    height: 808px;
    object-fit: contain; */

    width: auto;
    max-height: 100%;
    object-fit: contain; 
    object-position: center;
 
}

.question img.img-fluid {
    width: calc(100% - 50px);
    height: auto;
    max-height: 290px;
    object-fit: contain;
}

.slide .mycustomclass {
    /* padding-left:80px;
  padding-right:80px; */
    padding-left: 0;
    padding-right: 0;
}

.audiobook-bg .quiz-slide .audio-container:has(audio.audio) {
    margin-top: 25px;
    /* justify-content: end !important; */
    padding-left: 0px;
    justify-content: center !important;
    align-items: center;
}

.audiobook-bg .audio-container:has(audio.audio) {
    margin-top: 25px;
    justify-content: center !important;
    padding-left: 80px;
    gap: 50px;
    align-items: center;
    position: absolute;
    right: 30px;
    bottom: 5px;

}

.audiobook-bg .slide.quiz-slide h3 {
    display: flex;
}

.active {
    display: block;
}

.controls {
    margin-top: 10px;
    position: absolute;
    top: 50%;
    width: 100%;
}

.controls #prevBtn {
    /* top:50%; 
  left:0;
  position:absolute;*/
    width: 40px;
    height: 40px;
    /* box-shadow:0 5px 10px rgba(0,0,0,0.5); */
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    background: #f7f7f7;
    display: flex;
    border: 0;
    position: absolute;
    left: -304px;
}

.controls #nextBtn {
    /* top:50%;
  right:0; 
  position:absolute;*/
    width: 40px;
    height: 40px;
    /* box-shadow:0 5px 10px rgba(0,0,0,0.5); */
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    background: #f7f7f7;
    display: flex;
    border: 0;
    position: absolute;
    right: -304px;
}

button {
    margin: 5px;
}

#fullscreen-btn,
#exit-fullscreen-btn {
    position: absolute;
    top: 0px;
    right: -289px;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    background: #fff;
    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.15);
    padding: 5px 5px 2px;
    cursor: pointer;
    border-radius: 10px;
}

#fullscreen-btn img,
#exit-fullscreen-btn img {
    width: 20px;
}

#playBtn img,
#resumeBtn img {
    width: 93px;
    height: 85px;
}

#pauseBtn img {
    width: 93px;
    height: 93px;
}

#filterVideoModal .select2-container--default .select2-selection--multiple .select2-selection__choice {
    bottom: 0px !important;
    margin-top: 5px !important;
}

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


/*story slider*/

/* .df-float .df-ui>.df-ui-btn:last-child{
  display: none;
} */

.paragraph_txt {
    color: #000;
    font-size: 18px;
    line-height: normal;
}

.btn_finish {
    border-radius: 5px;
    background: #1AB59C;
    font-family: "Poppins", system-ui;
    text-transform: uppercase;
    font-weight: 500;
    border: 0;
    font-size: 16px;
    padding: 14px 30px;
    color: #FFFFFF;
    width: 115px;
}

.videoCont~.btn_finish {
    position: absolute;
    left: 50%;
    right: 0;
    bottom: 20px;
    margin-left: -55px;
}

.videoCont {
    position: relative;
    padding-bottom: 56.25%;
    margin-bottom: 65px;
}

.videoCont iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0px;
}

#bigvideoModalToggle3 .modal-lg .videoCont iframe {
    height: 100%;
}

/* #finshButton{
  display: none;
} */

.continue_btn {
    border-radius: 5px;
    background: #1AB59C;
    font-family: "Poppins", system-ui;
    text-transform: uppercase;
    font-weight: 500;
    border: 0;
    font-size: 16px;
    padding: 14px 30px;
    color: #FFFFFF;
}

/* i-story */
.single_story {
    padding-top: 64px;
}

.single_story .buttons {
    padding-top: 0px;
}

.single_story .right-img img {
    margin-top: 15%;
}

.single_story .four-boxes {
    margin-bottom: 0;
}

/* i-story */

.cmn_cssModal .title {
    margin: 25px 0px 0px;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 31px;
}

.cmn_cssModal .title .pinktxt {
    line-height: 24px;
    /* padding-right:10px; */
}

.cmn_cssModal .title .smalltxt {
    /* display: block; */
    font-size: 32px;
    line-height: 42px;
}

.cmn_cssModal .toppart .big-img img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cmn_cssModal .title .text-lowercase {
    font-size: 18px;
    line-height: 24px;
}

.cmn_cssModal .title br {
    display: none;
}

#quizModalToggle .center-box {
    margin-top: 10px;
}

#quizModalToggle .text-container h3 {
    margin-top: 10px;
}

#quizModalToggle .video-container,
#videoModalToggle .video-container {
    padding-bottom: 54.25%;
    background-color: #000000;
    border-radius: 25px;
}

#videoModalToggle .video-container .video-thumbnail,
#videoModalToggle .video-container iframe {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* #videoModalToggle .video-container img {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
} */


.video-thumbnail0,
.video-thumbnail1,
.video-thumbnail2,
.video-thumbnail3,
.video-thumbnail4 {
    border: 9px solid rgb(237, 218, 235);
    border-radius: 20px;
    height: 183px;
    overflow: hidden;
}

.video-container .onlyforborder {
    border: 9px solid rgb(237, 218, 235);
    border-radius: 20px;
    height: 183px;
    overflow: hidden;
}

#review_sec {
    display: none;
}

#show_book {
    display: none;
}

.eBook_section .df-container.df-floating>.df-ui-next,
.eBook_section .df-container.df-floating>.df-ui-prev {
    background: #f7f7f7;
    border-radius: 5px;
    color: #000000;
    padding: 8px;
    font-size: 22px;
    width: 40px;
    height: 40px;
}

.eBook_section .df-container.df-floating>.df-ui-prev {
    left: 8px;
}

.cstm_chceckBox_wrap {
    display: flex;
    align-items: center;
}

.cstm_checkBox {
    width: 25px;
    height: 25px;
    position: relative;
    margin: 0 !important;
}

.cstm_checkBox .cstm_checkBox_border {
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    border-radius: 2px;
    position: relative;
    display: block;
    /* border:2px solid #E638CF; */
}

.cstm_checkBox .cstm_checkBox_border::before {
    position: absolute;
    content: '';
    width: 15px;
    height: 7px;
    border-left: 2px solid #e638cf;
    border-bottom: 2px solid #e638cf;
    left: 5px;
    top: 7px;
    transition: 0.5s;
    transform: rotate(-45deg);
    visibility: hidden;
    opacity: 0;
}

.cstm_checkBox input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.cstm_checkBox input[type="checkbox"]:checked~.cstm_checkBox_border::before {
    visibility: visible;
    opacity: 1;
}

.cstm_chceckBox_wrap .cstm_checl_lbl {
    font-size: 30px;
    font-weight: 600;
    color: #E638CF;
    margin-left: 15px;
}

/* quiz-resultModal-main */
.quiz-resultModal-main .modal-dialog {
    max-width: 1200px;
}

.quiz-resultModal-main .qz_result_modal_cont_wrap {
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
}

.qz_result_modal_img {
    width: 205px;
    height: 182px;
    border-radius: 20px;
    background: #EAD2E7;
    background-image: url(../images/user.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
    padding: 5px;
}

.quiz-modal-thumb-inner {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
}

.quiz-modal-thumb-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qz_result_modal_cont {
    width: calc(100% - 205px);
    padding-left: 25px;
}

.qz_result_modal_cont h2 {
    font-size: 30px;
    line-height: 38px;
    margin: 0;
    margin-bottom: 26px;
    font-weight: 800;
    color: #02a09a;
}

.qz_result_modal_cont p {
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    color: #000000;
    margin: 0px;
}

.qz_result_modal_cont p+p {
    margin-top: 15px;
}

/* quiz-resultModal-main */

/* filterModal */
.filterModal .modal-header {
    border: none;
}

.filterModal .modal-body {
    /* padding-bottom: 60px; */
    min-height: 190px;
}

.filterModal .select2-container {
    width: 100% !important;
    position: relative;
}

.filterModal .select2-container::before {
    position: absolute;
    content: '';
    width: 20px;
    height: 20px;
    background-image: url(../images/search.png);
    background-repeat: no-repeat;
    right: 9px;
    top: 16px;
    z-index: 1;
}

.filterModal .select2-container--default .select2-selection--multiple {
    padding-bottom: 0 !important;
}

.filterModal .select2-container .select2-selection--multiple {
    height: 50px;
}

.filterModal .select2-container .select2-selection--multiple .select2-selection__rendered {
    position: relative;
    bottom: -55px;
}

.filterModal .select2-search.select2-search--inline {
    position: absolute;
    left: 0;
    right: 0;
}

.filterModal .select2-container--default .select2-search--inline .select2-search__field {
    height: 50px;
    padding: 5px;
}

.filterModal .select2-container .select2-search--inline .select2-search__field {
    margin: 0;
}

.filterModal .select2-container--default .select2-search--inline .select2-search__field::placeholder {
    line-height: 40px;
    color: #8C8C8C;
}

.filterModal .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    padding-left: 0 !important;
    padding-right: 15px;
    color: #000;
}

.filterModal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    left: unset;
    right: 0;
    top: -4px;
}

.filterModal .modal-footer {
    justify-content: center;
}

.filterModal .modal-footer .btn {
    border-radius: 36px;
    background: #1AB59C;
    color: #FFF;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
    padding: 13px 54px;
    border-color: #1AB59C;
}

/* filterModal */

.wpcf7-submit {
    background: #1AB59C !important;
    color: #fff;
    font-weight: 500;
    border: none;
    padding: 5px 36px !important;
    font-size: 18px;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: flex;
    opacity: 1;
    /* max-width: 277px; */
    height: 43px;
    justify-content: center;
    align-items: center;
    /* margin: auto; */
    transition: ease-in-out 0.6s;
    text-transform: capitalize;
}

.wpcf7-submit:hover {
    background-color: #f6d4f3;
    border: 1px solid #14937e;
    color: #fff;
    padding: 14px;
}


#story-rating-form {
    padding: 80px 0;
}

.video-rating .alert {
    color: #dc3545;
}


@media only screen and (min-width:1199px) {
    .single_story .book-section {
        padding-right: 25px;
    }
}

@media only screen and (max-width:1199px) {
    .modal .btn-close {
        width: 32px;
        height: 32px;
    }

    .quiz-resultModal-main.modal .btn-close {
        right: 7px;
    }
}

@media only screen and (max-width:1024px) {
    .qz_result_modal_img {
        width: 190px;
        height: 170px;
    }

    .qz_result_modal_cont {
        width: calc(100% - 190px);
    }

    .qz_result_modal_cont h2 {
        font-size: 28px;
        line-height: 34px;
        margin-bottom: 20px;
    }

    .qz_result_modal_cont p {
        font-size: 16px;
        line-height: 26px;
    }

    .qz_result_modal_cont p+p {
        margin-top: 12px;
    }
}

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

@media only screen and (max-width:767px) {
    #bigvideoModalToggle3 .modal-lg iframe {
        height: 300px;
    }

    .toppart {
        padding: 35px 30px 0px;
    }

    .qz_result_modal_cont_wrap {
        padding: 15px 0px;
    }

    .qz_result_modal_img {
        width: 190px;
        height: 170px;
        margin: 0px auto 20px;
    }

    .qz_result_modal_cont {
        width: 100%;
        padding-left: 0;
        text-align: center;
    }

    #story-rating-form .col-12 {
        order: 2;
    }

    #story-rating-form .col-12.story-rating-child-thumb {
        order: 1;
    }

}

@media only screen and (max-width:575px) {
    #bigvideoModalToggle3 .modal-lg iframe {
        height: 240px;
    }

}

.view-quiz-img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}


table {
    width: 50%;
    border-collapse: collapse;
    margin: 20px auto;
}

th,
td {
    border: 1px solid black;
    text-align: center;
    padding: 10px;
}

/* input {
  width: 60px;
  text-align: center;
} */
.btn-save,
.btn-reset {
    display: block;
    width: 120px;
    margin: 20px auto;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    position: relative;
}

.btn-reset {
    background-color: #FF5733;
}

.btn-save:hover,
.btn-reset:hover {
    opacity: 0.9;
}

#totalPercentage {
    font-weight: bold;
}

.over-limit {
    color: red;
}

input[type="number"] {
    border: none;
    outline: none;
    /* Removes the outline on focus */
}

.mytooltip {
    display: none;
    left: 50%;
    transform: translateX(-50%);
    top: 20px;
    white-space: nowrap;
    min-width: 250px;
    background-color: gray;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    bottom: 30px;
    font-size: 17px;
}

/* rather activity start */
.whould-you-rather-activity {
    padding: 50px 0px 50px 0px;
    /* background-color: #f5f5f5; */
    position: relative;
    /* overflow: hidden; */
}

.whould-you-rather-activity::after {
    content: " ";
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

.rather-acivity-header h1 {
    font-weight: 500;
    font-size: 77px;
    line-height: normal;
    text-align: left;
    color: #565656;
    font-family: 'Sweetie Summer', sans-serif;
}

.total-red-gems h4 {
    margin-top: 0;
    font-family: Poppins;
    font-weight: 700;
    font-size: 25px;
    line-height: 37.5px;
}

.total-red-gems h6 {
    font-weight: 500;
    font-size: 9px;
    line-height: 11.96px;
    text-transform: uppercase;
    color: #281E1E;
}

/* .total-red-gems {
  display: inline-flex;
  background: #F9C9F2;
  padding: 6px 10px;
  gap: 10px;
  border-radius: 15px;
  align-items: center;
} */

.rather-acivity-header {
    position: relative;
    display: flex;
    justify-content: left;
    align-items: center;
}

.total-red-gems {
    display: inline-flex;
    /* background: #F9C9F2; */
    /* background:#FBC198; */
    padding: 3px 24px;
    gap: 10px;
    border-radius: 33px;
    align-items: center;
    position: absolute;
    right: 0;
    top: -63px;
    border: 1px solid #F9C9F2;
    /* box-shadow:0 5px 5px rgba(0,0,0,0.1); */
}

.total-red-gems img {
    width: 26px;
    transform: rotate(90deg);
    margin-right: 5px;
}

.rathr-activity-outer {
    display: flex;
    gap: 0px;
    margin-top: 50px;
    position: relative;
    justify-content: center;
    overflow: hidden;
}

.rather-item.activity-card {
    text-align: center;
}

.rather-price h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 800;
    font-size: 26px;
    line-height: 39px;
    margin: 0px;
    color: #3a3838;
}

.rather-price h3 span {
    font-weight: 800;
    font-size: 13px;
    line-height: 19.5px;
}

.rather-price {
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: fit-content;
    width: fit-content;
    padding: 8px 15px;
    background-color: #3AB39033;
    border-radius: 16px;
    position: absolute;
    left: 15px;
    top: 15px;
}

.rather-price h3.written-h {
    margin: 0px;
    font-weight: 600;
    font-size: 20px;
    line-height: 140%;
    color: #3AB390;
}

.rather-price img {
    width: 50px !important;
    transform: rotate(90deg);
}

.rather-price img.plus-sign {
    height: 30px;
    width: max-content !important;
}

.rather-item h5 {
    font-weight: 800;
    font-size: 18px;
    line-height: 27px;
    position: relative;
    z-index: 2;
    margin-top: 11px;
}

.activity-card img {
    max-width: 100%;
    position: relative;
    z-index: 2;
    max-height: 267px;
    object-fit: contain;
}

.rather-item span.border-devider {
    display: inline-flex;
    height: 2px;
    width: 36%;
    margin: auto;
    position: relative;
    z-index: 2;
    background: linear-gradient(45deg, transparent, black, transparent);
}

.rather-item {
    position: relative;
}

.rather-item .next-btn {
    max-width: calc(100% - 0px);
    margin: auto;
    background-color: #f9f9f900;
    height: 400px;
    position: relative;
    border-radius: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.rather-item .next-btn h4.next-btn-h {
    padding: 7.5px 16px;
    background-color: #CF814B;
    width: fit-content;
    margin: 0px;
    border-radius: 16px;
    color: white;
    font-size: 18px;
    line-height: 140%;
    font-weight: 400;
    position: absolute;
    bottom: 16px;
    left: 16px;
}

/* .activity-card.green-shape::after{
  position: absolute;
  content: '';
  background:url('../images/green-shape.png')no-repeat;
  background-size: contain;
  background-position:100% 80%;
  bottom: 0;
  left:0;
  right: 0;
  height: 100%;
  width: 100%;
  z-index: 0;
}
.activity-card.cyan-shape::after{
  position: absolute;
  content: '';
  background:url('../images/cyan-shape.png')no-repeat;
  background-size: contain;
  background-position:100% 80%;
  bottom: 0;
  left:0;
  right: 0;
  height: 100%;
  width: 100%;
  z-index: 0;
}
.activity-card.grey-shape::after{
  position: absolute;
  content: '';
  background:url('../images/grey-shape.png')no-repeat;
  background-size: contain;
  background-position:100% 80%;
  bottom: 0;
  left:0;
  right: 0;
  height: 100%;
  width: 100%;
  z-index: 0;
} */


.rather-item img.activity-thumb {
    max-height: 395px;
}

.rathr-activity-outer .rather-item.left-rather-item {
    width: 30%;
}

.green-shape span.border-devider {
    background: linear-gradient(45deg, transparent, #59A829, transparent);
}

.cyan-shape span.border-devider {
    background: linear-gradient(45deg, transparent, #36ACDE, transparent);
}

.grey-shape span.border-devider {
    background: linear-gradient(45deg, transparent, #682E0B, transparent);
}

.green-shape h5 {
    color: #28520E;
}

.cyan-shape h5 {
    color: #063144;
}

.grey-shape h5 {
    color: #682E0B;
}

.rathr-activity-outer .activity-card.grey-shape {
    width: 31%;
    z-index: 0;
}

.rathr-activity-outer .activity-slider-box {
    width: 63%;
}

.activity-card .rather-price img {
    width: 30px !important;    
    height: 30px !important;
    margin: 0 0px 0 0px;
}

.rathr-activity-outer .activity-slider-box .rather-item.activity-card {
    max-width: calc(100% - 0px);
    margin: auto;
    background-color: #ffffff00;
    height: 400px;
    position: relative;
    border-radius: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.rathr-activity-outer .activity-slider-box .rather-item.activity-card p.heading-p {
    padding: 7.5px 16px;
    width: fit-content;
    margin: 0px;
    border-radius: 16px;
    color: white;
    font-size: 18px;
    line-height: 140%;
    font-weight: 400;
    position: absolute;
    bottom: 16px;
    left: 16px;
}



.activitySlider button.owl-prev {
    opacity: 0;
}

.five-small-images {
    display: flex;
    align-items: center;
    gap: 90px;
    margin-bottom: 45px;
}

.five-small-images .image1 {
    width: 20%;
    display: flex;
    flex-direction: column;
    text-align: center;
    color: #fff;
    text-transform: capitalize;
    align-items: center;
}

.five-small-images .image1 img {
    width: 100px;
    height: 97px;
    object-fit: contain;
}

.five-small-images .image1 h3 {
    font-size: 18px;
    font-weight: 400;
    margin-top: 0;
}

.activitySlider .owl-nav {
    position: absolute;
    right: -47%;
    width: 38%;
    top: 0;
    z-index: 5;
    height: 100%;
    bottom: 0;
}

.activitySlider button.owl-next {
    position: absolute;
    height: 100%;
    right: 0;
    width: 100%;
    opacity: 0;
}

.activitySlider .owl-stage-outer {
    overflow: hidden !important;
}

.activitySlider .owl-item {
    opacity: 0 !important;
    transition: opacity 0.8s ease-in-out !important;
}

.activitySlider .owl-item.active {
    opacity: 1 !important;
}


/* side bar of dashboard */
.dashboard {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    min-height: 100vh;
}

.dashboard-app {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    background-color: #f8f4f2;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 2;
    -webkit-flex-grow: 2;
    -ms-flex-positive: 2;
    flex-grow: 2;
    margin-top: 0px;
}

.dashboard-content {
    -webkit-box-flex: 2;
    -webkit-flex-grow: 2;
    -ms-flex-positive: 2;
    flex-grow: 2;
    padding: 25px;
}

.dashboard-nav {
    min-width: 278px;
    position: relative;
    left: 0;
    top: 0;
    bottom: 0;
    overflow: auto;
    background-color: #fff;
}

.dashboard-compact .dashboard-nav {
    display: none;
}

.dashboard-nav header {
    min-height: 84px;
    padding: 8px 27px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.dashboard-nav header .menu-toggle {
    display: none;
    margin-right: auto;
}

.dashboard-nav a {
    color: #515151;
}

.dashboard-nav a:hover {
    text-decoration: none;
}

.dashboard-nav {
    background-color: #fff;
    box-shadow: 6px 0px 11px 0px #f9ebf7;
    position: relative;
}

.dashboard-nav a {
    color: #400C39;
}

.left-nav-bottom-shape img {
    position: relative;
    right: -4px;
    bottom: -4px;
    z-index: 0;
    opacity: 0.6;
}

.left-nav-bottom-shape {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: right;
    overflow: hidden;
    z-index: 0;
}

.left-nav-top-shape {
    margin-bottom: -45px;
}

.left-nav-top-shape img {
    opacity: 0.6;
}

.dashboard-nav-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    max-width: calc(100% - 42px);
    margin-left: auto;
}

.dashboard-nav-item {
    min-height: 56px;
    padding: 15px 20px 15px 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    letter-spacing: 0.02em;
    transition: ease-out 0.5s;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0%;
    color: #400C39;
    gap: 15px;
}

.dashboard-nav-dropdown.show a span img {
    filter: brightness(100);
}

.dashboard-nav-dropdown.show a span {
    background: #1AB59C;
    border-color: #1AB59C;
}

.dashboard-nav-item i {
    width: 45px;
    font-size: 19px;
    margin-left: 0px;
}

.dashboard-nav-dropdown:not(:first-child) {
    border-top: 1px solid #02a09a;
}

.dashboard-nav-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.dashboard-nav-item.active {
    background: #F5F5F5;
    border-radius: 30px 0px 0px 30px;
}

.dashboard-nav-dropdown {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 6px 0px;
    z-index: 2;
    position: relative;
}

.dashboard-nav-dropdown.show {
    background: rgba(255, 255, 255, 0.04);
}

.dashboard-nav-dropdown.show>.dashboard-nav-dropdown-toggle {
    font-weight: bold;
}

.dashboard-nav-dropdown.show>.dashboard-nav-dropdown-toggle:after {
    -webkit-transform: none;
    -o-transform: none;
    transform: none;
}

.dashboard-nav-dropdown.show>.dashboard-nav-dropdown-menu {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.dashboard-nav-dropdown-toggle:after {
    content: "\f107";
    font: normal normal normal 14px / 1 FontAwesome;
    margin-left: auto;
    display: inline-block;
    width: 10px;
    height: 10px;
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

.dashboard-nav .dashboard-nav-dropdown-toggle:after {
    border-top-color: rgb(0, 0, 0);
}

.dashboard-nav-dropdown-menu {
    display: none;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.dashboard-nav-dropdown-item {
    min-height: 40px;
    padding: 8px 20px 8px 35px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    transition: ease-out 0.5s;
}

.dashboard-nav-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.dashboard .menu-toggle {
    position: relative;
    width: 42px;
    height: 42px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #443ea2;
}

.dashboard .menu-toggle:hover,
.dashboard .menu-toggle:active,
.dashboard .menu-toggle:focus {
    text-decoration: none;
    color: #875de5;
}

.menu-toggle i {
    font-size: 20px;
}

.dashboard .dashboard-toolbar {
    min-height: 84px;
    background-color: #dfdfdf;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 8px 27px;
    position: relative;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
}

.dashboard .nav-item-divider {
    height: 1px;
    margin: 1rem 0;
    overflow: hidden;
    background-color: rgba(236, 238, 239, 0.3);
}

.dashboard .mobile-version {
    display: none;
}

.dashboard nav.dashboard-nav-list a span {
    display: inline-flex;
    height: 40px;
    width: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid #1AB59C;
    border-radius: 50%;
}

.dashboard nav.dashboard-nav-list a p {
    margin: 0px;
    flex: 1;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0%;
    color: #400C39;
}

.dashboard-nav-dropdown.show .dashboard-nav-dropdown-menu a span {
    background: transparent;
}

.dashboard-nav-dropdown.show .dashboard-nav-dropdown-menu a span img {
    filter: inherit;
}

.dashboard-nav-dropdown.show .dashboard-nav-dropdown-menu a {
    gap: 10px;
}

.dashboard .card-body {
    padding: 50px 20px;
    background: #fff;
    box-shadow: 6px 0px 11px 0px #f9ebf7;
    border-radius: 5px;
}

.dashboard .card-body h1 {
    font-weight: 800;
    font-size: 35px;
    line-height: 1.3;
    color: #272525;
    font-family: "Coiny", system-ui;
}

/* account card */
.account-card h4 {
    font-family: Poppins;
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
}

.card-body label {
    font-weight: 500;
    font-size: 16px;
    line-height: 22.45px;
}

.acc-form-field form {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.acc-form-field form .form-field {
    flex: 1;
}

.acc-form-field form .form-field .form-control {
    height: 42px;
    background-color: #FFF4FE;
    border: 1px solid #AD55A1;
    font-size: 13px;
    font-weight: 400;
}

.acc-form-field form .form-field .form-control::placeholder {
    color: #A79AA5;
}

.acc-form-field form button.btn.btn-primary {
    margin: 0px;
    height: 42px;
    background: #1AB59C;
    font-weight: 800;
    font-size: 15px;
    line-height: 25.5px;
    border-radius: 10px;
    padding-left: 25px;
    padding-right: 25px;
}

.account-card-detail {
    display: flex;
    gap: 20px;
    margin-top: 10px;
    align-items: center;
}

.account-card-detail form {
    display: flex;
    gap: 25px;
    width: 100%;
}

.account-card-detail .acc-form-field {
    flex: 1;
}

.account-card-detail .acc-form-field .form-field {
    flex-grow: 1;
}

.account-card-detail .acc-form-field button[type="submit"] {
    margin-top: 1.9rem;
    height: 42px;
    border-radius: 10px;
    background: #1AB59C;
    border: 1px solid #1AB59C;
}

.account-card-detail .acc-form-field .form-field input,
.account-card-detail .acc-form-field .form-field select {
    border: 1px solid #1AB59C;
    background: #f8f4f2;
    height: 42px;
}

.account-items .account-card {
    border: 1px solid #02a09a;
    border-radius: 20px;
    padding: 25px 40px;
    margin-top: 20px;
}

/* card profile */
.avatar-upload {
    position: relative;
    max-width: 130px;
    min-width: 120px;
}

.avatar-upload .avatar-edit {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: -13px;
    transform: translate(-50%, 0%);
}

.avatar-upload .avatar-edit input {
    display: none;
}

.avatar-upload .avatar-edit input+label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 0;
    border-radius: 100%;
    background: #f8f4f2;
    border: 4px solid #fff;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    font-weight: normal;
    transition: all 0.2sease-in-out;
}

.avatar-upload .avatar-edit input+label:hover {
    background: #f1f1f1;
    border-color: #d6d6d6;
}

.avatar-upload .avatar-preview {
    background-size: contain;
    background-repeat: no-repeat;
    width: 118px;
    height: 118px;
    position: relative;
    border-radius: 10px;
    border: 6px solid #F1F1F1;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}

.avatar-upload .avatar-preview>div {
    width: 100%;
    height: 100%;
    border-radius: 0%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.add-child-button-box {
    text-align: center;
    margin-top: 50px;
}

.add-child-button-box .btn {
    font-weight: 800;
    font-size: 18px;
    line-height: 27px;
    border: 1px solid #1AB59C !important;
    padding: 12px 16px;
    border-radius: 12px;
    box-shadow: 1px 3px 11px 0px #eaeaea;
}

.add-child-button-box .btn i {
    background: #02a09a;
    font-size: 18px;
    color: #fff;
    padding: 5px;
    border-radius: 50%;
    height: 28px;
    width: 28px;
    margin-right: 10px;
}

/* profile view */
.profile-viex-box h3 {
    margin-top: 4px;
    font-family: Poppins;
    font-weight: 600;
    font-size: 17px;
    line-height: 25.5px;
}

.account-profile-view .acc-form-field {
    display: flex;
    gap: 10px;
    align-items: center;
}

.account-profile-view .acc-form-field .profile-viex-box {
    /* flex: 1; */
    flex-grow: 1;
}

.account-profile-view .acc-form-field .profile-viex-box:first-child,
.account-profile-view .acc-form-field .profile-viex-box:nth-child(2) {
    border-right: 1px solid #D7C4D5;
}

.account-profile-view .acc-form-field .profile-viex-box:nth-child(2),
.account-profile-view .acc-form-field .profile-viex-box:nth-child(3) {
    padding: 0px 50px;
}

.account-profile-view .acc-form-field a {
    margin-top: 1.6rem;
    /* height: 42px; */
    /* border-radius: 10px; */
    /* width: 11%; */
}

.account-card-detail .acc-form-field button[type="submit"]+button[type="button"] {
    background: #f5f5f5;
    border-radius: 10px;
    text-transform: uppercase;
    color: #000;
    padding: 0.75rem 0.75rem;
    font-size: 1rem;
    height: 42px;
    border: 0;
    margin-top: 27px;
}

.profile-view-edit-box a {
    display: inline-flex;
    position: relative;
    gap: 20px;
    background: #A0968C24;
    padding: 8px 12px;
    align-items: center;
    color: #402F3E;
    font-weight: 600;
    font-size: 13px;
    border-radius: 64px;
}

.profile-view-edit-box a span {
    position: relative;
    background: #fff;
    padding: 6px;
    border-radius: 50%;
    margin: -13px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
}

.account-child-history .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.account-child-history .hitory-timer {
    display: flex;
    align-items: center;
    gap: 9px;
}

.account-child-history .hitory-timer img {
    width: 46px;
    background: #02A09A;
    border-radius: 50%;
    padding: 8px;
}

.account-child-history .hitory-timer p {
    margin-top: 0px;
    font-family: Poppins;
    font-weight: 500;
    font-size: 16px;
    line-height: 22.45px;
    color: #402F3E;
}

.account-child-history .hitory-timer p span {
    color: #02A09A;
}

.account-child-history .hitory-timer h6 {
    font-weight: 700;
    font-size: 19px;
    line-height: 28.5px;
    color: #353135;
}

/* child table history */
.child-history-table table tr,
.child-history-table table td,
.child-history-table table th {
    border: 1px solid #D7D2CE;
    vertical-align: middle;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    color: #372034;
    padding: 20px 10px;
}

.child-history-table thead tr th {
    background: #02A09A;
    font-family: Poppins;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: #fff;
}

/* start rating */
.rate {
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
}

.rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
}

.rating>input {
    display: none;
}

.rating>label {
    position: relative;
    width: 1em;
    font-size: 30px;
    font-weight: 300;
    color: #ffd600;
    cursor: pointer;
}

.rating>label::before {
    content: "\2605";
    position: absolute;
    opacity: 0;
}

.rating>label:hover:before,
.rating>label:hover~label:before {
    opacity: 1 !important;
}

.rating>input:checked~label:before {
    opacity: 1;
}

.rating:hover>input:checked~label:before {
    opacity: 0.4;
}

.buttons {
    top: 36px;
    position: relative;
}

.rating-submit {
    border-radius: 8px;
    color: #fff;
    height: auto;
}

.rating-submit:hover {
    color: #fff;
}

.child-history-table .rating {
    background: #fff;
    padding: 6px 10px;
    border-radius: 60px;
    border: 1px solid #DBCFBC;
}

.child-history-table .rating i {
    color: rgba(255, 169, 41, 1);
}

.accound-child-table-pager p {
    font-weight: 500;
    font-size: 13px;
    line-height: 19.5px;
    color: #372034;
}

.accound-child-table-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

.accound-child-table-pager ul.pagination-part a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #D3C2C2;
    padding: 13px 20px;
    border-radius: 6px !important;
    font-weight: 600;
    font-size: 13px;
    line-height: 19.5px;
    color: #000000;
}

.accound-child-table-pager ul.pagination-part {
    display: flex;
    align-items: center;
    gap: 20px;
}

.accound-child-table-pager ul.pagination-part a.active {
    background-color: #1AB59C;
    color: #fff;
}

.child-history-table td sub {
    font-weight: 500;
    font-size: 13px;
    line-height: 28.5px;
}

.child-history-table td small {
    font-weight: 700;
    font-size: 19px;
    line-height: 28.5px;
}

/* timer set screen */
.setting-time-limit .time-set-outer {
    max-width: 564px;
    margin: auto;
    padding: 0px 0px 80px;
}

.setting-time-limit select.form-select.select-child {
    max-width: 434px;
    margin: auto;
}

.setting-time-limit select.form-select.select-child {
    max-width: 434px;
    margin: auto;
    height: 47px;
    border: 1px solid #F0D6EB;
    font-family: Poppins;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #696767;
    padding-left: 20px;
    text-transform: capitalize;
    box-shadow: 1px 3px 11px 0px #eaeaea;
}



/* time hours field only */
.hours-minutes-box .time-selector {
    width: 200px;
    margin: 0px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.hours-minutes-box label {
    font-size: 16px;
    color: #333;
    margin-bottom: 8px;
    display: block;
}

.hours-minutes-box .time-input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    color: #9D9C9D;
    border: 2px solid #02a09a;
    border-radius: 5px;
    margin-bottom: 20px;
    box-sizing: border-box;
    -webkit-appearance: none;
    height: 50px;
    box-shadow: 1px 3px 11px 0px #eaeaea;
    transition: border-color 0.3s;
}

.hours-minutes-box .time-input:focus {
    border-color: #F0D6EB;
    outline: none;
}

.hours-minutes-box {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
}

.hours-minutes-box .box-group {
    flex: 1;
    position: relative;
}

.hours-minutes-box .box-group-circle span {
    height: 11px;
    width: 11px;
    background: #AD89A6;
    border-radius: 50%;
    display: block;
    margin: 13px 0px;
}

.hours-minutes-box .box-group span img {
    width: 29px;
}

.hours-minutes-box .box-group span {
    position: absolute;
    z-index: 9999;
    top: 40px;
    right: 12px;
}

.time-selector-button input[type="submit"] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 27px;
    border-radius: 38px !important;
    font-weight: 600;
    font-size: 13px;
    line-height: 19.5px;
    background: #1AB59C;
    color: #fff;
    margin: 0;
    transition: all 0.4s ease-in-out;
}

.time-selector-button input[type="submit"]:hover {
    background-color: #14937e;
    color: #fff;
}

.time-selector-button {
    text-align: center;
    margin-top: 30px;
}

.time-set-separate {
    margin: 30px 0px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.time-set-separate h5 {
    display: inline-flex;
    background: #02a09a;
    color: #fff;
    font-family: Poppins;
    font-weight: 500;
    font-size: 18px;
    line-height: 20px;
    padding: 8px 30px;
    text-transform: capitalize;
    border-radius: 50px;
    margin: 0px;
}

.time-set-separate span {
    display: inline-flex;
    flex: 1;
    background: #02a09a;
    height: 2px;
}


select option {
    padding: 8px;
    background-color: white;
    color: black;
}

.hours-minutes-box .time-input::-webkit-scrollbar {
    width: 8px;
}

.hours-minutes-box .time-input::-webkit-scrollbar-thumb {
    background-color: #02a09a;
    border-radius: 10px;
}

.hours-minutes-box .time-input::-webkit-scrollbar-track {
    background-color: #f0f0f0;
}

.hours-minutes-box .time-input:focus {
    outline: none;
    border-color: #02a09a;
}

.hours-minutes-box .time-input option:hover {
    background-color: #02a09a;
    color: white;
}

.hours-minutes-box .time-input option:checked {
    background-color: #02a09a;
    color: white;
}

.oneline {
    max-width: 137px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* css added on 02-04-2025 */

.stopwatch-container {
    position: relative;
    width: 162px;
    /* height: 162px; */
}

.clock-bg {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.progress-svg {
    width: 71%;
    height: 70%;
    position: absolute;
    top: 34px;
    left: 24px;
    z-index: 2;
}

.progress-bg {
    fill: transparent;
    /* Full purple background */
}

.progress-fill {
    fill: #02A09A;
    /* Will be clipped dynamically */
    transition: clip-path 0.5s ease-in-out;
}

/* .time-display {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: bold;
  color: #333;
  z-index: 3;
} */

.time-display {
    background: white;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    width: 292px;
    height: 66px;
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    justify-content: center;
    border-radius: 46px;
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 20px;
}

.time-display span {
    font-size: 34px;
    font-weight: bold;
    color: #02A09A;
    margin-right: 4px;
}

.time-display span+sub {
    font-size: 10px;
    margin-bottom: -9px;
}

/* css added on 17-04-2025 */

.custom_showpost_class {display: flex; flex-wrap: wrap; gap: 24px;}
.custom_showpost_class .item {width: calc((100% - 48px) / 3); margin-bottom: 0px;}
.custom_showpost_class .item .explore-image-box{width: 100% !important;}
.custom_showpost_class .item .story-cat{border-bottom: 0; padding: 3px 5px 0;}
.custom_showpost_class .item .childrating{border-bottom: 0; padding: 3px 5px 0;}


.estory_parent {display: flex; flex-wrap: wrap; gap: 24px;}
.estory_parent .story-card {width: calc((100% - 120px) / 5);}
.estory_parent .story-card .story-thumb img{height: auto;}
.estory_parent .story-card .story-info{padding: 0 10px 10px;}

#rating-message.alert {
    background: #f23f3f;
    width: max-content;
    position: absolute;
    top: -91px;
    right: 0;
    color: #fff;
    font-size: 18px;
}



/* css added on 06-05-2025 */

.slide2-section,
.slide4-section {
    display: block;
    /* background-color: #009CFF; */
    background-color: #fff;
    padding: 68px 0;
}

.slide2-section .slide2-container,
.slide4-section .slide4-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.slide2-section .about-texts,
.slide4-section .about-texts {
    flex: 1;
    font-size: 22px;
    line-height: 33px;
    margin-left: 40px;
}

.slide2-section .about-texts ul,
.slide4-section .about-texts ul {
    margin-top: 20px;
    list-style: disc;
    list-style-position: inside;
    color: #000;
}

.slide2-section .about-texts:not(:last-child),
.slide4-section .about-texts:not(:last-child) {
    padding: 0 40px 0 0;
}

.slide2-section h2,
.slide4-section h2 {
    display: block;
    color: #000;
    font-family: "Coiny", system-ui;
    font-size: 34px;
    font-weight: 900;
    line-height: 45px;
    margin: 0 0 30px;
}

.slide2-section p,
.slide4-section p {
    display: block;
    color: #000;
    font-size: 22px;
    font-weight: 400;
    line-height: 33px;
    margin: 20px 0 0 0;
}

.slide2-section p sup,
.slide4-section p sup,
.slide5-section p sup {
    font-size: 12px;
}

.slide2-section .about-image,
.slide4-section .about-image {
    display: block;
    float: left;
    width: 538px;
    max-width: 39%;
}

.slide2-section .about-image img,
.slide4-section .about-image img {
    display: block;
    width: 100%;
    height: auto;
}

.slide3-section {
    background-color: #febf6a;
    display: block;
    padding: 68px 0;
}

.slide3-section .slide3-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.slide3-section .about-texts {
    flex: 1;
    font-size: 22px;
    line-height: 33px;
    /* margin-left:40px; */
}

.slide3-section .about-texts:not(:last-child) {
    padding: 0 40px 0 0;
}

.slide3-section h2 {
    display: block;
    color: #000;
    font-family: "Coiny", system-ui;
    font-size: 34px;
    font-weight: 900;
    line-height: 45px;
    margin: 0 0 30px;
}

.slide3-section p {
    display: block;
    color: #000;
    font-size: 22px;
    font-weight: 400;
    line-height: 33px;
    margin: 20px 0 0 0;
}

.slide3-section p sup {
    font-size: 12px;
}

.slide3-section .about-image {
    display: block;
    float: left;
    width: 538px;
    max-width: 39%;
}

.slide3-section .about-image img {
    display: block;
    width: 100%;
    height: auto;
}

.slide5-section {
    background-color: #b5ecf5;
    display: block;
    padding: 68px 0;
}

.slide5-section .slide5-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.slide5-section .about-texts {
    flex: 1;
    font-size: 22px;
    line-height: 33px;
    /* margin-left:40px; */
}

.slide5-section .about-texts:not(:last-child) {
    padding: 0 40px 0 0;
}

.slide5-section h2 {
    display: block;
    color: #000;
    font-family: "Coiny", system-ui;
    font-size: 34px;
    font-weight: 900;
    line-height: 60px;
    margin: 0 0 30px;
}

.slide5-section p {
    display: block;
    color: #000;
    font-size: 22px;
    font-weight: 400;
    line-height: 33px;
    margin: 20px 0 0 0;
}

.slide5-section .about-image {
    display: block;
    float: left;
    width: 538px;
    max-width: 39%;
}

.slide5-section .about-image img {
    display: block;
    width: 100%;
    height: auto;
}

.about-section .about-texts p {
    display: block;
    color: #000;
    font-size: 22px;
    font-weight: 400;
    line-height: 33px;
    margin: 20px 0 0 0;
}

.about-section .about-texts ul {
    margin-top: 20px;
    list-style: disc;
    list-style-position: inside;
    color: #000;
}

.about-section.chnagecolor h2 {
    color: #02A09A;
}

.email {
    margin-top: 20px;
}

.email i {
    color: #02a09a;
    margin-right: 12px;
}

.email a {
    color: #000;
}

.menu-nav {
    margin-right: 25px;
}

.pagination .page-numbers {
    background: #8bc1bf;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 13px;
    transition: background 0.3s ease-in-out;
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
    background: #02A09A;
}

.pagination .next.page-numbers {
    font-size: 9px;
}

.estory_parent .item {
    width: 20%;
}

.df-floating .df-ui-controls {
    left: 94% !important;
    border-radius: 4px !important;
}

p.hide {
    text-align: center;
    font-size: 17px;
    font-weight: 500;
    margin: 30px 0px 30px;
}

span#max-time {
    margin-left: 4px;
    font-size: 18px;
    color: #1ab59c;
    text-shadow: 1px 1px 1px #1ab59c;
}

header nav.navbar.navbar-expand-lg .profile-dropdown a {
    padding: 11px;
}

.submit-btn-sec {
    gap: 10px;
    align-items: center;
}

.submit-btn-sec .submit-btn-div {
    width: 100%;
}

.submit-btn-sec .submit-btn-div input.submit-btn {
    width: 100%;
    padding: 20px;
    font-size: 15px;
    line-height: 100%;
    border: 0;
    outline: none;

    border-radius: 136px;
    background: #1AB59C;
    color: #FFF;
    font-family: Poppins;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
}
.submit-btn-sec .submit-btn-div input.submit-btn:hover {
    background: #14937e;
}

.submit-btn-sec .submit-btn-info {
    background-color: #3ab3911e;
    padding: 14px 28px;
    gap: 10px;
    border-radius: 24px;
    width: 180px;
    justify-content: center;
    align-items: center;
}

.submit-btn-sec .submit-btn-info img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.quize-review {
    position: relative;
}

.quize-review img.bg-star-img-1 {
    position: absolute;
    right: 27%;
    top: -80px;
}

.quize-review img.bg-star-img-2 {
    position: absolute;
    right: 0;
    bottom: 10%;
}

.whould-you-rather-activity img.bg-star-img-1 {
    position: absolute;
    right: 10%;
    top: 0;
}

.whould-you-rather-activity img.bg-star-img-3 {
    position: absolute;
    left: -8%;
    bottom: -17.5%;
}

.rathr-activity-outer-div {
    position: relative;
}

.rathr-activity-outer-div .slider-nav{
    width: 100%; position: absolute; top: 50%; margin-top: -25px;
    display: flex; justify-content: space-between;    
}
.rathr-activity-outer-div .slider-nav .custom-prev,
.rathr-activity-outer-div .slider-nav .custom-next{
    border: 0px; width: auto; height: auto; 
    padding: 0; background: transparent;
}

/* .rathr-activity-outer-div img.bg-star-img-3 {
    position: absolute;
    left: -18%;
    bottom: -41%;
} */

.great-staff-sec {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
}

.great-staff-sec::after {
    content: " ";
    background-color: #f5f5f5;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
}

.great-staff-sec .img-bg-1 {
    width: 101px;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
}

.great-staff-sec .img-bg-2 {
    width: 101px;
    height: 100%;
    position: fixed;
    right: 0;
    top: 0;
}

.great-staff-sec .great-staff-wrapper h1 {
    font-size: 88px;
    line-height: 100%;
    font-weight: 600;
    color: #0C0C0C;
}

.great-staff-sec .great-staff-wrapper h1 span {
    color: #3AB390;
}

.great-staff-sec .great-staff-wrapper h1 span.img {
    position: relative;
    padding-left: 100px;
}

.great-staff-sec .great-staff-wrapper h1 span.img::before {
    content: " ";
    width: 88px;
    height: 88px;
    background-image: url(../images/green-stone-big.png);
    background-size: contain;
    position: absolute;
    left: 0px;
    top: 14px;
    background-repeat: no-repeat;
    background-position: center center;
}

.great-staff-sec .great-staff-wrapper .collectgemsbuttons {
    margin-top: 228px;
    margin-left: 0;
    position: relative;
    z-index: 1;
}

.great-staff-sec .great-staff-wrapper .collectgemsbuttons .bye-btn {
    background: #fff;
    color: #3AB390;
    border: 1px solid #3AB390;
    font-size: 14px;
    font-weight: 400;
    text-transform: initial;
    height: 55px;
    transition: 0.5s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
    width: 155px;
}

.great-staff-sec .great-staff-wrapper .collectgemsbuttons .going-btn {
    background: #1AB59C;
    color: white;
    width: 155px;
    font-size: 14px;
    font-weight: 400;
    border: 1px solid #1AB59C;
    text-transform: initial;
    height: 55px;
    transition: 0.5s ease-in-out;
    margin: 0px;
    border-radius: 24px;
}

.great-staff-sec .great-staff-price {
    position: relative;
    width: fit-content;
    position: absolute;
    right: 10%;
    bottom: 0;
}

.great-staff-sec .great-staff-price img.leady-img {
    width: 555px;
    height: 555px;
    object-fit: contain;
}

.great-staff-sec .great-staff-price-content {
    background-color: #3AB390;
    padding: 17px 24px;
    border-radius: 24px;
    width: fit-content;
    text-align: center;
    border: 3px solid white;
    transform: rotate(4deg);
    position: absolute;
    bottom: 18%;
}

.great-staff-sec .great-staff-price-content h5 {
    font-size: 20px;
    line-height: 140%;
    font-weight: 400;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.great-staff-sec .great-staff-price-content h5 img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.great-staff-sec .great-staff-price-content h6 {
    font-size: 20px;
    line-height: 140%;
    font-weight: 400;
    color: black;
    background-color: white;
    width: fit-content;
    padding: 11px 20px;
    border-radius: 50px;
    margin: 0 auto;
}

.great-staff-sec .great-staff-price-content h6 span {
    color: #3AB390;
}

.great-staff-sec img.img-bg-3 {
    position: absolute;
    left: -63px;
    bottom: -89px;
    z-index: 0;
    transform: rotate(53deg);
}

.great-staff-sec img.img-bg-4 {
    position: absolute;
    top: 0;
    right: -116px;
}

.navbar-brand{padding: 0;}
.navbar-brand img.lazyloaded {
    width: 190px !important;
    height: auto !important;
    border-radius: 0 !important;
}

.turn-screentime-sec{padding-top: 50px !important;}


.banner-sec.homepage-banner{margin-top:0px;}


.search-box{position: relative;}
.search-box #globalSearch{
    background: #ffffff;  border: 1px solid #e7e7e7; outline: none;
    padding: 8px 40px 8px 10px; border-radius: 30px;
}
.search-box #searchIcon{
    position: absolute; right: 2px; top: 5px;
    border: 0; outline: none; background: transparent;
}
.search-box .search-results{position: absolute; width: 100%; top: 100%; left: 0;}
.search-box .search-results ul{
    background: #fff; padding: 10px;
    box-shadow: 0px 5px 5px 1px #ebebeb;
}
.search-box .search-results ul li{padding: 5px; font-size: 14px; cursor: pointer;}
.search-box .search-results ul li:hover{color: #3ab390;}

.windows-time-selector{display: flex; justify-content: space-between; flex-wrap: wrap; gap: 15px;}
.windows-time-selector h6{width: 100%;}
.windows-time-selector .box-group{flex: 1;}
.windows-time-selector .box-group input[type="time"] {
    width: 100%; padding: 10px; font-size: 16px;
    color: #4F5150; border: 2px solid #02a09a;
    border-radius: 5px; margin-bottom: 20px; height: 50px;
    box-sizing: border-box; -webkit-appearance: none;    
    box-shadow: 1px 3px 11px 0px #eaeaea; transition: border-color 0.3s;
}
.windows-time-selector .box-group input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(57%) sepia(66%) saturate(5382%) hue-rotate(135deg) brightness(97%) contrast(102%);
    opacity: 1;
}

.otp-form-wrap{
    max-width: 310px; margin: 40px auto 0;
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
}
.otp-form-wrap label{margin-bottom: 14px; line-height: 1.4;}

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


.expert-rating,
.user-rating,
.expert-rating{
    font-size: 20px;
}

#noScreenModal .modal-body h3{margin-bottom: 20px;}
#noScreenModal .modal-body p{margin-bottom: 30px;}
#noScreenModal .modal-body button{margin: auto;}

/* #timeUpModal{z-index: 99991;}
#otpModal{z-index: 99992;}
#extensionOptionsModal{z-index: 99992;} */


#bigvideoModalToggle #finshButton{bottom: -95px; margin: 0;}
#bigvideoModalToggle #bigvideoClose{margin-top: 50px;}

.container.full-width{max-width: 95%;}

.inner-page-banner{
    background: #fff;
}

.inner-page-banner.inner-page-banner h1 {
    color: #000 !important; font-size: 40px;
    font-family: "Poppins", sans-serif; font-weight: 500;
}

.text-page{padding: 0 0 50px;}
.text-page p{line-height: 25px; margin: 16px 0;}
.text-page ul{padding: 0; margin: 0 0 0 10px;}
.text-page ul li{padding: 0 0 0 20px; margin: 10px 0; position: relative;}
.text-page ul li:before {
    content: ''; position: absolute; left: 0px; top: 5px;
    width: 6px; height: 6px; border-radius: 100%;    
    background-color: #000; pointer-events: none;
}
.text-page .wp-block-separator{border-top: 1px solid;}


.show_post.owl-carousel .owl-item .video-card .video-info{margin-top: 5px;}
.show_post.owl-carousel .owl-item .video-card .video-info .video-title,
.show_post.owl-carousel .owl-item .video-card .video-info .video-title a{color: #03a09a;}
.show_post.owl-carousel .owl-item .video-card .video-thumbnail{
    position: relative; padding-bottom: 56%; overflow: hidden;
    aspect-ratio: 16 / 9; height: 0; margin-bottom: 5px;
}
.show_post.owl-carousel .owl-item .video-card .video-thumbnail > img {
    position: absolute; left: 0; right: 0; top: 0; bottom: 0;
    width: 100%; height: 100%; object-fit: cover;
}

.show_post.owl-carousel .owl-item .explore-image-box{width: 100%;}
.show_post.owl-carousel .owl-item .explore-image-box img{height: 280px;}


.choose_istories{display: flex; flex-wrap: wrap; gap: 24px;}
.choose_istories .istories-item{width: calc((100% - 120px) / 5);}
.choose_istories .istories-item .story-card{padding: 5px; border-radius: 5px; border: 1px solid #EED7D7;}

.font-22{
    font-size: 22px;
}




.rating-stars,
.stars .star{font-size: 20px;}
.choose-game .childrating{border-bottom: 0; padding: 3px 5px 0;}
.choose-game.owl-carousel .owl-item .explore-image-box img{height: 100%;}
.choose-game.owl-carousel .thumb-img{
    position: relative; padding-bottom: 100%; width: 100%;;
    overflow: hidden; aspect-ratio: 16 / 9; height: 0; margin-bottom: 5px;
}
.choose-game.owl-carousel .thumb-img img {
    position: absolute; left: 0; right: 0; top: 0; bottom: 0;
    width: 100%; height: 100%; object-fit: cover;
}


#story-rating-form .submit-btn-sec .submit-btn-div input.submit-btn{width: 75%;}




@media (min-width: 1250px) and (max-width: 1800px) {
    
    #story-rating-form h4, #storyslidermodalinner1 h4, #storyslidermodalinner2 h4 {
        font-size: 70px;
        line-height: 70px;
    }
    #ratings label {
        font-size: 60px;
        width: 70px;
        height: 70px;
        line-height: 60px;
    }
    .great-staff-sec .great-staff-wrapper .collectgemsbuttons {
        margin-top: 130px;
    }
    /* .great-staff-sec {
        position: relative;
        padding: 80px 0;
        overflow: hidden;
    }
    .great-staff-sec .great-staff-price {
        bottom: -32px;
    } */
    .great-staff-sec .great-staff-wrapper h1 {
        font-size: 75px;
        line-height: 75px;
    }
    .great-staff-sec {
        padding: 80px 0;
    }
    .rathr-activity-outer .activity-slider-box .rather-item.activity-card {
        height: 340px;
    }
    .rather-item .next-btn {
        height: 340px;
    }
    .rather-acivity-header h1 {
        font-size: 60px;
        line-height: 60px;
    }
}

@media (min-width: 990px) and (max-width: 1249px) {
    #story-rating-form {
        padding: 20px 0 0px 0;
    }
    #story-rating-form h4, #storyslidermodalinner1 h4, #storyslidermodalinner2 h4 {
        font-size: 50px;
        line-height: 60px;
    }
    #ratings label {
        font-size: 50px !important;
        width: 60px;
        height: 60px;
        line-height: 50px;
    }
    textarea#story_message {
        height: 130px;
    }
    #story-rating-form label {
        font-size: 24px;
        margin-bottom: 10px !important;
    }
    .great-staff-sec {
        padding: 40px 0;
    }
    .great-staff-sec .great-staff-wrapper h1 {
        font-size: 55px;
        line-height: 55px;
    }
    .great-staff-sec .great-staff-price img.leady-img {
        width: 420px;
        height: 420px;
    }
    .great-staff-wrapper {
        width: 90%;
        margin: 0 auto;
    }
    .great-staff-sec .great-staff-wrapper h1 span.img::before {
        width: 55px;
        height: 55px;
    }
    .great-staff-sec .great-staff-wrapper h1 span.img {
        padding-left: 60px;
    }
    .great-staff-sec .great-staff-wrapper .collectgemsbuttons {
        margin-top: 150px;
    }
    .rathr-activity-outer .activity-slider-box .rather-item.activity-card {
        height: 280px;
    }
    .rather-item .next-btn {
        height: 280px;
    }
    .rather-acivity-header h1 {
        font-size: 44px;
        line-height: 44px;
    }
}

@media only screen and (max-width: 1200px) {
    .great-staff-sec .great-staff-wrapper h1 {
        font-size: 60px;
    }
    .great-staff-sec .great-staff-price img.leady-img {
        width: 525px;
        height: 525px;
    }
    .great-staff-sec .great-staff-price {
        right: 6%;
    }

    .choose_istories .istories-item{
        width: calc((100% - 72px) / 4);
    }

    .estory_parent .story-card {
        width: calc((100% - 72px) / 4);
    }
}

@media only screen and (max-width: 1024px) {
    .choose_istories .istories-item{
        width: calc((100% - 48px) / 3);
    }

    .estory_parent .story-card {
        width: calc((100% - 48px) / 3);
    }

    .great-staff-wrapper {
        width: 80%;
        margin: auto;
    }
    .great-staff-sec .great-staff-wrapper .collectgemsbuttons {
        margin-top: 78px;
    }
    .great-staff-sec .great-staff-price {
        right: 2%;
        bottom: -9px;
    }
    .great-staff-sec .great-staff-price img.leady-img {
        width: 330px;
        height: 380px;
    }
    .great-staff-sec .great-staff-price-content {
        bottom: 15%;
        left: -62px;
    }
    .great-staff-sec .great-staff-wrapper h1 span.img::before {
        width: 60px;
        height: 60px;
    }
    .great-staff-sec .great-staff-wrapper h1 span.img {
        padding-left: 75px;
    }
    .great-staff-sec .great-staff-wrapper h1 {
        font-size: 44px;
    }
    #story-rating-form h4, #storyslidermodalinner1 h4, #storyslidermodalinner2 h4 {
        color: #0C0C0C;
        font-size: 60px;
    }
    #ratings label {
        width: 60px;
        height: 60px;
        line-height: 60px;
    }
    #ratings label {
        font-size: 50px;
    }
    .quize-review img.bg-star-img-1 {
        right: 5% !important;
        top: -53px !important;
        width: 240px !important;
    }
    .great-staff-sec .img-bg-1 {
        width: 65px;
    }
    .great-staff-sec .img-bg-2 {
        width: 65px;
    }
    dotlottie-player.bee-icon {
        width: 100% !important;
        height: 100% !important;
    }
    .rather-item .next-btn {
        height: 350px;
    }
    .rathr-activity-outer .activity-slider-box .rather-item.activity-card {
        height: 350px;
    }
    .rathr-activity-outer .activity-slider-box {
        width: 50%;
    }
    .rathr-activity-outer .activity-card.grey-shape {
        width: 50%;
    }
    .whould-you-rather-activity img.bg-star-img-1 {
        width: 200px;
        top: -19px;
    }
    .whould-you-rather-activity img.bg-star-img-3 {
        width: 200px;
    }
    .great-staff-sec img.img-bg-4 {
        right: -47px;
        width: 150px;
    }
    .great-staff-sec img.img-bg-3 {
        left: 0;
        bottom: 0;
        width: 150px;
    }
}

@media only screen and (max-width: 880px) {
    .great-staff-sec .great-staff-price {
        position: relative;
    }
    .great-staff-sec .great-staff-price img.leady-img {
        width: 100%;
        height: 100%;
    }
    .great-staff-sec .great-staff-price-content {
        bottom: 15%;
        left: 0;
    }
    .great-staff-sec {
        position: relative;
        padding: 40px 0;
        overflow: hidden;
    }
    .rating-from {
        width: 100%;
    }
    .rating-from .mt-4.mb-3.ms-5 {
        margin-left: 0 !important;
    }
    .mt-2.mb-2.ms-5.margin-0 {
        margin-left: 0px !important;
    }
}

@media only screen and (max-width: 770px) {
    .quize-review.div-001 img.bg-star-img-1 {
        top: -160px !important;
    }
    .audiobook-bg {
        padding: 40px 0 20px !important;
    }
    .rather-item .next-btn {
        height: 300px;
    }
    .rathr-activity-outer .activity-slider-box .rather-item.activity-card {
        height: 300px;
    }
    .whould-you-rather-activity img.bg-star-img-1 {
        width: 154px;
    }
    .whould-you-rather-activity img.bg-star-img-3 {
        width: 150px;
    }
    

    .estory_parent .story-card {
        width: calc((100% - 24px) / 2);
    }
}

@media only screen and (max-width: 550px) {
    .great-staff-sec .great-staff-price-content {
        position: unset;
        width: 100%;
        transform: rotate(0deg);
    }
    .great-staff-wrapper {
        width: 60%;
        margin: auto;
    }
    .great-staff-sec .great-staff-wrapper h1 {
        font-size: 30px;
        line-height: 50px;
    }
    .great-staff-sec .great-staff-wrapper h1 span.img::before {
        width: 33px;
        height: 33px;
        top: 3px;
    }
    .great-staff-sec .great-staff-wrapper h1 span.img {
        padding-left: 50px;
    }
    .great-staff-sec .great-staff-wrapper .collectgemsbuttons {
        margin-top: 20px;
    }
    .great-staff-wrapper {
        width: 75%;
    }
    .great-staff-sec .img-bg-1 {
        width: 40px;
    }
    .great-staff-sec .img-bg-2 {
        width: 40px;
    }
    .submit-btn-sec .submit-btn-info {
        padding: 14px 10px;
    }
    #story-rating-form h4, #storyslidermodalinner1 h4, #storyslidermodalinner2 h4 {
        font-size: 44px;
    }
    #ratings label {
        font-size: 40px;
    }
    #ratings label {
        width: 40px;
        height: 40px;
        line-height: 40px;
    }
    .rathr-activity-outer .activity-slider-box .rather-item.activity-card p.heading-p {
        font-size: 13px;
    }
    .rather-item .next-btn h4.next-btn-h {
        font-size: 13px;
    }

    .estory_parent .story-card {
        width: calc((100% - 0px) / 1);
    }
    
}

@media only screen and (max-width: 480px) {
    .rather-item .next-btn {
        height: 250px;
    }
    .rathr-activity-outer .activity-slider-box .rather-item.activity-card {
        height: 250px;
    }
    .rather-item .next-btn h4.next-btn-h {
        font-size: 10px;
    }
    .rathr-activity-outer .activity-slider-box .rather-item.activity-card p.heading-p {
        font-size: 10px;
    }
    .whould-you-rather-activity img.bg-star-img-3 {
        left: -17%;
    }
}