* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        text-decoration: none;
        outline: none;
        font-family: 'Mooli', cursive;
    }

  html {
        font-size: 10px;
        scroll-behavior: smooth;
    }

    body::-webkit-scrollbar {
        width: 1.2rem;
    }

    body::-webkit-scrollbar-thumb {
        background-color: #32b0ce;
        border-radius: 5rem;
    }

    body::-webkit-scrollbar-track {
        background-color: #212121;
    }

    .body {
        overflow: hidden;
    }

    .loader-wrapper {
        width: 100%;
        height: 100%;
        background-color: #151515;
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 1s;
    }

    .loader {
        width: 100%;
        height: .5rem;
        background: radial-gradient(circle at center, #fff 0%, #151515 75%, #151515 100%);
        transform: scaleX(0);
        animation: loader 10s 0.5s;
    }

    @keyframes loader {
        0% {
            transform: scaleX(0);
            transform-origin: left;
            height: .5rem;
        }

        20% {
            transform: scaleX(1);
            transform-origin: left;
            height: .5rem;
        }

        25% {
            transform: scaleX(1);
            transform-origin: right;
            height: .5rem;
        }

        45% {
            transform: scaleX(0);
            transform-origin: right;
            height: .5rem;
        }

        50% {
            transform: scaleX(0);
            transform-origin: right;
            height: .5rem;
        }

        70% {
            transform: scaleX(1);
            transform-origin: right;
        }

        75% {
            transform: scaleX(1);
            transform-origin: left;
        }

        100% {
            transform: scaleX(0);
            transform-origin: left;
            height: 200%;
        }

    }

    .hide.loader-wrapper {
        opacity: 0;
        visibility: hidden;
    }


    .container {
        width: 100%;
        height: 100%;
        background-color: #212121;
        position: relative;
    }

    .main-container {
        opacity: 0;
        visibility: hidden;
        transition: all 1s;
    }

    .show.main-container {
        opacity: 1;
        visibility: visible;
    }

    .menu-icon {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
        width: 4rem;
        height: 2rem;
        position: fixed;
        top: 7rem;
        right: 15rem;
        z-index: 1000;
    }

    .line {
        height: .2rem;
        background-color: #32b0ce;
        transition: all .3s;
    }

    .line1,
    .line3 {
        width: 100%;
    }

    .navigate .line1 {
        width: 50%;
        transform:  translate(103%, .5rem) rotate(25deg);
    }

    .navigate .line2 {
        width: 100%;
    }

    .navigate .line3 {
        width: 50%;
        transform: translate(103%, -0.5rem) rotate(-25deg);
    }

    .menu-icon:hover .line1,
    .menu-icon:hover .line3 {
        width: 70%;
    }

    .navigate .menu-icon:hover .line1,
    .navigate .menu-icon:hover .line3 {
        width: 50%;
    }

    .navigate .menu-icon:hover .line2 {
        margin-left: 0;
    }

    .line2 {
        width: 70%;
    }

    .menu-icon:hover .line2 {
        margin-left: 30%;
    }

    .navigation {
        display: flex;
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        background-color: #191919;
        z-index: 100;
        opacity: 0;
        visibility: hidden;
        transition: all 1s;
    }

    .navigate .navigation {
        opacity: 1;
        visibility: visible;
    }

    .nav-left {
        width: 50%;
        height: 100%;
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        transition: all 1s;
    }

    .navigate .nav-left {
        opacity: 1;
        visibility: visible;
        transition: all 1s .7s;
    }

    .nav-left img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(100%);
        opacity: .5;
        transition: all .5s;
    }

    .nav-left:hover img {
        filter: grayscale(0);
        opacity: 1;
    }

    .nav-right {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background-color: #171717;
        transform: translateX(-200%);
    }

    .navigate .nav-right {
        transform: translateX(0);
        width: 50%;
        transition: all 1s;
    }

    .nav-items {
        display: flex;
        flex-direction: column;
    }
    
    .nav-items a:first-child {
        position: relative;
        padding-left: 6rem;
    }

    .nav-items a:first-child::before {
        position: absolute;
        content: "";
        width: 4.8rem;
        height: .2rem;
        background-color: #fff;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        transition: all .5s;
    }

    .nav-items a:first-child:hover::before {
        background-color: #32b0ce;
    }



    .nav-items a {
        font-size: 1.8rem;
        margin: 2rem 0;
        text-transform: uppercase;
        color: #fff;
        opacity: 0;
        visibility: hidden;
        transition: all .5s ease;
    }

    .navigate .nav-items a {
        opacity: 1;
        visibility: visible;
        transition: all .5s ease;
    }

    .navigate .nav-items a:nth-child(1) {
        transition-delay: 1s;
    }

    .navigate .nav-items a:nth-child(2) {
        transition-delay: 1.2s;
    }

    .navigate .nav-items a:nth-child(3) {
        transition-delay: 1.4s;
    }

    .navigate .nav-items a:nth-child(4) {
        transition-delay: 1.6s;
    }

    .navigate .nav-items a:nth-child(5) {
        transition-delay: 1.8s;
    }

    .nav-items a:hover {
        color: #32b0ce;
    }

    .nav-items a span {
        position: relative;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 3rem;
        font-weight: 900;
        margin-right: 1rem;
        letter-spacing: .2rem;
    }

    .nav-items a span::before {
        position: absolute;
        content: "";
        width: 0;
        height: .5rem;
        background-color: #32b0ce;
        bottom: 0;
        left: 0;
        transition: width .5s;
    }

    .nav-items a:hover span::before {
        width: 100%;
    }

    header {
        position: relative;
        width: 100%;
        height: 100vh;
    }

    .logo {
        position: absolute;
        top: 3rem;
        left: 25rem;
    }

    .logo span {
        font-family: 'Permanent Marker', cursive;
        font-size: 7rem;
        font-style: italic;
        color: #32b0ce;
        text-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.2);
    }

    .banner {
        position: absolute;
        right: 20rem;
        bottom: 30rem;
        text-align: center;
    }

    .banner h3 {
        font-family: 'Kaushan Script', cursive;
        font-size: 7rem;
        font-weight: 300;
        color: #fff;
        transform: translate(3rem, 11rem);
    }

    .banner h1 {
        font-size: 15rem;
        letter-spacing: 1rem;
        background-image: url(../images/text-bg-1.jpg);
        background-size: cover;
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        text-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.2);
    }

    .banner h1 span {
        font-size: 25rem;

    }

    .banner h4 {
        font-size: 1.8rem;
        font-weight: 300;
        text-transform: uppercase;
        letter-spacing: .7rem;
        color: #32b0ce;
    }

    .page-header {
        width: 100%;
        height: 40rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-size: cover;
    }

    .page-header .section-heading-sm {
        margin-top: 15rem;
    }

    .about {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        background-color: #202020;
        padding: 10rem 0 15rem 0;
    }

    .about-content {
        display: flex;
        width: 100%;
        height: 100%;
    }

    .about-content-left {
        width: 50%;
        text-align: right;
        padding-right: 6rem;
    }

    .section-num span {
        font-family: 'Cinzel', sans-serif;
        font-size: 25rem;
        font-weight: 900;
        background-image: url(../images/text-bg-2.jpg);
        background-size: cover;
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        text-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.2);
    }

    .main-btn {
        width: 28rem;
        height: 6rem;
        background-color: #32b0ce;
        border: none;
        border-radius: 3rem;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .main-btn a {
        width: 100%;
        height: 100%;
        font-size: 1.4rem;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: .3rem;
        color: #fff;
    }

    .main-btn:active {
        transform: translateY(.2rem);
    }

    .main-btn::before {
        content: "";
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, transparent, #fff,
        transparent);
        position: absolute;
        top: 0;
        left: -100%;
        transform: skewX(-30deg);
        transition: left 0.2s;
    }

    .main-btn:hover::before {
        left: 100%;
    }

    .about-content-right {
        width: 50%;
        padding: 8rem 0 0 6rem;
    }

    .section-heading-sm {
        font-size: 1.2rem;
        font-weight: 300;
        text-transform: uppercase;
        letter-spacing: .5rem;
        color: #32b0ce;
    }

    .section-heading-lg {
        margin: 3rem 0;
        font-size: 3rem;
        font-weight: 300;
        text-transform: uppercase;
        letter-spacing: .3rem;
        color: #fff;
    }

    .section-border {
        width: 50rem;
        height: .1rem;
        background-color: #333;
        margin-bottom: 3rem;
        position: relative;
    }

    .section-border::after {
        content: "";
        width: 7rem;
        height: .7rem;
        background-color: #32b0ce;
        position: absolute;
        top: 0;
        left: 0;
    }

    .about p {
        width: 50rem;
        font-size: 1.4rem;
        color: #fff;
        line-height: 3.5rem;
        margin-bottom: 4rem;
        margin-right: 1rem;
    }

    .books {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10rem 0 15rem 0;
    }

    .books-content {
        text-align: center;
    }

    .books-top {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10rem;
    }

    .books-header {
        text-align: right;
        margin-right: 10rem;
    }

    .books-header .section-border::after {
        right: 0;
        left: auto;
    }

    .books-top .section-num span {
        background-image: url(../images/text-bg-2.jpg);
        background-position: 50% 75%;
    }

    .books-list {
        display: flex;
    }

    .book {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 35rem;
        margin: 6rem;
        text-align: center;
    }

    .book img {
        width: 30rem;
        height: auto;
        filter: grayscale(100%);
        border-radius: 1rem;
        box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.4);
        cursor: pointer;
        transition: filter 1s;
    }

    .book img:hover {
        filter: grayscale(0);
    }

    .book-name {
        font-family: 'Kaushan Script', cursive;
        font-size: 1.4rem;
        text-transform: uppercase;
        color: #32b0ce;
        letter-spacing: .1rem;
        margin: 3rem 0;
    }

    .book-line {
        width: 10rem;
        height: .1rem;
        background-color: rgba(255, 255, 255, 0.1);
        margin-bottom: 3rem;
    }

    .book-author {
        font-size: 2rem;
        text-transform: uppercase;
        color: #fff;
        letter-spacing: .5rem;
    }

    .books-content .main-btn {
        margin-top: 10rem;
    }

    .testimonials {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 160vh;
        background-color: #202020;
        padding: 10rem 0 15rem 0;
        position: relative;
    }

    .testimonials-top {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 5rem;
    }

    .testimonials-top .section-num {
        margin-right: 10rem;
    }

    .testimonials-top .section-num span {
        background-image: url(../images/text-bg-4.jpg);
    }

    .feedback {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }

    .feedback-top {
        display: flex;
        align-items: center;
        padding-left: 7rem;
        margin-bottom: 5rem;
    }

    .feedback-top img {
        width: 20rem;
        height: 30rem;
        object-fit: cover;
        border-radius: 2rem;
        border: .8rem solid #202020;
        margin-right: 3rem;
        filter: grayscale(100%);
        cursor: pointer;
        transition: filter 1s;
        z-index: 1;
    }

    .feedback-top img:hover {
        filter: grayscale(0);
    }

    .feedback-heading {
        display: flex;
        width: 50%;
        text-align: center;
    }

    .feedback-heading h1 {
        font-size: 7rem;
        color: #fff;
    }

    .feedback-heading h1 span {
        font-family: 'Kaushan Script', cursive;
        font-size: 8rem;
        letter-spacing: .2rem;
        color: #32b0ce;
    }

    .quote-bg {
        width: 34rem;
        height: 40rem;
        background-color: #32b0ce;
        position: absolute;
        top: 26rem;
        left: 4.5rem;
        border-radius: 3rem;
    }

    .quote-bg::after {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        border-left: 4rem solid transparent;
        border-right: 4rem solid transparent;
        border-bottom: 4rem solid #32b0ce;
        bottom: -3rem;
        left: 1rem;
        transform: rotate(-45deg);
    }

    .quote {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 80rem;
        height: 28rem;
        padding: 3rem 0;
        background-color: #282828;
        border-radius: 3rem;
        position: absolute;
        top: 33rem;
        left: 8rem;
    }

    .quote::after {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        border-left: 4rem solid transparent;
        border-right: 4rem solid transparent;
        border-bottom: 4rem solid #282828;
        bottom: -3rem;
        left: 0;
        transform: rotate(-45deg);
    }

    .quote-header {
        display: flex;
        align-items: center;
        margin-top: 2rem;
    }

    .quote-header i {
        font-size: 8rem;
        color: #32b0ce;
    }

    .quote-header h1 {
        font-size: 2rem;
        text-transform: uppercase;
        color: #fff;
        letter-spacing: .2rem;
        padding: 0 10rem;
    }

    .quote-body p {
        width: 50rem;
        font-size: 1.2rem;
        color: #ccc;
        margin-bottom: 2.5rem;
        text-align: center;
        line-height: 2.5rem;
    }

    .quote-stars i {
        font-size: 1.8rem;
        color: #32b0ce;
        margin: 0 0.5rem;
    }

    .testimonials .main-btn {
        position: absolute;
        left: 50%;
        bottom: 3rem;
        transform: translateX(-50%);
    }

    footer {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 15rem 0 3rem 0;
    }

    .footer-header {
        text-align: center;
        margin-bottom: 15rem;
    }

    .footer-header .section-border::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-content {
        width: 60%;
        display: flex;
        margin-bottom: 10rem;
    }

    .social-media i,
    .social-media1 i,
    .main-social-media i {
        font-size: 4rem;
        color: #fff;
        margin-right: 3rem;
        cursor: pointer;
    }

    .main-social-media {
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 3rem;
        margin-bottom: 3rem;
    }


    .footer-form {
        width: 70%;
    }

    .footer-form form {
        display: flex;
        flex-direction: column;
    }

    .input-group {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .input-group input {
        width: 37rem;
        height: 6rem;
        margin-bottom: 3rem;
    }

    .input-group input,
    textarea {
        background-color: #1a1a1a;
        border: none;
        padding: 1rem;
        font-size: 1.4rem;
        color: #ccc;
        border-radius: .5rem;
    }

    textarea {
        height: 15rem;
        margin-bottom: 3rem;
        resize: none;
    }

    .footer-form button {
        width: 20rem;
        height: 5rem;
        background-color: #32b0ce;
        margin-left: auto;
        border: none;
        border-radius: .5rem;
        font-weight: bold;
        color: #fff;
        letter-spacing: .1rem;
        cursor: pointer;
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.1);
    }

    .footer-form button:active {
        transform: translateY(.2rem);
    }

    .footer-form .sent {
        background-color: #14b24b;
        color: #fff;   
    }

    .footer-form .error {
        background-color: #b21414;
        color: #fff;
    }

    .footer-bottom {
        width: 60%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .footer-bottom p {
        font-size: 1.8rem;
        color: #ccc;
    }

    .footer-bottom button {
        width: 15rem;
        height: 5rem;
        border: none;
        background: none;
    }

    .footer-bottom button a {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        font-size: 1.6rem;
        color: #ccc;
        text-transform: uppercase;
        letter-spacing: .2rem;
    }

    @media(max-width: 1600px) {
        .input-group input {
            width: 31rem;
        }
        
        .about p {
            padding: 4rem;
            margin-bottom: 0;
        }

        .book {
            margin: 6rem 1rem;
        }


    }

    

    @media(max-width: 1440px) {
        html {
            font-size: 58%;
        }
    }

    @media(max-width: 1368px) {
        html {
            font-size: 55%;
        }

        .banner {
            bottom: 25rem;
        }

        .testimonials {
            height: 100vh;
        }
    }

    @media(max-width: 1280px) {
        .about-content-left {
            width: 45%;
        }

        .about-content-right {
            width: 55%;
        }

        .books-list {
            width: 80%;
            margin: auto;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }

        .footer-content {
            width: 70%;
        }

        .footer-bottom {
            width: 70%;
        }
    }

    @media(max-width: 1024px) {
        html {
            font-size: 52%;
        }

        .logo {
            left: 10rem;
        }

        .banner {
            right: 50%;
            bottom: 50%;
            transform: translate(50%, 50%);
        }

        .menu-icon {
            right: 5rem;
        }

        .btn {
            position: absolute;
            top: 80%;
        }

        .footer-content {
            width: 70%;
        }

        .footer-bottom {
            width: 70%;
        }
    }

    @media(max-width: 820px) {
        html {
            font-size: 48%;
        }

        .banner {
            right: 50%;
            bottom: 50%;
            transform: translate(50%, 50%);
        }

        .about-content-left {
            width: 40%;
        }

        .about-content-right {
            width: 40%;
        }

        .section-heading-sm {
            font-size: 1.4rem;
        }

        .about p {
            font-size: 2rem;
            width: 45rem;
        }

        .books .books-header {
            width: 35rem;
        }

        .books-header .section-border {
            width: 35rem;
        }

        .testimonials {
            height: 100vh;
        }

        .input-group input {
            width: 28rem;
        }
    }

    @media(max-width: 768px) {
        .book {
            width: 32rem;
        }

        .book img {
            width: 27rem;
        }

        .testimonials {
            height: 115vh;
        }
        
        .input-group input {
            width: 26rem;
        }
    }

    @media(max-width: 430px) {
        html {
            font-size: 42%;
        }

        .nav-left {
            display: none;
        }

        .navigate .nav-right {
            width: 100%;
        }

        .nav-items {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 5rem;
        }

        .nav-items a,
        .nav-items span {
            font-size: 3rem;
        }

        .logo {
            left: 5rem;
        }

        .banner h3 {
            font-size: 5rem;
        }

        .banner h1 {
            font-size: 12rem;
        }

        .about {
            height: 80vh;
            padding-bottom: 25rem;
        }

        .about-content-left {
            padding-right: 0;
        }

        .about-content-right {
            padding: 4rem 0 0 6rem;
        }

        .about-content-right .section-border {
            width: 25rem;
        }

        .about-content-right p {
            position: absolute;
            top: 21.1%;
            left: 50%;
            transform: translateX(-50%);
            text-align: justify;
        }

        .about-content-right p:last-child {
            top: 26%;
            margin-bottom: 2rem;
        }

        .section-num span {
            font-size: 16rem;
        }

        .about .main-btn {
            position: absolute;
            top: 32%;
            left: 50%;
            transform: translateX(-50%);
        }

        .section-heading-lg {
            font-size: 2.5rem;
        }

        .books {
            margin-top: 40rem;
        }

        .books-header {
            margin-right: 3rem;
        }

        .books .section-num {
            padding-right: 5rem;
        }

        .books .section-border {
            width: 30rem;
            margin-left: auto;
        }

        .testimonials {
            height: 125vh;
        }

        .testimonials-top .section-num {
            margin-right: 5rem;
        }

        .testimonials .section-border {
            width: 29rem;
        }

        .feedback-top {
            flex-direction: column-reverse;
            padding-left: 0;
        }

        .feedback-heading {
             margin-bottom: 5rem;
        }

        .quote-bg {
            top: 50rem;
            left: 9rem;
            height: 50rem;
        }

        .quote {
            top: 58rem;
            left: 12rem;
            width: 40rem;
            height: 37rem;
        }

        .quote-header i {
            font-size: 5rem;
        }

        .quote-header h1 {
            padding: 0 5rem;
        }

        .quote-body p {
            width: 30rem;
            font-size: 1.4rem;
            margin-bottom: 3.5rem;
        }

        .btn {
            position: absolute;
            top: 90%;
        }

        footer {
            margin-top: 10rem;
        }
        
        .footer-content {
            flex-direction: column-reverse;
        }

        .footer-social,
        .footer-form {
            width: 100%;
        }

        .footer-social {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .social-media {
            width: 50%;
            display: flex;
            justify-content: center;
        }

        .social-media1 {
            width: 50%;
            display: flex;
            justify-content: center;
        }

        .input-group {
            width: 100%;
        }

        .input-group input {
            width: inherit;
        }

        .footer-form button {
            width: 100%;
            margin-bottom: 10rem;
        }
    }

    @media(max-width: 393px) {
        html {
            font-size: 38%;
        }
    }

    @media(max-width: 375px) {
        html {
            font-size: 36rem;
        }
    }