/* {-------------- Fonts -----------------------------------------------------------------------------------------------}} */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


@font-face {
    font-family: 'MikadoRegular';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/mikado/MikadoRegular.woff') format('woff');
}


@font-face {
    font-family: 'MikadoRegularItalic';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/mikado/MikadoBlackItalic.woff') format('woff');
}


@font-face {
    font-family: 'MikadoLight';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/mikado/MikadoLight.woff') format('woff');
}


@font-face {
    font-family: 'MikadoLightItalic';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/mikado/MikadoLightItalic.woff') format('woff');
}


@font-face {
    font-family: 'MikadoMedium';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/mikado/MikadoMedium.woff') format('woff');
}


@font-face {
    font-family: 'MikadoMediumItalic';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/mikado/MikadoMediumItalic.woff') format('woff');
}


@font-face {
    font-family: 'MikadoBold';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/mikado/MikadoBold.woff') format('woff');
}


@font-face {
    font-family: 'MikadoBoldItalic';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/mikado/MikadoBoldItalic.woff') format('woff');
}


@font-face {
    font-family: 'MikadoBlack';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/mikado/MikadoBlack.woff') format('woff');
}


@font-face {
    font-family: 'MikadoBlackItalic';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/mikado/MikadoBlackItalic.woff') format('woff');
}


@font-face {
    font-family: 'MikadoUltra';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/mikado/MikadoUltra.woff') format('woff');
}


@font-face {
    font-family: 'MikadoUltraItalic';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/mikado/MikadoUltraItalic.woff') format('woff');
}

.mikado-regular {
    font-family: "MikadoRegular", sans-serif;
}

.mikado-light {
    font-family: "MikadoLight", sans-serif;
}

.mikado-bold {
    font-family: "MikadoBold", sans-serif;
}

.mikado-medium {
    font-family: "MikadoMedium", sans-serif;
}

