/* Hero Section */
        .hero-section {
            position: relative;
            background-image: url("../images/hero_section_background.jpg");
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            padding: 130px 20px;
            height: 50vh;
            color: white;
            z-index: 1;
        }

        /* .hero-section::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.616);
           semi-transparent black overlay 
            z-index: -1;
            
        } */


        .hero-container {
            max-width: 1200px;
            margin: 10pc 0px 0px 10pc;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 40px;
            flex-wrap: wrap;
        }

        /* Left side text */
        .hero-text {
            font-family: Georgia, 'Times New Roman', Times, serif;
            /* font-style: oblique; */
            flex: 1 1 500px;
            color: #cb982b;
        }

        .hero-text h1 {
            font-family: Georgia, 'Times New Roman', Times, serif;
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

        .hero-text p {
            font-family: Georgia, 'Times New Roman', Times, serif;
            font-size: 1.25rem;
            color: #ffffff;
            line-height: 1.6;
        }

        /* Right side image */
        .hero-image {
            flex: 1 1 400px;
            text-align: center;

        }

        .hero-image img {
            max-width: 100%;
            position: absolute;
            height: auto;
            width: 30%;
            margin: -15.5pc 0pc 0pc 5pc;
            display: inline-block;

        }

        @media (min-width:300px) and (max-width: 374px) {



            .hero-image img {
                width: auto;
                margin: -0.6pc 0pc 0pc -10pc;

            }

            .hero-container {
                flex-direction: column;
                text-align: center;
                margin: auto;
            }

            .hero-text,
            .hero-image {
                flex: none;
                width: 100%;
            }

            .hero-text h1 {
                font-size: 2rem;
                margin-bottom: 0.75rem;
            }

            .hero-text p {
                font-size: 1rem;
                margin-bottom: 30px;
            }
        }

        /* Responsive Hero Text */
        @media (min-width:375px) and (max-width: 767px) {
            .hero-image img {
                width: auto;
                margin: -2.5pc 0pc 0pc -11.8pc;
            }

            .hero-container {
                flex-direction: column;
                text-align: center;
                margin: auto;
            }

            .hero-text,
            .hero-image {
                flex: none;
                width: 100%;
            }

            .hero-text h1 {
                font-size: 2rem;
                margin-bottom: 0.75rem;
            }

            .hero-text p {
                font-size: 1rem;
                margin-bottom: 30px;
            }
        }

        @media (min-width:424px) and (max-width: 767px) {
            .hero-image img {
                width: auto;
                margin: -90px 0pc 0pc -13.5pc;
            }

            .hero-container {
                flex-direction: column;
                text-align: center;
                margin: auto;
            }

            .hero-text,
            .hero-image {
                flex: none;
                width: 100%;
            }

            .hero-text h1 {
                font-size: 2rem;
                margin-bottom: 0.75rem;
            }

            .hero-text p {
                font-size: 1rem;
                margin-bottom: 30px;
            }
        }




        .subscribe-section {
            display: flex;
            align-items: center;
            justify-content: space-around;
            flex-wrap: wrap;
            background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%);
            padding: 60px 30px;
            gap: 50px;
            border-radius: 16px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
            max-width: 1200px;
            margin: 9pc auto 0px;
            border: 12px solid transparent;
            border-image: url(https://img.freepik.com/premium-photo/bookshelves-library-abstract-educational-background_257123-28275.jpg) 30 round;
        }

        .left-side img {
            position: absolute;
            max-width: 450px;
            width: 100%;
            height: auto;
            margin: -19pc 0px 0px -5pc;
            border-radius: 10px;
            display: block;
        }

        .right-side {
            padding: 30px 40px;
            max-width: 420px;
            text-align: center;
        }

        .right-side h2 {
            font-family: Georgia, 'Times New Roman', Times, serif;
            font-size: 1.8em;
            color: #1b1b1b;
            margin-bottom: 12px;
        }

        form {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        input[type="email"] {
            padding: 12px 15px;
            font-size: 1em;
            border: 1px solid #d0d0d0;
            border-radius: 8px;
            flex: 1;
            min-width: 220px;
            outline: none;
            transition: border-color 0.3s;
        }

        input[type="email"]:focus {
            border-color: #3b82f6;
        }

        .button1 {
            background: linear-gradient(135deg, #0077ff, #00bfff);
            color: #fff;
            border: none;
            padding: 12px 20px;
            font-size: 1em;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .button1:hover {
            background: linear-gradient(135deg, #0066cc, #0099cc);
            transform: translateY(-2px);
        }

        @media (max-width: 768px) {
            .subscribe-section {
                flex-direction: column;
                text-align: center;
            }

            .right-side {
                width: 100%;
                padding: 0px 0px;
            }
        }



        .mainsection {
            margin-top: 80px;
        }

        .background {
            width: 100%;
            height: 60vh;
            margin-top: -9px;
            margin-bottom: -10px;
            background-color: #172443;
            /* Golden yellow background */
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .about-container {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 60px;
            flex-wrap: wrap;
        }

        .about-image img {
            width: 100%;
            max-width: 520px;
            border-radius: 0;

        }

        .about-content {
            font-family: "Playfair Display", serif;
            font-optical-sizing: auto;
            flex: 1;
            text-align: left;
            min-width: 320px;
        }

        .about-content h2 {
            text-align: left;
            font-size: 22px;
            font-weight: 600;
            color: #fff;
            margin-bottom: 10px;
        }

        .about-content h1 {
            font-size: 60px;
            font-weight: 800;
            text-transform: uppercase;
            background: linear-gradient(to right, #B57E10, #F5D56F);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 20px;
        }

        .about-content p {
            line-height: 1.8;
            color: #f2f2f2;
            font-size: 16px;
            max-width: 600px;
            margin-bottom: 30px;
        }

        .btn {
            background: linear-gradient(to right, #B57E10, #F5D56F);
            color: #fff;
            font-weight: 600;
            border: none;
            padding: 12px 30px;
            border-radius: 30px;
            cursor: pointer;
            font-size: 16px;
            box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
        }

        .btn:hover {
            background: linear-gradient(to right, #F5D56F, #B57E10);
            color: #172443;
            transform: translateY(-3px);
        }

        @media (max-width: 950px) {
            .about-container {
                flex-direction: column;
                text-align: center;
            }

            .about-content h1 {
                font-size: 48px;
            }
        }

        .buttomsvg {
            width: 100%;
            height: auto;
        }

        /* Right Column (Slider) */
        .slider-wrapper12 {
            flex: 1;
            height: 45vh;
            min-width: 300px;
            margin-left: -200px;
            position: relative;
            /* overflow: hidden; */
        }

        .slider1 {
            display: flex;
            gap: 30px;
            width: max-content;
            animation: scroll 30s linear infinite;
        }

        .slider1 img {
            width: 220px;
            height: auto;
            border-radius: 12px;
            /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); */
            transition: transform 0.4s ease;
        }

        .testimonial-card {
            background: linear-gradient(145deg, #ffd882, #8f6c27);
            color: #0f1923;
            border-radius: 15px;
            padding: 30px 25px;
            width: 320px;
            box-shadow: 8px 9px 12px 0px rgb(0, 0, 0);
            position: relative;
            flex-shrink: 0;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .testimonial-card:hover {
            transform: translateY(-5px);
            box-shadow: 8px 9px 12px 0px #727272;
        }

        .testimonial-card img {
            width: 60px;
            height: 60px;
            border-radius: 8px;
            object-fit: cover;
            margin-bottom: 15px;
            border: 3px solid #fff;
        }

        .testimonial-card p {
            font-size: 15px;
            line-height: 1.6;
            margin-bottom: 20px;
        }

        .testimonial-card h4 {
            font-size: 18px;
            font-weight: 600;
            color: #172443;
            margin: 0;
            text-shadow: 2px 2px 6px rgba(77, 77, 77, 0.15);
        }

        .testimonial-card::after {
            content: "";
            position: absolute;
            top: 35px;
            right: 20px;
            width: 35%;
            height: 90px;
            background-image: url(../images/turstrpilot-logo__1_-removebg-preview.png);
            background-size: contain;
            background-repeat: no-repeat;
            /* opacity: 0.7; */
        }


        /* Infinite scroll animation */
        @keyframes scroll {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%);
            }
        }

        .testimonials-section:hover .slider {
            animation-play-state: paused;
        }

        /* Responsive layout */
        @media (max-width: 950px) {
            .slider-wrapper12 {

                overflow: visible;
                width: 100%;
            }

            .slider {
                justify-content: center;
                animation-duration: 20s;
            }
        }

        /* === Hero Section === */
        .hero1 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 50px 8%;
            background-color: #121f3e;
            /* background: linear-gradient(90deg, #0f172a 0%, #1a2236 40%, #7a6225 100%); */
            position: relative;
            overflow: hidden;
        }

        /* Left Book */
        .hero-left {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .hero-left img {
            width: 220px;
            height: 30vh;
            transform: rotateY(-10deg);
            animation: floatBook 5s cubic-bezier(0.68, 1.04, 0.8, 0.66) infinite;
        }

        @keyframes floatBook {

            0%,
            100% {
                transform: translateY(0) rotateY(-10deg);
            }

            50% {
                transform: translateY(-15px) rotateY(-10deg);
            }
        }

        /* Center Text */
        .hero-content1 {
            flex: 1.2;
            text-align: center;
            color: #fff;
            padding: 0 30px;
        }

        .hero-content1 h1 {

            font-family: 'Times New Roman', Times, serif;
            font-size: 2rem;
            /* slightly larger main heading */
            font-weight: 700;
            line-height: 1.3;
            /* increases vertical spacing */
            margin-bottom: 15px;
            /* optional spacing below heading */
        }

        .hero-content1 h1 strong {
            font-family: Georgia, 'Times New Roman', Times, serif;
            /* font-style: oblique; */
            font-size: 2.5rem;
            /* stronger emphasis */
            font-weight: 900;
            line-height: 1.2;
            color: #cb982b;
            /* optional golden highlight for strong text */
        }



        .hero-content1 p {
            font-family: Georgia, 'Times New Roman', Times, serif;
            /* font-style: oblique; */
            margin-top: 15px;
            font-size: 1.1rem;
            opacity: 0.9;
        }

        .hero-content1 p span {
            color: #ffbd4a;
        }

        .hero-buttons {
            margin-top: 35px;
            display: flex;
            justify-content: center;
            gap: 20px;
        }

        .btn12 {
            background: linear-gradient(to right, #B57E10, #F5D56F);
            color: #fff;
            font-weight: 600;
            border: none;
            padding: 12px 30px;
            border-radius: 30px;
            cursor: pointer;
            font-size: 16px;
            box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
        }

        .btn12-primary {
            /* background: linear-gradient(to right, #172443 20%, #B57E10); */
            background-color: #b08435;
            color: #121f3e;
            border: none;
        }

        .btn12-primary:hover {
            background: linear-gradient(to right, #F5D56F, #B57E10);
            color: #172443;
            transform: translateY(-3px);
        }

        .btn12-outline {
            background: transparent;
            border: 2px solid #fff;
            color: #fff;
        }

        .btn12-outline:hover {
            background: linear-gradient(to right, #F5D56F, #B57E10);
            color: #020f50;
            border: none;
            transform: translateY(-3px);
        }

        /* Right Books */
        .hero-right {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .hero-right img {
            width: 200px;
            border-radius: 5px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
            transition: transform 0.5s ease;
        }

        .hero-right img:nth-child(1) {
            transform: rotate(-3deg) translateX(-30px);
            z-index: 2;
        }

        .hero-right img:nth-child(2) {
            transform: rotate(5deg) translateX(30px);
            z-index: 1;
        }

        .hero-right img:hover {
            transform: scale(1.05);
        }

        /* Responsive */
        @media (max-width: 992px) {
            .hero1 {
                flex-direction: column;
                text-align: center;
                padding: 80px 5%;
            }


            .hero-right img {
                display: none;
            }

            .hero-content h1 {
                font-size: 2.2rem;
            }

            .hero-buttons {
                flex-direction: column;
            }
        }

        .recommended {
            margin-top: 10pc;
            margin-bottom: 10pc;
            /* width: 95%; */
            background-color: #121f3e;
            /* background: linear-gradient(to bottom,  #758294,  #374463 ,#24304d,#0d1935, #0c162c); */
            /* background-image: url(../images/blue_white_background_image\ \(1\).jpg);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover; */
            /* border-radius: 0 400px 400px 0; */
        }

        .recommended-section {
            display: flex;
            overflow: hidden;
            /* max-width: 1200px; */
            margin: auto;
            /* flex-direction: column; */
        }

        /* Left panel */
        .left-panel {
            background: #121f3e00;
            padding: 40px 30px;
            width: 96.8%;
            /* display: flex; */
            /* border-bottom: 8px solid #fff; */
            /* gap: 20px; */
            /* position: relative; */
            /* border-radius: 40px 0 0 40px; */
            /* justify-content: space-evenly; */
            /* align-items: center; */
            /* flex-wrap: wrap; */
            position: absolute;
        }

        .left-panel h2 {
            font-family: Georgia, 'Times New Roman', Times, serif;
            /* font-style: oblique; */
            color: #fff;
            font-weight: 900;
            font-size: 48px;
            margin-bottom: 30px;
            text-align: center;
        }

        .left-panel h2 span {
            font-family: Georgia, 'Times New Roman', Times, serif;
            /* font-style: oblique; */
            font-weight: 900;
            font-size: 48px;
            display: block;
            margin-top: 4px;
        }

        .left-panel img {
            position: relative;
            margin: -15rem 0px -50px 0pc;
            height: auto;
            width: 15%;
        }

        .btn-view-more {
            background-color: #e07a26;
            border: none;
            color: white;
            font-weight: 600;
            padding: 12px 24px;
            border-radius: 24px;
            cursor: pointer;
            margin-bottom: 40px;
            transition: background-color 0.3s ease;
        }

        .btn-view-more:hover {
            background-color: #b55f1a;
        }

        .stacked-books {
            width: 150px;
            user-select: none;
        }

        /* Right panel grid */
        .right-panel {
            padding: 30px 40px;
            margin: 12pc auto 0px;
            max-width: 1200px;
            flex-grow: 1;
            /* border-radius: 0 120px 120px 0; */
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            justify-items: center;
            align-items: baseline;
        }

        .book-item {
            border-radius: 10px;
            background: #cb982b00;
            padding: 12px;
            display: flex;
            flex-direction: column;
            cursor: pointer;
        }

        .book-item img {
            /* border-radius: 10px; */
            width: 100%;
            margin-bottom: 8px;
            object-fit: contain;
            height: 220px;
        }



        .book-title {
            font-weight: 700;
            font-size: 14px;
            margin-bottom: 4px;
        }

        .book-author {
            font-weight: 600;
            font-size: 12px;
            color: #444;
            margin-bottom: 6px;
        }

        .book-price {
            font-weight: 700;
            font-size: 13px;
            color: #000;
        }

        /* Responsive */
        @media (max-width: 1024px) {
            .right-panel {
                grid-template-columns: repeat(3, 1fr);
                gap: 20px;
            }

            .recommended-section {

                max-width: 900px;
            }
        }

        @media (min-width:481px) and (max-width: 768px) {

            .recommended {
                width: auto;
                border-radius: 0;
            }

            .recommended-section {
                flex-direction: column;
                /* border-radius: 40px; */
            }

            .left-panel {
                width: auto;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
            }


            .left-panel img {
                position: relative;
                margin: 0;
                height: auto;
                width: 50%;
            }

            .right-panel {
                border-radius: 0 0 40px 40px;
                grid-template-columns: repeat(2, 1fr);
                padding: 20px 30px;
            }
        }

        @media (min-width:300px) and (max-width: 480px) {
            .recommended {
                width: auto;
                border-radius: 0;
            }

            .recommended-section {
                flex-direction: column;
                /* border-radius: 40px; */
            }

            .left-panel {
                width: auto;
                height: auto;
                padding: 40px 0px;
            }

            .left-panel h2 {
                font-size: 30px;
            }

            .left-panel img {
                position: relative;
                margin: 0;
                height: auto;
                width: 130%;
                margin: 0px 0px 0px 30px;
            }



            .right-panel {
                grid-template-columns: 1fr;
                padding: 20px 20px;
            }
        }

        /* From Uiverse.io by mrhyddenn */
        .button {
            -moz-appearance: none;
            -webkit-appearance: none;
            appearance: none;
            border: none;
            background: none;
            color: #0f1923;
            cursor: pointer;
            position: relative;
            padding: 8px;
            /* margin-bottom: 20px; */
            text-transform: uppercase;
            font-weight: bold;
            font-size: 14px;
            transition: all .15s ease;
        }


        .button:active,
        .button:focus {
            outline: none;
        }

        .button:active::before,
        .button:active::after {
            right: 3px;
            left: 3px;
        }

        .button:active::before {
            top: 3px;
        }

        .button:active::after {
            bottom: 3px;
        }

        .button_lg {
            position: relative;
            display: block;
            padding: 10px 20px;
            color: #ffffff;
            text-shadow: #000 2px 3px 2px;
            background-color: #ecbc52;
            overflow: hidden;
            box-shadow: inset 0px 0px 0px 1px transparent;
        }

        .button_sl {
            display: block;
            position: absolute;
            top: 0;
            bottom: -1px;
            left: -8px;
            width: 0;
            background-color: #020f50;
            transform: skew(-15deg);
            transition: all .2s ease;
        }

        .button_text {
            position: relative;
        }

        .button:hover {
            color: #ecbc52;
        }

        .button:hover .button_sl {
            width: calc(100% + 15px);
        }

        .button:hover .button_lg::after {
            background-color: #fff;
        }

        /* ===== SECTION ===== */
        .featured-books-aura {
            text-align: center;
            padding: 100px 20px;
            /* background: linear-gradient(to top, #020f50, #0e1a3a); */
        }

        .featured-books-aura h2 {
            font-family: Georgia, 'Times New Roman', Times, serif;
            /* font-style: oblique; */
            font-size: 2.6rem;
            font-weight: 700;
            text-transform: uppercase;
            margin-bottom: 10px;
        }

        .featured-books-aura h2 span {
            color: #cb982b;
        }

        .featured-books-aura p {
            font-size: 1rem;
            color: #3a3a3a;
            margin-bottom: 60px;
            letter-spacing: 0.5px;
        }

        /* ===== BOOK GRID ===== */
        .book-grid {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 40px;
            max-width: 1500px;
            margin: 0 auto;
        }

        /* ===== BOOK CARD ===== */
        .book-card {
            position: relative;
            width: 180px;
            height: 280px;
            border-radius: 10px;
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.4s ease;
            animation: floatBooks 6s ease-in-out infinite;
        }

        .book-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 10px;
            display: block;
            transition: transform 0.4s ease;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
        }

        /* ===== AURA GLOW ===== */
        .book-card::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 140%;
            height: 140%;
            background: radial-gradient(circle, rgba(203, 152, 43, 0.25) 0%, transparent 70%);
            border-radius: 50%;
            opacity: 0.6;
            z-index: -1;
            animation: pulse 3s infinite alternate;
        }

        .book-card::after {
            content: "";
            position: absolute;
            top: -50%;
            left: -75%;
            width: 50%;
            height: 200%;
            background: linear-gradient(120deg,
                    rgba(255, 255, 255, 0.0) 0%,
                    rgba(255, 255, 255, 0.2) 50%,
                    rgba(255, 255, 255, 0.0) 100%);
            transform: rotate(25deg);
            animation: shine 2.5s infinite;
            pointer-events: none;
        }

        /* ===== FLOATING PARTICLES ===== */
        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: #cb982b;
            border-radius: 50%;
            opacity: 0.8;
            animation: float 5s infinite ease-in-out;
        }

        .particle:nth-child(1) {
            top: 10%;
            left: 20%;
            animation-delay: 0s;
        }

        .particle:nth-child(2) {
            top: 70%;
            left: 30%;
            animation-delay: 1s;
        }

        .particle:nth-child(3) {
            top: 40%;
            left: 60%;
            animation-delay: 2s;
        }

        /* ===== HOVER EFFECT ===== */
        .book-card:hover img {
            transform: scale(1.08);
        }

        .book-card:hover {
            transform: scale(1.1) rotateY(3deg);
        }

        .book-card:hover::before {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1.2);
        }

        /* ===== ANIMATIONS ===== */
        @keyframes shine {
            0% {
                transform: translateX(-100%) rotate(25deg);
            }

            100% {
                transform: translateX(250%) rotate(25deg);
            }
        }

        @keyframes pulse {
            0% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 0.6;
            }

            100% {
                transform: translate(-50%, -50%) scale(1.05);
                opacity: 0.9;
            }
        }

        @keyframes float {
            0% {
                transform: translate(0, 0);
                opacity: 0.8;
            }

            50% {
                transform: translate(15px, -20px);
                opacity: 0.5;
            }

            100% {
                transform: translate(-15px, 20px);
                opacity: 0.8;
            }
        }

        /* Floating books effect */
        @keyframes floatBooks {
            0% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-10px);
            }

            100% {
                transform: translateY(0px);
            }
        }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 992px) {
            .book-card {
                width: 20%;
                height: auto;
            }
        }

        @media (max-width: 600px) {
            .featured-books-aura {
                padding: 70px 20px;
            }

            .featured-books-aura h2 {
                font-size: 2rem;
            }

            .book-card {
                width: 100%;
                height: auto;
            }
        }


        .recommended1 {
            margin-top: 60px;
            margin-bottom: 60px;
            /* width: 96.85%; */
            /* margin-left: 60px; */
            overflow: hidden;
            background: #fff;
            /* border-radius: 400px 0px 0px 400px; */
        }

        .recommended-section1 {
            display: flex;
            width: auto;
            flex-direction: column;
        }

        /* Left panel */
        .left-panel1 {
            /* background: #ecbc52; */
            padding: 40px 30px;
            width: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            /* border-radius: 40px 0 0 40px; */
        }

        .left-panel1 h2 {
            font-family: Georgia, 'Times New Roman', Times, serif;
            font-size: 35px;
            font-weight: 800;
            background: #121f3e;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-transform: uppercase;
            margin: 10px 0 20px;
            text-align: center;
        }

        .left-panel1 h2 span {
            font-family: Georgia, 'Times New Roman', Times, serif;
            font-size: 42px;
            line-height: -2.6;
            font-weight: 900;
            /* font-style: italic; */
            background: #cb982b;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-transform: uppercase;
            margin: 10px 0 20px;
            text-align: center;
        }

        .left-panel1 .img2 {
            /* position: relative; */
            height: auto;
            width: 150%;
            display: block;
            margin: 0px 10px;
        }

        .left-panel1 .img1 {
            height: auto;
            width: 50%;
            display: block;
            /* position: absolute; */
            /* margin: 7pc 0px 0px 0px; */
        }

        .btn-view-more1 {
            background-color: #e07a26;
            border: none;
            color: white;
            font-weight: 600;
            padding: 12px 24px;
            border-radius: 24px;
            cursor: pointer;
            margin-bottom: 40px;
            transition: background-color 0.3s ease;
        }

        .btn-view-more1:hover {
            background-color: #b55f1a;
        }

        .stacked-books1 {
            width: 150px;
            user-select: none;
        }

        /* Right panel grid */
        .right-panel1 {
            padding: 80px 40px;
            flex-grow: 1;
            /* border-radius: 0 120px 120px 0; */
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 30px;
        }

        .book-item1 {
            border-radius: 10px;
            background: #cb982b00;
            padding: 12px;
            display: flex;
            flex-direction: column;
            cursor: pointer;
        }

        .book-item1 img {
            border-radius: 10px;
            width: 100%;
            box-shadow: 0 2px 6px rgb(0 0 0 / 0.1);
            margin-bottom: 8px;
            object-fit: contain;
            height: 220px;
        }

        .book-title1 {
            font-weight: 700;
            font-size: 14px;
            margin-bottom: 4px;
        }

        .book-author1 {
            font-weight: 600;
            font-size: 12px;
            color: #444;
            margin-bottom: 6px;
        }

        .book-price1 {
            font-weight: 700;
            font-size: 13px;
            color: #000;
        }

        /* Responsive */
        @media (min-width:789px) and (max-width: 1024px) {


            .recommended {
                width: auto;
                border-radius: 0;
            }


            .recommended-section1 {
                max-width: 1000px;
            }

            .right-panel1 {
                /* grid-template-columns: repeat(3, 1fr); */
                gap: 20px;
            }

            .recommended1 {
                margin: auto;
                width: auto;
            }

            .left-panel h2 {
                margin-bottom: 30px;
                margin-top: 10vh;
            }

            .left-panel img {
                position: absolute;
                margin: 25rem 0px 0px 30px;
                height: auto;
                width: 150%;
            }
        }

        @media (max-width: 768px) {
            .recommended1 {
                margin: auto;
                width: auto;
                border-radius: 0;
            }

            .recommended-section1 {
                flex-direction: column;
                border-radius: 40px;
            }


            .left-panel1 {
                width: 100%;
                border-radius: 0;
                padding: 20px 0px 20px 0px;
            }

            .left-panel1 h2 {
                font-size: 25px
            }

            .left-panel1 h2 span {

                font-size: 28px;

            }

            .left-panel1 .img2,
            .left-panel1 .img1 {

                width: 40%;
                margin: 0px 0px 0px 2.5pc;
            }

            .right-panel1 {
                border-radius: 0 0 40px 40px;
                grid-template-columns: repeat(2, 1fr);
                padding: 20px 30px;
            }
        }

        @media (max-width: 480px) {
            .right-panel1 {
                grid-template-columns: 1fr;
                padding: 20px 20px;
            }
        }



        /* ===============================
   🌍 GLOBAL RESPONSIVE BREAKPOINTS
   =============================== */

        /* Small phones (300px - 480px) */
        @media (min-width: 300px) and (max-width: 480px) {
            .hero-text h1 {
                font-size: 1.5rem;
            }

            .hero-text p {
                font-size: 0.95rem;
            }

            .subscribe-section {
                flex-direction: column;
                text-align: center;
                padding: 40px 20px;
                height: 50vh;
            }

            .left-side img {
                margin: -12pc 0px 0px -10pc;
                width: 90%;

            }

            .hero1 {
                flex-direction: column;
                text-align: center;
                padding: 40px 20px;
            }

            .about-content,
            .about-content h2 {
                text-align: center;
            }

            .about-content p {
                padding: 20px;
            }

            .right-panel,
            .right-panel1 {
                grid-template-columns: 1fr;
            }

            .background {
                width: 100%;
                height: auto;
            }



        }


        @media (min-width:400px) and (max-width:480px) {
            .left-side img {
                margin: -15pc 0px 0px -12pc !important;
                width: 90%;

            }
        }

        /* Tablets (481px - 768px) */
        @media (min-width: 481px) and (max-width: 768px) {
            .hero-text h1 {
                font-size: 2rem;
            }

            .hero-text p {
                font-size: 1rem;
            }

            .hero-image img {
                width: 50%;
                margin: -12.8pc 0pc 0pc -13pc;

            }

            .hero-section {
                height: 20vh;
            }

            .hero-container {
                flex-wrap: nowrap;
                /* flex-direction: column; */
                gap: 20px;
                margin: 1pc 0px 0px 0pc;
            }

            .left-side img {
                margin: -13pc 0px 0px -10pc;
                width: 40%;
            }

            .right-panel,
            .right-panel1 {
                grid-template-columns: repeat(2, 1fr);
            }

            .background {
                width: 100%;
                height: auto;
            }
        }

        /* Small laptops (769px - 1024px) */
        @media (min-width: 769px) and (max-width: 1024px) {
            .left-side img {
                margin: -19pc 0px 0px -0pc;
                width: 40%;
            }

            .hero-text h1 {
                font-size: 2.5rem;
            }

            .hero-image img {
                width: 40%;
                margin: -9pc 0pc 0pc -12pc;

            }

            .hero-section {

                height: 30vh;

            }

            .hero-container {
                margin: 0pc 0px 0px 0pc;

            }

            .hero-text p {
                font-size: 1.1rem;
            }

            .right-panel {
                grid-template-columns: repeat(2, 1fr);
            }

            .left-panel {
                width: auto;
                margin: 0px 0px 0px 10pc;
            }

            .subscribe-section {
                display: flex;
                justify-content: space-between;
                flex-wrap: nowrap;
                flex-direction: row;
                text-align: center;
            }


        }

        /* Desktops (1025px - 1440px) */
        @media (min-width: 1025px) and (max-width: 1440px) {
            .hero-image img {
                width: 40%;
                margin: -18.5pc 0pc 0pc -18pc;
            }

            .left-panel {
                width: auto;
                
                /*margin-left: 30pc;*/

            }

            .hero-container {
                gap: 60px;
            }

            .right-panel {
                grid-template-columns: repeat(4, 1fr);
                flex-grow: 0;
                gap: 0;
            }

            .recommended-section1 {
                display: flex;
                max-width: 1300px;
            }
        }