.chakra-petch-light {
    font-family: "Chakra Petch", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.chakra-petch-regular {
    font-family: "Chakra Petch", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.chakra-petch-medium {
    font-family: "Chakra Petch", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.chakra-petch-semibold {
    font-family: "Chakra Petch", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.chakra-petch-bold {
    font-family: "Chakra Petch", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.chakra-petch-light-italic {
    font-family: "Chakra Petch", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.chakra-petch-regular-italic {
    font-family: "Chakra Petch", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.chakra-petch-medium-italic {
    font-family: "Chakra Petch", sans-serif;
    font-weight: 500;
    font-style: italic;
}

.chakra-petch-semibold-italic {
    font-family: "Chakra Petch", sans-serif;
    font-weight: 600;
    font-style: italic;
}

.chakra-petch-bold-italic {
    font-family: "Chakra Petch", sans-serif;
    font-weight: 700;
    font-style: italic;
}


/* -------------- Fonts End --------------------------------------------------------------------------------------------}} */
/* :root {
    --primary-color: #3F6146;
    --secondary-color: #DCE2CB;
    --teritary-color: #DF9A13;
    --light-primary-color: #9BC2A3;
    --secondary-light-primary-color: #EFEEE7;
    --white: #FFFFFF;
    --text-black: #040001;
    --text-secondary: #534644;
    --bg-white-light: #F9F8F0;
    --bg-green: #2B4631;
    --text-light: #69675A;
    --bg-primary-new: #F9FAFD;
    --text-primary-new: #3c4b62;
} */
:root {
    --primary-color: #2779C3;
    --secondary-color: #0a95e64f;
    --teritary-color: #2779C3;
    --light-primary-color: #2779C3;
    --secondary-light-primary-color: #EFEEE7;
    --white: #FFFFFF;
    --text-black: #040001;
    --text-secondary: #534644;
    --bg-white-light: #F9F8F0;
    --bg-green: #2B4631;
    --text-light: #69675A;
    --bg-primary-new: #F9FAFD;
    --text-primary-new: #3c4b62;
}

html {
    scroll-behavior: smooth;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    overflow-x: hidden;
}

a {
    text-decoration: none !important;
}

body {
    padding-top: 68px;
    overflow-x: hidden;
    color: var(--text-primary-new);
    background-color: var(--bg-primary-new);
}

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

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

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

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

/* Background */
.gradient-bg {
    background: linear-gradient(135deg, #4e54c8 0%, #8f94fb 100%);
    min-height: 100vh;
}

/* Card styles */
.login-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    border-radius: 1rem;
}

.text-poppins {
    font-family: 'Poppins', sans-serif;
}


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

/* Icon circles */
.icon-circle {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto 1rem;
    color: #fff;
    font-size: 1.5rem;
}

.individual-icon {
    background: linear-gradient(135deg, #3498db, #2980b9);
}

.school-icon {
    background: linear-gradient(135deg, #f39c12, #e67e22);
}

/* Buttons */
.btn-login {
    border: none;
    border-radius: 50px;
    font-weight: 600;
    padding: 0.8rem;
    width: 100%;
    color: #fff;
}

/* Background */
.gradient-bg {
    background: linear-gradient(135deg, #4e54c8 0%, #8f94fb 100%);
    min-height: 100vh;
}

/* Card styles */
.plan-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    border-radius: 1rem;
}

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

/* Icon circles */
.icon-circle {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto 1rem;
    color: #fff;
    font-size: 1.5rem;
}

.self-icon {
    background: linear-gradient(135deg, #3498db, #3498db);
}

.gift-icon {
    background: linear-gradient(135deg, #f39c12, #e67e22);
}

/* Buttons */
.btn-plan {
    border: none;
    border-radius: 50px;
    font-weight: 600;
    padding: 0.8rem;
    width: 100%;
    color: #fff;
}

.btn-self {
    background: linear-gradient(to right, #3498db, #3498db);
}

.btn-gift {
    background: linear-gradient(to right, #f39c12, #e67e22);
}

.btn-individual {
    background: linear-gradient(to right, #3498db, #2980b9);
}

.btn-school {
    background: linear-gradient(to right, #f39c12, #e67e22);
}

.btn-explore-main {
    background: linear-gradient(to right, var(--primary-color), var(--primary-color));
    border: none;
    border-radius: 50px;
    font-weight: 600;
    color: #fff;
    padding: 12px 34px;
}

button:focus {
    outline: none;
}

.btn-large-rounded-pink {
    background-color: #ffffff;
    padding: 18px 46px;
    border: 1px solid #fff;
    color: rgb(235, 12, 49);
    font-size: 1.2rem;
    border-radius: 44px;
    cursor: pointer;
}


.btn-large-rounded-pink:hover {
    background-color: var(--bg-primary);
    color: #fff;
    border: 1px solid #fff;
    transition: .5s ease-in-out;
}

.btn-tcl-rounded-pink {
    background-color: #ffffff;
    padding: 12px 24px;
    border: 1px solid #fff;
    color: rgb(235, 12, 49);
    font-size: 1rem;
    border-radius: 44px;
    cursor: pointer;
}


.btn-tcl-rounded-pink:hover {
    background-color: var(--bg-primary);
    color: #fff;
    border: 1px solid #fff;
    transition: .5s ease-in-out;
}

.btn-tcl-rounded-green {
    background-color: #28a745;
    padding: 12px 24px;
    border: 1px solid #28a745;
    color: #fff;
    font-size: 1rem;
    border-radius: 44px;
    cursor: pointer;
}


.btn-tcl-rounded-green:hover {
    background-color: #fff;
    color: #28a745;
    border: 1px solid #28a745;
    transition: .5s ease-in-out;
}

.bg-pattern-primary {
    background-color: var(--primary-color);
    /* Bootstrap primary blue */
    background-image: url('/assets/img/cuddalore/pattern.png');
    background-repeat: repeat;
    background-size: auto;
    /* adjust size for subtle effect */
    background-blend-mode: multiply;
    /* blends image with blue */
    opacity: 1;
    /* optional fine tuning */
}

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

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

.bg-secondary {
    color: var(--secondary-color-secondary);
}

.text-secondary {
    color: var(--text-secondary);
}

.text-white {
    color: var(--white);
}

.text-teritary {
    color: var(--teritary-color);
}

.text-black {
    color: var(--text-black);
}

.mini-text {
    color: var(--text-secondary);
}

.text-light-color {
    color: var(--text-light);
}

.main-section {
    /* height: 96vh; */
    display: flex;
    /* align-items: center; */
    background-color: var(--secondary-color);
}

.main-writer-section {
    /* height: 80vh; */
    display: flex;
    /* align-items: center; */
    background-color: var(--secondary-color);
}

.writer-contact-section {
    /* background-color: var(--teritary-color); */
    color: white;
}

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

.writer-bg-light {
    background-color: var(--secondary-color);
}

.second-writer-section {
    background-color: var(--bg-green);
}

.writer-contact-btn {
    background-color: var(--primary-color);
    color: var(--bg-white-light);
}

.testimonial-writer-section {
    background-color: var(--secondary-color);
}

.writer-testimony-card {
    background-color: var(--white);
}

.main-desc-content {
    /* display: flex; */
    /* flex-direction: column; */
    /* height: 56vh; */
    justify-content: space-around;
}

.boy-moon-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.thin-text {
    font-weight: 300;
}

.large-text {
    font-size: 3.6rem;
}

.bold-text {
    font-weight: 800;
}

.poppins-text {
    font-family: 'Poppins', sans-serif;
}

.main-comic-book {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.book-card-new {
    /* border-radius: 12px; */
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    background-color: #fff;
}

.book-card-new-in-stat-modal {
    border-radius: 12px;
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    background-color: #fff;
}


.book-card-new {
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.book-card-new:hover {
    transform: scale(1.1);
    z-index: 2;
    /* Ensures the hovered card appears above others */
}

/* Adjust neighboring cards */
.owl-stage {
    display: flex;
    align-items: center;
}

.owl-item {
    transition: transform 0.3s ease-out;
}

.owl-item:hover~.owl-item {
    transform: translateX(10px);
    /* Slight push for right-side cards */
}

.owl-item:has(.book-card-new:hover)~.owl-item {
    transform: translateX(-10px);
    /* Slight pull for left-side cards */
}

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

.owl-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100px;
    height: 130px;
    background-color: var(--bg-primary-new);
    color: #0A96E6;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    font-size: 24px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    /* color: #4CAF50; */
    /* Green as primary color */
    /* border: 2px solid #4CAF50; */
}

.owl-prev {
    border-top-right-radius: 100%;
    border-bottom-right-radius: 100%;
    left: -50px;
    /* Slightly out for better visibility */
}

.owl-next {
    border-top-left-radius: 100%;
    border-bottom-left-radius: 100%;
    right: -50px;
}

/* .owl-nav-btn:hover {
    background-color: #4CAF50;
    color: #fff;
} */

.rbmk-freemium-comics .owl-nav-btn,
.rbmk-continue-comics .owl-nav-btn,
.rbmk-start-reading-comics .owl-nav-btn {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}


.rbmk-freemium-comics:hover>.owl-carousel-wrapper .owl-nav-btn,
.rbmk-continue-comics:hover>.owl-carousel-wrapper .owl-nav-btn,
.rbmk-start-reading-comics:hover>.owl-carousel-wrapper .owl-nav-btn {
    opacity: 1;
    visibility: visible;
}

.book-card-new img.img-fluid {
    /* border-radius: 12px;
    border-radius: 12px; */
    width: 100%;
    /* Ensures all images take full width of the container */
    aspect-ratio: 3 / 4;
    /* Keeps all images at the same aspect ratio (adjust as needed) */
    object-fit: fill;
    /* Stretches to fit without distortion */
    /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); */
}

.book-card-new-in-stat-modal img.img-fluid {
    border-radius: 12px;
    border-radius: 12px;
    width: 100%;
    /* Ensures all images take full width of the container */
    aspect-ratio: 3 / 4;
    /* Keeps all images at the same aspect ratio (adjust as needed) */
    object-fit: cover;
    /* Stretches to fit without distortion */
    /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); */
}


.comic-book-details-title {
    font-family: 'MikadoRegular', sans-serif;
}

.thumbnail-container-locked-comics {
    position: relative;
    display: inline-block;
    /* Adjusts to image size */
    overflow: hidden;
    /* Prevents blur spill */
}

.comic-thumbnail-locked-comics {
    filter: blur(2px);
    /* Applies the blur effect */
    transition: filter 0.3s ease-in-out;
    /* Smooth transition */
    width: 100%;
}

.locked-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.lock-icon-locked-comics {
    font-size: 3rem;
    color: white;
    /* Red lock background */
    padding: 15px;
    border-radius: 50%;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

.book-card {
    width: 160px;
    margin-left: auto;
    margin-right: auto;
    /* display: flex; */
    /* justify-content: center;
    align-items: center; */
    /* height: 177px; */
    /* width: 140px; */
    border: 4px solid var(--light-primary-color);
    background-color: var(--primary-color);
    /* border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px; */
    overflow: hidden;
    position: relative;
}

.book-card-rbmk-uploaded-by {
    position: absolute;
    bottom: 0;
    right: 0;
    /* background-color: #ff46a2; */
    background-color: #033AA8;
    color: #fff;
    padding: 4px 16px;
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    /* border-radius: 6px; */
}

.uploaded-by-thumb-container {
    position: absolute;
    right: 0;
    /* height: 24px; */
    top: 0;
    /* width: 50%; */
    /* background-color: #ff46a2; */
    /* background-color: #033AA8;
    color: #fff;
    padding: 4px 16px; */
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    /* width: 100%;
    height: 100%; */
    /* border-radius: 6px; */
}

.book-card-rbmk-uploaded-by-img {
    height: 84px;
}

.flex-books {
    justify-content: center;
    gap: 64px;
}

.explore-btn {
    border-radius: 6px;
    background-color: var(--teritary-color);
    color: var(--white);
    font-size: 0.9rem;
    width: 200px;
    border: 1px solid var(--teritary-color);
    cursor: pointer;
    z-index: 100;
}

.explore-btn-orange {
    border-radius: 6px;
    background-color: #fd7e14;
    color: var(--white);
    font-size: 0.9rem;
    width: 200px;
    border: 1px solid #fd7e14;
    cursor: pointer;
    z-index: 100;
}

.explore-more-free-btn {
    border-radius: 6px;
    background-color: var(--teritary-color);
    color: var(--white);
    font-size: 0.9rem;
    /* width: 200px; */
    border: 1px solid var(--teritary-color);
    cursor: pointer;
    z-index: 100;
}


.choose-plan-btn {
    background-color: var(--teritary-color);
    border-top-left-radius: 21px;
    border-top-right-radius: 21px;
    border-bottom-left-radius: 21px;
    border-bottom-right-radius: 21px;
    color: var(--white);
    font-size: 0.9rem;
    width: 100%;
}

.choose-plan-btn:hover {
    background-color: var(--white);
    color: var(--teritary-color);
    border: 1px solid var(--teritary-color);
    transition: .5s ease-in-out;
}

.explore-btn:hover {
    background-color: var(--white);
    color: var(--teritary-color);
    border: 1px solid var(--teritary-color);
    transition: .5s ease-in-out;
}

.explore-btn-orange:hover {
    background-color: var(--white);
    color: #fd7e14;
    border: 1px solid #fd7e14;
    transition: .5s ease-in-out;
}

.explore-more-free-btn:hover {
    background-color: var(--white);
    color: var(--teritary-color);
    border: 1px solid var(--teritary-color);
    transition: .5s ease-in-out;
}

.js-cookie-consent {
    z-index: 9999;
    margin-bottom: 69px;
}

.main-books-container {
    /* height: 100vh; */
    background-image: url('/assets/img/bg-main.png');
    background-position: cover;
    /* margin-top: -84vh; */
    z-index: -99;
    position: relative;
}

.white-text {
    color: var(--white);
}

.exact-books-container {
    background-color: var(--primary-color);
    margin-top: -12px;
}

.exact-books-container-educators {
    background-color: var(--primary-color);
}

/* --------------------- Media Queries----------------------- */

/* Plans Page */
.plan-card {
    background-color: var(--white);
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
}

.plan-hr {
    color: red;
    background-color: red;
}

.rbmk-z-navbar {
    z-index: 124;
    /* box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; */
}

.navbar-nav .nav-item.active .nav-link {
    /* border-bottom: 3px solid var(--teritary-color); */
    /* Change the color and style as needed */
}

.custom-nav-log-in-btn:hover {
    background: var(--text-black);
    transition: .5s ease-in-out;
    color: white;
}

.custom-nav-log-in-btn {
    cursor: pointer;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    background-color: var(--white);
    border: 2px solid var(--text-black);
    padding: 4px 16px;
    font-size: 0.9rem;
}

.custom-nav-sign-up-btn:hover {
    background: var(--white);
    color: var(--text-black);
    transition: .5s ease-in-out;
    border: 2px solid var(--text-black);
}

.custom-nav-sign-up-btn {
    cursor: pointer;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    background-color: var(--text-black);
    border: 2px solid var(--text-black);
    color: var(--white);
    padding: 4px 16px;
    font-size: 0.9rem;
}

.nav-link {
    font-size: 0.9rem;
}

.user-type-select-modal {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #040001b0;
    height: 100vh;
    width: 100%;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
}

.payment-success-modal {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #040001b0;
    height: 100vh;
    width: 100%;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
}

.user-type-modal-main {
    /* height: 50vh; */
    width: 50%;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    background-color: var(--white);
}

.modal-parent-btn:hover {
    background-color: var(--teritary-color);
    color: var(--white);
    transition: .5s ease-in-out;
}

.modal-parent-btn {
    cursor: pointer;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    background-color: var(--white);
    color: var(--teritary-color);
    font-weight: bolder;
    border: 2px solid var(--teritary-color);
    padding: 8px 32px;
    margin-top: 12px;
}

.modal-kid-btn:hover {
    background-color: var(--white);
    color: var(--teritary-color);
    transition: .5s ease-in-out;
}

.modal-kid-btn {
    cursor: pointer;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    background-color: var(--teritary-color);
    color: var(--white);
    font-weight: bolder;
    border: 2px solid var(--teritary-color);
    padding: 8px 48px;
    margin-top: 12px;
}

.boy-laptop-books {
    margin-top: -106px;
}

.plan-section {
    background: var(--secondary-light-primary-color);
    margin-top: -2%;
}

.book-type-chip-active {
    background-color: var(--teritary-color) !important;
}

.book-type-chip {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-white-light);
    height: 120px;
    width: 120px;
    margin: 16px;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
}

.book-type-chip:hover {
    background-color: var(--teritary-color);
    transition: .3s ease-in-out;
}

.book-type-chip:hover p {
    color: white;
}

.book-type-container {
    height: 150px;
    width: 100%;
    overflow-x: auto;
    display: flex;
    justify-content: center;
}

.book-type-chip-text-active {
    color: var(--white) !important;
}

.book-type-chip-text {
    color: var(--text-black);
    font-weight: 600;
}

.book-carousel-header {
    display: flex;
    justify-content: space-between;
}

.comic-for-the-week-container {
    background-color: var(--primary-color);
    position: relative;
}

.free-access-comics-container {
    position: relative;
    background-color: var(--secondary-light-primary-color);
}

.latest-books-container {
    position: relative;
    background-color: var(--primary-color);
}

.latest-books-teacher-container {
    position: relative;
    background-color: var(--primary-color);
}

.view-all-carousel-btn,
.view-all-carousel-free-btn,
.view-all-carousel-latest-btn {
    background-color: var(--teritary-color);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    padding-left: 24px;
    padding-right: 24px;
    color: var(--white);
    height: 48px;
    position: absolute;
    top: 6px;
    right: 148px;
}

.view-all-carousel-teacher-btn {
    background-color: var(--teritary-color);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    padding-left: 24px;
    padding-right: 24px;
    color: var(--white);
    height: 48px;
    position: absolute;
    top: 6px;
    right: 320px;
}

.week-books-next,
.week-books-prev,
.free-books-paid-users-prev,
.free-books-paid-users-next,
.free-books-prev,
.free-books-next .latest-books-prev,
.latest-books-next,
.genetiks-books-next,
.genetiks-books-prev,
.latest-books-teacher-prev,
.latest-books-teacher-next {
    width: 48px;
    height: 48px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    border: none !important;
    background: none;
}

.week-books-next img,
.week-books-prev img,
.free-books-next img,
.free-books-prev img,
.latest-books-next img,
.latest-books-prev img,
.genetiks-books-next img,
.genetiks-books-prev img,
.free-books-paid-users-next img,
.free-books-paid-users-prev img,
.latest-books-teacher-prev img,
.latest-books-teacher-next img {
    height: 48px;
    width: 48px;
}

.book-carousel-header-thin-text {
    font-weight: 300;
}

.book-carousel-header-thin-text {
    font-weight: 300;
    color: var(--white);
}

.week-books-next,
.free-books-next,
.latest-books-next,
.latest-books-teacher-next,
.free-books-paid-users-next,
.genetiks-books-next {
    position: absolute;
    top: -57px;
    right: 0px;
}

.week-books-prev,
.free-books-prev,
.latest-books-prev,
.latest-books-teacher-prev,
.free-books-paid-users-prev,
.genetiks-books-prev {
    position: absolute;
    top: -57px;
    right: 58px;
}

.book-title-by p {
    /* height: 26px; */
    overflow: hidden;
    text-align: center;
}

button.free-books-next {
    border: none;
}

button.latest-books-prev.mx-2 {
    background: none;
    border-radius: 100%;
    width: 48px;
    height: 48px;
    border: none;
}

.class-chip {
    background-color: var(--bg-green);
}

.class-chip label {
    cursor: pointer;
    color: var(--white);
    user-select: none;
}

.assign-comic-btn {
    background-color: var(--teritary-color);
    width: 100%;
    color: var(--white);
}

.login-container {
    padding-top: 24px;
    padding-bottom: 24px;
    background-image: url('/assets/img/login-bg.png');
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    /* height: 100vh; */
}

.login-hero-container {
    width: 80%;
    height: auto;
    background-color: var(--white);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
}

.form-input {
    border: none;
    border-bottom: 2px solid #ACACAC;
    color: var(--teritary-color);
    border-radius: 0;
}

.form-control:focus {
    box-shadow: none;
    border-bottom: 2px solid var(--teritary-color);
}

.login-student-btn {
    width: 100%;
    border-radius: 24px;
    background-color: var(--teritary-color);
    color: var(--white);
    cursor: pointer;
    border: 1px solid var(--teritary-color);
}

.login-student-btn:hover {
    background-color: var(--white);
    color: var(--teritary-color);
    border: 1px solid var(--teritary-color);
    transition: .5s all ease-in-out;
}

.bl-2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 13%;
    width: 1px;
    height: 80%;
    background: #E0E0E0;
}

/* .badge-container{
    width: 130px;
    height: 130px;
    overflow: hidden;
} */
.history-comics-container {
    background-color: var(--primary-color);
    position: relative;
}

.history-comic-container-head {
    background-color: var(--white);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    height: 104px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.history-comic-container-body {
    background-color: #527056;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    height: 104px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.history-comic-body {
    width: 88%;
}

.history-comic-book-card {
    /* height: 140px;
    width: 120px; */
    border: 4px solid var(--light-primary-color);
    /* background-color: var(--primary-color);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px; */
    overflow: hidden;
    margin-right: -24px;
    margin-top: 24px;
    z-index: 100;
}

.history-comic-desc {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
}

.view-all-history-btn {
    background-color: var(--teritary-color);
    border: none;
    cursor: pointer;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    padding-left: 24px;
    padding-right: 24px;
    color: var(--white);
    height: 48px;
}

.monster-img-1 {
    position: absolute;
    left: 0;
    top: 60%;
}

.monster-img-2 {
    position: absolute;
    right: 0;
    top: 80%;
}

.monster-img-3 {
    position: absolute;
    left: 0;
    top: -10%;
}

.monster-img-4 {
    position: absolute;
    right: 0;
    top: -10%;
}

.monster-img-5 {
    position: absolute;
    left: 0;
    top: -130%;
}

.monster-img-6 {
    position: absolute;
    right: -10%;
    top: 200%;
}

.monster-img-7 {
    position: absolute;
    left: -6%;
    top: 200%;
}

.monster-img-8 {
    position: absolute;
    right: -10%;
    top: -150%;
}

.rotate-infinite {
    display: inline-block;
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* 
.alert-container {
    position: absolute;
    width: 100%;
    height: 100vh;
}

.alert-modal .card {
    position: fixed;
    bottom: 0;
    right: 12px;
    z-index: 20;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    transition: .5s ease-in-out;
} */

/* 
.profile-dropdown {
    position: relative;
    display: inline-block;
}

.profile-dropdown .profile-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.profile-dropdown .dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 160px;
    padding: 8px;
    z-index: 1;
    transition: .5s ease-in-out all;
}

.profile-dropdown:hover .dropdown-content {
    display: block;
    transition: .5s ease-in-out all;
}

.profile-dropdown .dropdown-content a {
    display: block;
    padding: 4px 0;
    text-decoration: none;
    color: #333;
}

.profile-dropdown .dropdown-content a:hover {
    background-color: #e9e9e9;
} */

.history-comic-container-head {
    overflow: hidden;
}

.history-comic-container-head h5 {
    font-size: 1rem;
}

.book-card-thumb {
    height: 187px;
}

.history-comic-book-card img {
    /* height: 177px; */
}

.hardwords-container {
    display: flex;
    flex-wrap: wrap;
}

.hardword-chip {
    padding: 4px;
    background-color: var(--primary-color);
    color: var(--bg-white-light);
    margin: 2px;
    cursor: pointer;
}

.hardword-bg-container {
    height: 100vh;
    width: 100%;
    background-color: var(--bg-green);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hardword-action-container {
    overflow-x: hidden;
    overflow-y: auto;
    padding: 12px;
    background-color: var(--white);
    width: 60%;
    border-radius: 12px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.hardword-volume-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 2rem;
}

.hardword-volume-btn i {
    color: var(--text-secondary);
}

.hardword-sound i {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.hardword-container-cls-btn {
    background-color: var(--primary-color);
    border: none;
    border-radius: 100%;
    cursor: pointer;
}

.hardword-container-cls-btn i {
    color: var(--white);
}

.rbmk-comics-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* 5 comics per row on large screens */
    gap: 44px;
    padding: 20px;
}

.rbmk-comics-grid-marketing {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 5 comics per row on large screens */
    gap: 44px;
    padding: 20px;
}

.rbmk-comics-grid-mini-book {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* 5 comics per row on large screens */
    gap: 44px;
    padding: 20px;
}

.partner-logo {
    width: 160px;
    height: 160px;
    object-fit: contain;
    border-radius: 100%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}


.rbmk-comic-langage-chip {
    background-color: #E9559B;
    border-radius: 24px;
    color: #fff;
    position: absolute;
    top: 14px;
    right: 10px;
    z-index: 1;
    padding-left: 12px;
    padding-right: 12px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.rbmk-comic-item {
    position: relative;
}

@media (max-width: 1200px) {
    .rbmk-comics-grid {
        grid-template-columns: repeat(4, 1fr);
        /* 4 comics per row */
    }

    .rbmk-comics-grid-mini-book {
        grid-template-columns: repeat(4, 1fr);
        /* 4 comics per row */
    }

    .rbmk-comics-grid-marketing {
        grid-template-columns: repeat(4, 1fr);
        /* 4 comics per row */
    }
}

@media (max-width: 992px) {
    .rbmk-comics-grid {
        grid-template-columns: repeat(4, 1fr);
        /* 3 comics per row */
    }

    .rbmk-comics-grid-mini-book {
        grid-template-columns: repeat(4, 1fr);
        /* 3 comics per row */
    }

    .rbmk-comics-grid-marketing {
        grid-template-columns: repeat(4, 1fr);
        /* 3 comics per row */
    }
}

@media (max-width: 768px) {
    .rbmk-comics-grid {
        grid-template-columns: repeat(3, 1fr);
        /* 2 comics per row */
    }

    .rbmk-comics-grid-mini-book {
        grid-template-columns: repeat(3, 1fr);
        /* 2 comics per row */
    }

    .rbmk-comics-grid-marketing {
        grid-template-columns: repeat(3, 1fr);
        /* 2 comics per row */
    }
}

@media (max-width: 576px) {
    .rbmk-comics-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 1 comic per row for small screens */
    }

    .rbmk-comics-grid-mini-book {
        grid-template-columns: repeat(2, 1fr);
        /* 1 comic per row for small screens */
    }

    .rbmk-comics-grid-marketing {
        grid-template-columns: repeat(2, 1fr);
        /* 1 comic per row for small screens */
    }
}


@media (max-width:768px) {
    .hardword-action-container {
        width: 98%;
    }

    .monster-img-1 {
        top: -320%;
    }

    .monster-img-3 {
        top: 8%;
    }

    .monster-img-5 {
        display: none;
    }

    .monster-img-7 {
        left: -10%;
    }

    .history-comic-book-card {
        display: none;
    }

    /* .badge-container{
        width: 80px;
        height: 80px;
    } */
    .login-hero-container {
        width: 98%;
    }

    .history-comic-body {
        width: 100%;
    }

    .bl-2::before {
        background: var(--white);
    }

    button.free-books-next {
        top: -20px;
    }

    button.latest-books-next {
        top: 18px;
    }

    .week-books-prev,
    .week-books-next,
    .view-all-carousel-btn,
    .free-books-prev,
    .free-books-next,
    .latest-books-prev,
    .latest-books-next,
    .view-all-carousel-free-btn,
    .free-books-paid-users-next,
    .free-books-paid-users-prev,
    .genetiks-books-next,
    .genetiks-books-prev,
    .latest-books-teacher-next,
    .latest-books-teacher-prev,
    .view-all-carousel-teacher-btn {
        position: relative;
        top: auto;
        right: inherit;
    }

    .book-carousel-header {
        flex-direction: column;
    }

    .plan-section {
        margin-top: -4%;
    }

    h1 {
        font-size: 1.6rem;
    }

    .large-text {
        font-size: 2rem;
    }

    .main-section {
        height: auto;
    }

    .main-writer-section {
        height: auto;
    }

    .main-books-container {
        background: none;
        background-color: var(--primary-color);
        margin-top: 0;
    }

    .book-card {
        /* height: 120px;
        width: 100px; */
    }

    .user-type-modal-main {
        /* height: 50vh; */
        width: 80%;
    }
}

@media (max-width:991px) {
    .history-comic-book-card {
        display: none;
    }
}

@media (max-width:1189px) {
    .large-text {
        font-size: 2rem;
    }

    .history-comic-body {
        width: 86%;
    }

}

@media (max-width:358px) {
    .main-desc-content {
        height: 60vh;
    }
}

@media (max-width:418px) {
    .main-desc-content {
        height: 60vh;
    }

    .monster-img-2,
    .monster-img-1,
    .monster-img-3,
    .monster-img-4,
    .monster-img-5,
    .monster-img-6,
    .monster-img-7 {
        display: none;
    }
}

@media (max-width:564px) {
    .monster-img-3 {
        display: none;
    }
}

.rb-logout-btn {
    background-color: var(--primary-color);
    color: var(--secondary-light-primary-color);
    border: 1px solid var(--primary-color);
    cursor: pointer;
}

.rb-logout-btn:hover {
    background-color: var(--secondary-light-primary-color);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    transition: .5s ease-in-out;
    cursor: pointer;
}

/* 
.alert-event-btn-cls {
    background: none;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
} */

.offer-label {
    color: red;
    animation: blink 1s linear infinite;
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.footer {
    background-color: #282828;
}

/* Card Animations */
.animated-card {
    position: relative;
    transition: transform 0.3s ease-in-out;
}

.animated-card:hover {
    transform: translateY(-10px) scale(1.05);
}

/* Smooth Glowing Button Animation */
.glowing-btn {
    position: relative;
    transition: box-shadow 0.3s ease-in-out;
}

.glowing-btn:hover {
    box-shadow: 0 0 15px rgba(255, 64, 129, 0.8), 0 0 30px rgba(255, 64, 129, 0.5);
}

/* Floating Stars Effect */
.floating-stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://www.transparenttextures.com/patterns/stardust.png') repeat;
    animation: stars 10s linear infinite;
    pointer-events: none;
}

@keyframes stars {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 500px 500px;
    }
}

.book-demo-btn {
    background: linear-gradient(135deg, #FF6B6B, #FDC324);
    /* Colorful gradient: red to yellow */
    color: #FFFFFF;
    /* White text */
    border: none;
    /* Remove default border */
    border-radius: 50px;
    /* Rounded button */
    padding: 5px 18px;
    /* Slim padding: adjust for height */
    font-size: 1rem;
    /* Standard readable text size */
    font-weight: 600;
    /* Slightly bold text */
    cursor: pointer;
    /* Pointer on hover */
    transition: all 0.3s ease;
    /* Smooth hover effect */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */
}

.book-demo-btn:hover {
    background: linear-gradient(135deg, #FDC324, #FF6B6B);
    /* Reverse gradient on hover */
    transform: scale(1.05);
    /* Slightly enlarge on hover */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    /* Deeper shadow on hover */
}

.wood-btn-bg {
    margin-top: 24px;
    background: url('/assets/img/zo/btn-wood-bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    padding: 14px 84px;
    color: #000;
    font-family: 'mikado-bold', sans-serif;
    font-weight: 600;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}

.wood-btn-bg:hover {
    transform: translateY(2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    color: #000;
}


.outerBevel {
    /* of frame */
    box-shadow: 4px 6px 12px 0 black;
    border-width: 5px;
    border-style: solid;
    border-color: rgb(109, 84, 58) rgb(24, 19, 13) rgb(24, 19, 13) rgb(109, 84, 58);
}

.flatSurface {
    /* of frame */
    border: 6px solid rgb(65, 40, 16);
}

.innerBevel {
    /* of frame */
    border-width: 2px;
    border-style: solid;
    border-color: rgb(24, 19, 13) rgb(109, 84, 58) rgb(109, 84, 58) rgb(24, 19, 13);
}

.map {
    /* including mat and gold beveled edge of mat */
    display: block;
    clear: both;
    height: 100%;
    width: 100%;
    /* padding: 7.5% 7.5% 10% 7.5%; */
    /* Mat width */
    background-color: rgb(255, 249, 224);
    /* Mat color */
    border-width: 3px;
    /* Gold edge of mat */
    border-style: solid;
    border-color: rgb(207, 166, 0) rgb(207, 166, 0) rgb(145, 110, 0) rgb(145, 110, 0);
}

.footer-bg-zoo {
    height: 860px;
    width: 100%;
    background: url('/assets/img/zo/footer-bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

.showcase {
    width: 100%;
    height: 100vh;
    position: relative;
    background: url("https://t4.ftcdn.net/jpg/01/38/81/53/360_F_138815333_nxZVxnha49hAHSHeyIzcfz58c8s8ZRHC.jpg") no-repeat center center/cover;
    animation: pulse-bg 8s infinite alternate;
}

.showcase::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: rgba(0, 0, 0, 0.4);
    /* You can adjust this or use your own color */
    backdrop-filter: blur(5px);
    /* This applies the blur */
    -webkit-backdrop-filter: blur(5px);
    /* For Safari */
    /* background: rgba(148, 49, 24, 0.65); */
}

.showcase-content {
    position: relative;
    z-index: 2;
    /* margin-top: 9rem; */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    height: 100vh;
}

.showcase-content h1 {
    font-size: 5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2rem;
    text-transform: uppercase;
}

.rbmk-zoo-sub {
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0px;
    animation: fadeInUp 2s ease-in-out;
}

@keyframes pulse-bg {
    from {
        filter: brightness(100%);
    }

    to {
        filter: brightness(120%);
    }
}

@media (max-width: 960px) {
    .showcase-content h1 {
        font-size: 3rem;
    }

    .rbmk-zoo-sub {
        font-size: 1.5rem;
    }
}

@media (max-width: 500px) {
    .showcase-content h1 {
        font-size: 2rem;
    }

    .rbmk-zoo-sub {
        font-size: 1.2rem;
    }
}

.main-zoo-container-img {
    position: relative;
}

.coming-soon-zoo-chip {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #04021f;
    color: #fff;
    font-family: 'mikado-regular', sans-serif;
    font-weight: 900;
    padding: 4px 12px;
    z-index: 10;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.dynamic-shape {
    width: 120px;
    height: 120px;
    font-weight: bold;
    transition: transform 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: 18px;
    line-height: 1.1;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: wrap;
    font-size: 14px;
}

.dynamic-shape:hover {
    transform: scale(1.01);
}

.hover-white:hover {
    color: #fff;
}

.shape-1 {
    background: #FF3B3F;
    /* bright red */
    border-radius: 50% 60% 40% 50% / 60% 50% 40% 50%;
}

.shape-3 {
    background: #00B4FF;
    /* bright sky blue */
    border-radius: 60% 40% 55% 45% / 50% 50% 60% 40%;
}

.shape-2 {
    background: #00D26A;
    /* bright green */
    border-radius: 70% 30% 30% 70% / 50% 60% 40% 50%;
}

.shape-0 {
    background: #FFD500;
    /* bright yellow */
    border-radius: 45% 55% 60% 40% / 40% 50% 60% 50%;
}

.shape-4 {
    background: #9B00FF;
    /* vibrant purple */
    border-radius: 60% 50% 60% 50% / 50% 60% 50% 60%;
}

.shape-5 {
    background: #00E0FF;
    /* neon aqua */
    border-radius: 65% 35% 60% 40% / 50% 55% 45% 60%;
}

.shape-6 {
    background: #FF8000;
    /* bold orange */
    border-radius: 58% 42% 47% 53% / 51% 49% 52% 48%;
}

.shape-7 {
    background: #1D4ED8;
    /* vivid blue */
    border-radius: 49% 51% 59% 41% / 44% 56% 50% 50%;
}

.shape-8 {
    background: #FF1493;
    /* bright pink */
    border-radius: 61% 39% 42% 58% / 47% 53% 51% 49%;
}

.shape-9 {
    background: #00FFAB;
    /* vibrant mint green */
    border-radius: 55% 45% 48% 52% / 50% 60% 40% 50%;
}

.tcl-view-comic-custom-btn-border-focus {
    background-color: transparent;
    /* Transparent background */
    color: #0d6efd;
    /* Bootstrap primary color for text */
    border: 2px solid #0d6efd;
    /* Strong primary border */
    border-radius: 50px;
    /* Pill shape */
    padding: 10px 25px;
    font-size: 1.1rem;
    font-weight: 600;
    /* Bolder text */
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tcl-view-comic-custom-btn-border-focus:hover {
    background-color: #0d6efd;
    /* Solid primary background on hover */
    color: white;
    /* White text on hover */
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.3);
    /* Soft shadow with primary color tint */
    transform: scale(1.02);
    /* Slight grow effect */
}

.tcl-view-comic-custom-btn-border-focus:active {
    transform: scale(0.98);
    /* Slight shrink effect on click */
    box-shadow: none;
}

/* Icon styling */
.tcl-view-comic-custom-btn-border-focus .bi {
    font-size: 1.2rem;
}

/* Like */

.tcl-custom-like-btn {
    width: 55px;
    height: 55px;
    background: transparent;
    color: #ff4fa3;
    border: 2px solid #ff4fa3;
    border-radius: 50%;
    /* CIRCULAR */
    font-size: 1.4rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 0 0 rgba(255, 79, 163, 0.3);
}

.tcl-custom-like-btn:hover {
    background: linear-gradient(135deg, #ff4fa3, #ff7dcf);
    color: white;
    box-shadow: 0 8px 18px rgba(255, 79, 163, 0.4);
    transform: scale(1.12);
    /* Attractive bounce */
}

.tcl-custom-like-btn:active {
    transform: scale(0.95);
    box-shadow: none;
}


/* Like */

.custom-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 6px 14px;
    margin: 4px 6px 4px 0;
    border-radius: 999px;
    color: var(--text-primary-new);
    /* Black text */
    background-color: #f0f0f0;
    /* Fallback color */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s;
}

.custom-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

.custom-chip .fas {
    font-size: 0.75rem;
    margin-right: 6px;
}

/* Color variations */
.chip-color-0 {
    background-color: #FFD700;
}

/* Gold */
.chip-color-1 {
    background-color: #FF6F61;
}

/* Coral red */
.chip-color-2 {
    background-color: #6EE7B7;
}

/* Mint green */
.chip-color-3 {
    background-color: #A5D8FF;
}

/* Light blue */
.chip-color-4 {
    background-color: #FFB347;
}

/* Orange */
.chip-color-5 {
    background-color: #D5A6FF;
}

/* Lavender */
.chip-color-6 {
    background-color: #FF69B4;
}

/* Hot pink */
.chip-color-7 {
    background-color: #87CEEB;
}

/* Sky blue */
.chip-color-8 {
    background-color: #B2F7EF;
}

/* Aqua mint */
.chip-color-9 {
    background-color: #FFC0CB;
}

/* Pink */
.free-comic-chip {
    display: block;
    width: 100%;
    background-color: #28a745;
    color: white;
    font-weight: bold;
    text-align: center;
    padding: 6px 0;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
}

.language-comic-chip {
    display: block;
    width: 100%;
    background-color: #fcff42;
    color: #000;
    font-weight: bold;
    text-align: center;
    padding: 6px 0;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
}

.in-progress-comic-chip {
    display: block;
    width: 100%;
    background-color: #7454AE;
    color: white;
    font-weight: bold;
    text-align: center;
    padding: 6px 0;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
}

.scribble-moderation-status-chip {
    display: block;
    width: 100%;
    color: white;
    font-weight: bold;
    text-align: center;
    padding: 6px 0;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
}

/* --- Background Colors for Chips --- */

/* Approved Status */
.scribble-moderation-status-chip.approved {
    background-color: #28a745;
    /* A standard green color for success/approval */
}

/* Rejected Status (Change the text in your HTML to "Rejected" to match the status) */
.scribble-moderation-status-chip.rejected {
    background-color: #dc3545;
    /* A standard red color for failure/rejection */
}

/* Pending Status */
.scribble-moderation-status-chip.pending {
    background-color: #ffc107;
    /* A standard yellow/amber color for warnings/pending */
    color: #343a40;
    /* Consider a darker text color for better contrast on a light background */
}

/* On Hold Status */
.scribble-moderation-status-chip.on Hold {
    background-color: #007bff;
    /* A standard blue color for informational/on hold */
}

/* Rounded all sides when no chip */
/* .book-card-new.no-chip img {
    border-radius: 6px;
} */

/* Only bottom corners rounded when chip exists */
/* .book-card-new.has-chip img {
    border-radius: 0 0 6px 6px;
} */

/* Rounded all sides when no chip */
/* .book-card-new.no-chip {
    border-radius: 6px;
} */

/* Only bottom corners rounded when chip exists */
/* .book-card-new.has-chip {
    border-radius: 6px;
} */

/* .free-comic-chip {
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: #28a745;
    color: #fff;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 2;
    text-transform: uppercase;
} */
.book-card-new {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}


.comic-progress-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background-color: rgba(224, 224, 224, 0.8);
    overflow: hidden;
    z-index: 2;
    cursor: pointer;
}

.comic-progress-bar {
    height: 100%;
    background-color: #7454AE;
    /* Bright purple */
    transition: width 0.4s ease;
}

.comic-progress-completed-bar {
    height: 100%;
    background-color: #28A745;
    /* Bright purple */
    transition: width 0.4s ease;
}

/* Optional: Custom tooltip styling */
.comic-progress-overlay:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    right: 10px;
    background: #333;
    color: #fff;
    padding: 4px 8px;
    font-size: 0.75rem;
    white-space: nowrap;
    border-radius: 4px;
    margin-bottom: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}


/* Profile Page Styles Start */
/* Premium Card */
.premium-card {
    border-radius: 1rem;
    /* 16px */
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.premium-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Header Gradients */
.bg-gradient-premium-active {
    background-image: linear-gradient(to right, #4CAF50, #81C784);
}

.bg-gradient-premium-expired {
    background-image: linear-gradient(to right, #6c757d, #9e9e9e);
}

.card-header.rounded-top-xl {
    border-top-left-radius: 1rem !important;
    border-top-right-radius: 1rem !important;
}

/* Icon Circles */
.icon-circle-lg {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* Color Classes */
.bg-light-blue {
    background-color: #eaf1ff;
}

.text-blue {
    color: #5a77ff;
}

.bg-light-red {
    background-color: #fde6e8;
}

.text-red {
    color: #dc3545;
}

.bg-light-indigo {
    background-color: #e9eaf9;
}

.text-indigo {
    color: #5664d2;
}

.bg-light-green {
    background-color: #e8f5e9;
}

.text-green {
    color: #198754;
}

.bg-light-yellow {
    background-color: #fff8e1;
}

.text-yellow {
    color: #ffc107;
}

.bg-light-gray {
    background-color: #f1f3f5;
}

.text-gray {
    color: #6c757d;
}

.text-dark {
    color: #343a40 !important;
}

/* Other elements */
.badge-pill {
    padding-left: 1.25em;
    padding-right: 1.25em;
}

.alert {
    border-left: 4px solid #0d6efd;
}

.user-profile-pic-container {
    border-radius: 100%;
    padding: 3px;
    width: 150px;
}

.profile-pic-user {
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin-top: -80px;
    border: 8px solid #fff;
}

.profile-image-cover-container {
    background-color: var(--primary-color);
    background-image: url('/assets/img/cuddalore/pattern.png');
    background-repeat: repeat;
    background-size: auto;
    background-blend-mode: multiply;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-top-right-radius: 24px;
    border-top-left-radius: 24px;
}

.profile-sidebar .nav-link {
    border-radius: 12px;
    padding: 10px 15px;
    font-weight: 500;
    color: #333;
}

.profile-sidebar .nav-link.active {
    background-color: var(--primary-color);
    color: #fff;
}

/* Profile Page Styles End */

/* Global text selection color */
::selection {
    background: var(--primary-color);
    /* background color when text is selected */
    color: #fff;
    /* text color when selected */
}

/* For Firefox */
::-moz-selection {
    background: var(--primary-color);
    /* background color when text is selected */
    color: #fff;
    /* text color when selected */
}


/* --- PENDING State Gradient (New) --- */
.bg-gradient-premium-pending {
    /* Use a warm, caution-like gradient (Yellow/Orange) */
    background: linear-gradient(90deg, #ffc107 0%, #fd7e14 100%);
    /* You can adjust the colors: #ffc107 is Bootstrap's $yellow, #fd7e14 is $orange */
    color: #000;
    /* Ensure text is dark on a light gradient for accessibility */
}

.icon-circle-lg {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    /* Adjust size as needed */
    height: 45px;
    border-radius: 50%;
    font-size: 1.2rem;
}

.bg-gradient-premium-pending.card-header {
    color: #fff !important;
}

.badge-light.text-warning {
    color: #664d03 !important;
}

/* Only for desktop */
@media (min-width: 768px) {
    .profile-sidebar {
        position: sticky;
        top: 80px;
        /* Adjust according to your header height */
        height: calc(100vh - 80px);
        /* Full height minus header */
        overflow-y: auto;
        padding-right: 0;
        /* optional */
        background-color: #fff;
        /* to match the container */
    }

    .profile-content {
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        padding-left: 2rem;
    }

    /* Optional: nice scroll for sidebar */
    .profile-sidebar::-webkit-scrollbar {
        width: 6px;
    }

    .profile-sidebar::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 3px;
    }
}

.profile-card-container {
    padding: 40px !important;
    border-radius: 24px !important;
    background: #f8f9fa;
}



/* Optional: If you use a custom font, define it here. 
   Otherwise, this ensures mobile titles are small and deskop titles are larger.
*/
.h5-md {
    font-size: 1rem;
    /* Default size for mobile (similar to h6/p) */
}

.likeBtnOnComicItems {
    background: none;
    color: var(--text-primary-new);
}

@media (min-width: 768px) {

    /* For medium devices (md) and up, make the title bigger (like h5) */
    .h5-md {
        font-size: 1.25rem;
        /* Standard h5 size in Bootstrap */
    }
}