.banner,.footerNav,.main_header {
    align-items: center;
    width: 100%;
    display: flex
}

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

.headerLogin li a,.mainNAv li a,.themeBtn {
    font-size: 14px;
    color: #fff
}

*,.mainNAv li a,.para,.subHead,.subPara,.themeBtn {
    font-family: var(--f1)
}

.themeBtn.gradient:before,.themeBtn:hover:before {
    transform: translate(0)
}

.headerLogin li a,.mainNAv li a,.para,.subHead,.subPara,.themeBtn,.themeBtn:hover {
    color: #fff
}

.aboutLine,.bannerContent h1,.bookList li,.secSubHead,.sectionHead h2,.subPara {
    text-transform: capitalize
}

.counterMainBox,.slick-arrow,.testCard {
    box-shadow: 0 0 15px 1px #4444
}

.Contact,.banner,.contactImg,.joeyBox,.slick-dots li,.themeBtn {
    overflow: hidden
}

:root {
    --f1: "Open Sans", sans-serif;
    --f2: "Montserrat", sans-serif;
    --c1: #C9A34E;
    --c2: #0D1A2D;
    --c3: linear-gradient(90deg, rgba(201, 163, 78, 1) 0%, rgba(199, 174, 120, 1) 100%)
}

ul {
    padding: 0!important;
    margin: 0!important
}

::-moz-selection {
    background-color: #fff0
}

::selection {
    background-color: #fff0
}

html {
    scroll-behavior: smooth
}

body {
    overflow-x: hidden!important
}

.img__contain {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.img__cover {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: .5s
}

.banner {
    height: 100%;
    justify-content: center;
    position: relative;
    padding: 173.39px 0 140px
}

.banner__img {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -2;
    inset: 0
}

* {
    box-sizing: border-box;
    text-decoration: none!important;
    list-style-type: none
}

a {
    display: inline-block;
    text-decoration: none;
    color: #000;
    transition: .3s ease-in-out
}

a:hover {
    color: #333
}

dl,ol,ul {
    margin-bottom: 0;
    padding: 0
}

.footerNav li a:hover:before,img {
    width: 100%
}

.footerNav,.main_header {
    justify-content: space-between
}

.headerRight,.mainNAv {
    display: flex;
    align-items: center;
    gap: 40px
}

.mainNAv li a {
    display: flex;
    align-items: center;
    gap: 5px
}

.headerLogin,.headerLogin li a {
    align-items: center;
    display: flex
}

.mainNAv li a i {
    height: 14px
}

.headerLogin li {
    padding: 0 15px
}

.headerLogin li:first-child {
    border-right: 1px solid #fff;
    padding-left: 0
}

.headerLogin li a {
    gap: 5px;
    height: 25px
}

.headerLogin li a i {
    font-size: 17px;
    height: 20px
}

.headerLogin li:nth-child(2) {
    padding-right: 0
}

.themeBtn {
    background: 0 0;
    border: 1px solid #fff;
    padding: 10px 20px;
    border-radius: 50px;
    position: relative
}

.logo {
    width: 69px
}

.banner__img:before,.header {
    position: absolute;
    width: 100%
}

.header {
    padding: 10px 0;
    z-index: 1
}

.banner__img:before {
    height: 100%;
    content: '';
    background: #0d1a2de0;
    inset: 0
}

.themeBtn.gradient:before,.themeBtn:before {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--c3);
    inset: 0;
    content: '';
    z-index: -1;
    transition: .3s
}

.subHead {
    font-size: 22px
}

.bannerContent h1 {
    font-size: 60px;
    font-family: var(--f2);
    color: var(--c1);
    margin: 10px 0 0;
    padding: 10px 10px 10px 0;
    font-weight: 700;
    border: 10px solid var(--c1);
    border-left: 0;
    border-top: 0;
    position: relative;
    width: fit-content
}

.themeBtn.gradient,.themeBtn:hover {
    border-color: #fff0
}

.bannerContent h1:before {
    position: absolute;
    width: 220px;
    height: 10px;
    background: var(--c1);
    content: '';
    right: -10px;
    top: -10px
}

.subPara {
    margin: 20px 0 0;
    font-size: 23px;
    line-height: 41px
}

.para {
    font-size: 14px;
    line-height: 28px;
    margin: 10px 0 20px;
    font-weight: 200
}

.aboutLine,.counter,.joeyBox,.secSubHead,.sectionHead h2 span {
    color: var(--c1)
}

.counter,.counter-box p,.joeyBox {
    font-family: var(--f2);
    text-align: center
}

.bannerBtns {
    display: flex;
    align-items: center;
    gap: 14px
}

.themeBtn.gradient:hover:before {
    transform: translatex(100%)
}

.themeBtn.gradient:hover {
    color: #fff;
    border-color: #fff
}

.themeBtn:before {
    transform: translatex(-100%)
}

.bannerBook,.bannerCircle:after,.bannerCircle:before {
    width: 100%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.bannerBooks {
    position: relative;
    width: 100%;
    height: 510px
}

.bannerBook,.bannerCircle:after,.bannerCircle:before,.counter-box:before {
    height: 100%;
    position: absolute
}

.bannerBook {
    top: 50%
}

.bannerBook.--big {
    scale: 1.3;
    top: 60%
}

.bannerBook.--small {
    top: 60%
}

.bannerCircle {
    position: absolute;
    width: 68vh;
    height: 68vh;
    background: var(--c1);
    right: -130px;
    bottom: 90px;
    scale: 2;
    border-radius: 100%;
    z-index: -1
}

.about,.bookAboutImg,.contactImageMain,.counter-box {
    position: relative
}

.bannerCircle:before {
    content: '';
    top: 50%;
    background: var(--c1);
    border-radius: 100%;
    animation: 5s infinite fadeCircle2
}

.bannerCircle:after {
    content: '';
    top: 50%;
    background: var(--c1);
    border-radius: 100%;
    animation: 5s 2.5s infinite fadeCircle
}

@keyframes fadeCircle {
    0% {
        opacity: 1;
        scale: 1
    }

    100% {
        opacity: 0;
        scale: 1.03
    }
}

@keyframes fadeCircle2 {
    0% {
        opacity: 1;
        scale: 1
    }

    100% {
        opacity: 0;
        scale: 1.05
    }
}

.counter-box p {
    margin: 0;
    color: #000;
    font-size: 16px
}

.counter {
    display: block;
    font-size: 40px;
    font-weight: 600
}

.counterMainBox {
    padding: 10px;
    border-radius: 20px;
    background: #fff
}

.counterBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px;
    border: 2px solid var(--c1);
    border-radius: 10px
}

section#stats {
    margin-top: -70px
}

.counter-box:before {
    content: '';
    background: var(--c1);
    width: 5px;
    right: -71px;
    clip-path: polygon(50% 0%,0 100%,100% 100%)
}

.counter-box:last-child:before,.slick-dots li button:before {
    display: none
}

.about {
    padding: 70px 0
}

.aboutImg {
    border: 5px solid #fff;
    border-radius: 20px
}

.aboutImg img {
    border-radius: 10px
}

.about .Aboutbox {
    position: absolute;
    width: 47%;
    background: var(--c1);
    content: '';
    height: 116%;
    z-index: -1;
    top: -100px;
    left: -350px
}

.smallCircle:after,.smallCircle:before {
    width: 100%;
    height: 100%;
    content: '';
    inset: 0
}

.joeyBox {
    transform: rotate(-90deg) translate(0,-171px);
    width: 490px;
    height: 120px;
    background: var(--c2);
    border-radius: 0;
    font-size: 70px
}

.aboutIco,.slick-arrow {
    transform: translatey(-50%)
}

.smallCircle,.smallCircle:after,.smallCircle:before {
    position: absolute;
    background: var(--c1);
    border-radius: 100%
}

.smallCircle {
    width: 70px;
    aspect-ratio: 1/1
}

.smallCircle.--top {
    top: -20px;
    right: -20px
}

.smallCircle.--bottom {
    bottom: -20px;
    left: -20px
}

.smallCircle:before {
    animation: 3s infinite fadeCircle3
}

.smallCircle:after {
    animation: 3s 1.5s infinite fadeCircle4
}

@keyframes fadeCircle3 {
    0% {
        opacity: 1;
        scale: 1
    }

    100% {
        opacity: 0;
        scale: 1.9
    }
}

@keyframes fadeCircle4 {
    0% {
        opacity: 1;
        scale: 1
    }

    100% {
        opacity: 0;
        scale: 1.7
    }
}

.secSubHead {
    font-size: 16px;
    font-family: var(--f1)
}

.aboutLine,.bookList li,.boughtContent h5,.fiveForceBtn p,.sectionHead h2,.sectionHead h2 span {
    font-family: var(--f2)
}

.sectionHead h2 {
    font-size: 34px;
    font-weight: 600;
    color: #000;
    margin: 10px 0 0
}

.aboutContent .para {
    color: #000;
    margin: 10px 0
}

.aboutBtns,.footerCont li a,.socialIcons {
    display: flex;
    align-items: center;
    gap: 10px
}

.aboutBtn {
    background: #0d1a2d1c;
    padding: 13px 10px 13px 40px;
    border-radius: 10px;
    font-size: 14px;
    position: relative
}

.aboutContent {
    margin-left: 50px
}

.aboutIco {
    position: absolute;
    background: var(--c1);
    padding: 5px;
    border-radius: 100%;
    left: 7px;
    top: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(../images/sprite.png);
    background-position: 7.2% 246%;
}

.aboutBook,.bookBg {
    width: 100%;
    height: 100%
}

.aboutBook,.bookList {
    display: flex;
    align-items: center
}

.aboutBtn p {
    margin: 0;
    font-size: 12px;
    color: #000
}

.aboutLine {
    margin: 30px 0;
    font-size: 22px;
    padding-left: 26px;
    border-left: 10px solid var(--c1);
    font-style: italic;
    position: relative
}

.collenImg {
    position: absolute;
    bottom: -6px;
    right: -40px
}

.themeBtn.dark:hover {
    color: var(--c2);
    border-color: var(--c2)
}

.aboutBook {
    justify-content: center;
    position: relative;
    padding: 70px 0
}

.bookBg,.girlImg:before {
    position: absolute;
    z-index: -1
}

.bookBg {
    inset: 0
}

.sectionHead.--white h2 {
    color: #fff
}

.bookContent .para {
    margin: 20px 0;
    font-weight: 200
}

.bookList {
    margin: 0 0 30px!important
}

.fiveForceBtn,.mainFiveForceSec {
    display: flex;
    align-items: center
}

.bookList li {
    color: #fff;
    font-size: 23px
}

.bookList li:first-child {
    padding-right: 30px;
    border-right: 1px solid #ffffff69
}

.bookList li:nth-child(2) {
    padding-left: 30px
}

.girlImg {
    width: 89%;
    height: 400px;
    position: relative;
    margin-left: auto
}

.girlImg img {
    object-position: top;
    border-radius: 10px
}

.girlImg:before {
    width: 160px;
    height: 120px;
    background: var(--c1);
    content: '';
    top: -10px;
    left: -10px;
    border-radius: 10px
}

.fiveForceBook:after,.fiveForceBook:before {
    position: absolute;
    width: 430px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    aspect-ratio: 1/1;
    background: var(--c1);
    z-index: -1;
    content: ''
}

.booksImg {
    position: absolute;
    bottom: -50px;
    width: 280px;
    left: -50px
}

.mainFiveForceSec {
    justify-content: center;
    padding: 50px 0 0
}

.fiveForceBtn {
    gap: 20px;
    padding: 15px 20px;
    border-radius: 10px;
    background: #c9a34e42;
    color: #000;
    width: 240px;
    justify-content: center;
    cursor: pointer;
    transition: .3s
}

.blogs,.broughtUs,.testratting {
    display: flex;
    align-items: center
}

.fiveForceBtn p {
    margin: 0;
    font-size: 22px;
    font-weight: 400
}

.forceIcon {
    width: 50px;
    aspect-ratio: 1/1;
    background: #fff;
    padding: 7px;
    border-radius: 100%;
    background-image: url(../images/sprite.png);
}

.fiveForceBook {
    width: 40%;
    padding: 0 90px;
    position: relative
}

.fiveForceBtns {
    width: 30%
}

.fiveForceBook:before {
    border-radius: 100%
}

.fiveForceBook:after {
    transform-origin: center;
    border-radius: 100%;
    animation: 2s infinite fadeCircle5
}

@keyframes fadeCircle5 {
    0% {
        transform: translate(-50%,-50%) scale(1);
        transform-origin: center;
        opacity: 1
    }

    100% {
        transform: translate(-50%,-50%) scale(1.1);
        transform-origin: center;
        opacity: 0
    }
}

.fiveForceBtn.--bt1 {
    transform: translate(140px,-70px)
}

.fiveForceBtn.--bt2 {
    transform: translate(50px,-30px)
}

.fiveForceBtn.--bt3 {
    transform: translate(170px,20px)
}

.fiveForceBtn.--bt4 {
    transform: translate(-20px,-40px)
}

.fiveForceBtn.--bt5 {
    transform: translate(50px,0)
}

.fiveForceBtn:hover {
    background: var(--c1);
    color: #fff
}

.breakthrough,.fiveForce {
    padding: 70px 0
}

.blogs,.broughtUs {
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 70px 0;
    position: relative
}

.broughtBg {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    inset: 0
}

.mainBroughtCrds {
    padding: 80px 0 0
}

.broughtIcon {
    width: 80px;
    aspect-ratio: 1/1;
    margin: 0 0 10px
}

.boughtContent h5 {
    font-size: 20px;
    color: #fff;
    margin: 0 0 15px
}

.boughtContent p,.testContent h6 {
    line-height: 24px;
    font-family: var(--f1)
}

.boughtContent p {
    font-size: 14px;
    color: #fff;
    margin: 0
}

.topLine {
    position: absolute;
    width: 100%;
    height: 2px;
    background: #ffffff47;
    top: 423px;
}

.broghtCrd {
    position: relative;
    cursor: pointer
}

.broghtCrd:before {
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--c1);
    border-radius: 100%;
    content: '';
    left: 0;
    top: -44px
}

.broghtCrd:after {
    width: 0%;
    height: 2px;
    background: #fff;
    content: '';
    top: -34px;
    left: 0;
    position: absolute;
    z-index: -1;
    transition: .5s
}

.slick-dots li.slick-active button,.testimonials:before {
    background: var(--c1)
}

.broghtCrd:hover:after {
    width: 110%
}

.testratting {
    gap: 10px;
    color: #c1a50b;
    justify-content: center;
    margin: 0 0 10px!important
}

.blogTop,.slick-dots {
    display: flex;
    align-items: center
}

.testratting li {
    font-size: 22px
}

.testContent h6 {
    font-size: 18px;
    color: #000;
    text-align: center;
    font-weight: 400;
    width: 370px;
    margin: 0 auto
}

.testContent p {
    font-size: 14px;
    text-align: center;
    margin: 10px 0
}

.testName {
    text-align: center;
    font-size: 17px
}

.testCard {
    padding: 40px 30px;
    position: relative;
    background: #fff;
    height: 300px;
}

.testCollen,.testCorner {
    position: absolute;
    aspect-ratio: 1/1
}

.testCorner {
    width: 80px
}

.testCorner.--top {
    top: 10px;
    left: 10px
}

.testCorner.--bottom {
    transform: rotate(180deg);
    bottom: 10px;
    right: 10px
}

.testCollen {
    width: 30px
}

.testCollen.--top {
    top: 30px;
    left: 30px
}

.testCollen.--bottom {
    bottom: 30px;
    right: 30px
}

.depth-slider .slick-slide {
    opacity: .8;
    transform: scale(.8);
    transition: .4s;
    margin: 0
}

.depth-slider .slick-center {
    opacity: 1;
    transform: scale(1);
    z-index: 10
}

.blogBg,.testimonials:before {
    z-index: -1;
    position: absolute
}

.depth-slider img {
    width: 100%;
    border-radius: 12px
}

.blogsMainSlider,.testimonialsSlider {
    margin: 40px 0 0
}

.testimonialsSlider .slick-list {
    padding: 10px 0!important
}

.slick-dots {
    gap: 6px;
    justify-content: center
}

.slick-dots li button {
    width: 100%;
    height: 100%;
    background: #4444
}

.slick-dots li {
    width: 12px;
    height: 12px;
    border-radius: 100%;
    margin: 0
}

.slick-dots li.slick-active {
    scale: 1.3
}

.testimonials {
    padding: 70px 0 90px;
    position: relative
}

.testimonials:before {
    width: 47%;
    content: '';
    height: 116%;
    top: 0;
    left: -350px
}

.blogBg {
    inset: 0;
    width: 100%;
    height: 100%
}

.blogCrd {
    background: #fff;
    width: 100%
}

.blogImg {
    width: 100%;
    height: 270px
}

.blogContent {
    padding: 10px 25px
}

.blogTop {
    gap: 20px
}

.blogType,.readMoreBtn {
    display: flex;
    align-items: center
}

.blogType {
    gap: 9px;
    font-size: 14px;
    color: #444
}

.blogType p {
    margin: 0
}

.blogType i {
    height: 18px;
    color: #000
}

.blogHead {
    font-size: 21px;
    margin: 5px 0;
    color: #000;
    font-family: Montserrat;
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blogContent p {
    font-size: 14px;
    color: #000;
    font-weight: 300;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.readMoreBtn {
    gap: 4px;
    font-size: 17px;
    color: #000;
    margin: 10px 0 0
}

.Contact,.slick-arrow {
    display: flex;
    align-items: center
}

.readMoreBtn i {
    transform: rotate(-45deg);
    height: 16px;
    font-size: 15px;
    transition: .5s
}

.blogCrd:hover .readMoreBtn i {
    transform: none
}

.blogItem {
    margin: 0 10px
}

.slick-arrow {
    position: absolute;
    top: 50%;
    background: var(--c1);
    width: 50px;
    height: 50px;
    justify-content: center;
    font-size: 34px
}

.slick-next {
    right: -20px
}

.slick-prev {
    left: -10px
}

.slick-arrow:before {
    display: none!important
}

.breackthroContent p {
    font-size: 14px;
    margin: 20px 0;
    text-align: center
}

.breakImg {
    width: 100%;
    height: 410px
}

.Contact,.contactBg {
    height: 100%;
    width: 100%
}

.Contact {
    justify-content: center;
    padding: 70px 0 100px;
    position: relative
}

.contBox,.footer_main {
    display: flex;
    align-items: center
}

.contactBg {
    position: absolute;
    z-index: -1;
    inset: 0
}

.sectionHead.--white p {
    color: #fff;
    margin: 10px 0 0;
    font-size: 14px
}

.contactFeild label {
    display: block;
    font-size: 14px;
    font-family: var(--f2);
    color: #000;
    margin: 0 0 7px
}

.contactFeild :is(input,textarea) {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border-radius: 50px;
    border: 1px solid #4444
}

.contactFeild textarea {
    border-radius: 10px;
    height: 230px
}

.contactFeild {
    margin: 10px 0
}

.conatctBox {
    padding: 20px;
    background: #fff;
    border-radius: 20px;
    border-top: 7px solid var(--c1);
    border-bottom: 7px solid var(--c1);
    margin: 20px 0 0
}

.contactFeildBtn {
    position: relative;
    z-index: 1
}

.contactImg {
    width: 100%;
    height: 600px;
    border-radius: 10px
}

.contBox {
    justify-content: center;
    width: 57%;
    height: 100%;
    position: absolute;
    z-index: 1;
    padding: 50px 50px 0;
    bottom: -140px;
    right: -50px
}

.contBg {
    position: absolute;
    z-index: -1;
    inset: 0
}

.contInfo li a {
    display: flex;
    align-items: flex-start;
    gap: 10px
}

.contInfo li a span {
    display: block;
    font-size: 18px;
    color: var(--c1)
}

.info {
    font-size: 14px;
    color: #000
}

.contInfo li a i {
    font-size: 25px;
    position: relative
}

.contInfo li {
    margin: 0 0 30px
}

.contInfo li a i:after {
    width: 25px;
    height: 25px;
    content: '';
    position: absolute;
    background: #c9a34e70;
    border-radius: 100%;
    z-index: -1;
    right: -7px
}

.footer_main {
    justify-content: space-between;
    width: 100%;
    padding: 0 0 40px
}

.footerAbout,.footerCont {
    display: flex;
    align-items: center
}

.footerAbout {
    gap: 20px;
    width: 40%
}

.footerAbout p {
    font-size: 14px;
    width: 87%;
    margin: 0;
    padding-left: 20px;
    border-left: 6px solid var(--c1)
}

.fooLogo {
    width: 13%
}

.footerRight {
    width: 50%
}

.footerNav li a {
    font-family: var(--f1);
    text-transform: uppercase;
    color: #000;
    position: relative
}

.footerCont {
    justify-content: space-between;
    margin: 15px 0 0!important
}

.copy_innerMain,.footerIcon {
    align-items: center;
    display: flex
}

.footerCont li a span {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #000
}

.footerCVont {
    font-size: 14px
}

.footerIcon {
    width: 40px;
    height: 40px;
    justify-content: center;
    font-size: 20px;
    border: 1px solid #000;
    border-radius: 5px;
    transition: .3s
}

.footerIcon i {
    height: 24px
}

.copyMain {
    border-top: 1px solid #4444;
    padding: 40px 0 0
}

.footerCont li a:hover .footerIcon,.socialIcons li a:hover {
    background: var(--c1);
    border-color: #fff0
}

.copy_innerMain {
    justify-content: space-between;
    width: 1005
}

.copyCon {
    font-size: 14px;
    font-family: var(--f1);
    color: #000;
    margin: 0
}

.socialIcons li a {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #000;
    border-radius: 5px;
    padding: 6px
}

.socialIcons li a:hover img {
    filter: invert(1)
}

.footer {
    padding: 50px 0 25px
}

.footerCont li a:hover .footerIcon {
    color: #fff
}

.footerNav li a:before {
    position: absolute;
    width: 0%;
    height: 1px;
    background: #000;
    content: '';
    bottom: 0;
    transition: .3s
}

.banner.--inner {
    padding: 113px 0
}

.InnerbannerBooks {
    width: 550px;
    margin: 40px 0 0
}

.bookcrdImg {
    width: 100%;
    height: 320px;
    padding: 30px;
    border: 1px solid var(--c1)
}

.bookCrd {
    width: 100%;
    margin: 0 0 20px
}

.cardConetent {
    text-align: center;
    padding: 20px 0;
    background: var(--c2);
    transition: 300ms all
}

.cardConetent p {
    font-size: 14px;
    margin: 0 0 10px;
    color: #fff
}

.cardConetent h6 {
    font-size: 18px;
    color: #fff;
    font-family: var(--f2)
}

.ratting {
    display: flex;
    justify-content: center;
    margin: 5px 0!important;
    gap: 8px
}

.ratting li {
    font-size: 18px;
    color: var(--c1);
    transition: 300ms all
}

.price {
    font-size: 20px;
    margin: 0 0 5px;
    color: #fff
}

.bookcrdBtn {
    font-size: 14px;
    color: #fff;
    text-decoration: underline!important
}

.bookCrd:hover .cardConetent {
    background: var(--c1)
}

.bookCrd:hover .ratting li {
    color: #D77118
}

.ourBooks {
    padding: 70px 0
}

.qtyBox {
    display: inline-flex;
    align-items: center;
    margin: 10px 0 0
}

.qtyBox .label {
    font-size: 14px;
    margin-right: 15px
}

.controls {
    display: flex;
    align-items: center;
    gap: 8px
}

.qty-btn {
    background: #fff0;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    padding: 0 5px
}

.qty {
    font-size: 16px;
    min-width: 12px;
    text-align: center
}

.detailCont {
    font-size: 14px;
    margin: 10px 0
}

.priceDetail {
    font-size: 30px;
    font-family: var(--f1);
    font-weight: 700;
    color: var(--c1);
    display: flex;
    align-items: center;
    gap: 10px
}

.priceDetail span {
    font-size: 16px;
    color: #444;
    font-weight: 700;
    text-decoration: line-through!important
}

.detailContent .ratting {
    justify-content: flex-start;
    margin: 0!important
}

.detailContent h2 {
    font-size: 42px;
    font-family: 'Montserrat';
    font-weight: 600;
    color: #000;
    margin: 0 0 7px
}

.detailContent h2 span {
    font-family: 'Montserrat';
    font-weight: 600;
    color: var(--c1)
}

.detailTags {
    display: flex;
    align-items: center;
    gap: 60px;
    margin: 30px 0 60px
}

.detailTag {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-family: var(--f2)
}

.detailTag span {
    font-weight: 700;
    color: #000;
    font-family: var(--f2)
}

.bookSlideImg {
    width: 100%;
    height: 490px;
    padding: 50px;
    background: #c9a34e5e
}

.innerbookSlideImg {
    padding: 18px;
    width: 100%;
    height: 140px;
    background: #c9a34e5c
}

.InnerbookSlider {
    margin: 30px 0 0
}

.formFeild :is(input,textarea) {
    width: 100%;
    padding: 10px;
    border-radius: 50px;
    font-size: 14px;
    border: 1px solid #0000008f
}

.formFeild {
    margin: 9px 0
}

.formFeild textarea {
    height: 200px;
    border-radius: 30px
}

.reviewBox {
    padding: 40px;
    border: 1px solid #00000080;
    border-radius: 30px;
    margin: 50px 0
}

.reviewHead {
    font-size: 20px;
    margin: 0 0 10px;
    font-family: var(--f2);
    font-weight: 600;
    color: #000
}

.reviewBot .ratting {
    justify-content: flex-start
}

.reviewBot {
    margin: 20px 0 0
}

.bookDetail {
    padding: 70px 0
}

.cartCrd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 0;
    border-bottom: 1px solid var(--c1)
}

.cartLeft {
    display: flex;
    align-items: center;
    gap: 20px
}

.cartImg {
    width: 100px;
    height: 100px;
    padding: 10px;
    background: #c9a34e70
}

.cartLeftContent h5 {
    font-size: 18px;
    font-family: var(--f2);
    font-weight: 600;
    color: #000;
    margin: 0 0 6px
}

.cartLeftContent h5 span {
    color: var(--c1)
}

.cartPrice {
    font-size: 16px;
    color: var(--c1);
    font-weight: 500
}

.cartPrice span {
    display: block;
    font-size: 12px;
    color: #444;
    text-decoration: line-through!important
}

.cartFeild input {
    width: 100%;
    padding: 7px 10px;
    font-size: 14px;
    border-radius: 50px;
    outline: none;
    border: 1px solid #4444
}

.cartRight {
    width: 20%
}

.formBot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 30px 0 0
}

.formBot .qty-btn {
    width: 20px;
    height: 20px;
    background: var(--c1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    font-size: 14px
}

.cartmainPrice {
    font-size: 19px;
    font-family: var(--f2);
    font-weight: 600
}

.deleteBtn {
    background: var(--c1);
    width: 25px;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    color: #fff
}

.deleteBtn i {
    height: 21px
}

.promoTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 0
}

.promoRight {
    display: flex;
    align-items: center;
    gap: 15px
}

.promoRight h4 {
    font-size: 20px;
    color: #000;
    font-weight: 500;
    font-family: 'Montserrat'
}

.promoRight h5 {
    font-size: 18px;
    color: var(--c1);
    font-weight: 600
}

.promoFeild input {
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 50px;
    border: 1px solid #4444
}

.promoleft {
    display: flex;
    align-items: center;
    gap: 80px
}

.promoleft h4 {
    font-size: 18px;
    font-family: 'Montserrat';
    color: #000
}

.promoleft h5 {
    font-size: 21px;
    font-family: 'Open Sans';
    color: #000;
    font-weight: 700
}

.promobotRight {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 40%
}

.promobot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0
}

.promobotRight p {
    font-size: 15px;
    width: 64%
}

.cartCodePromo {
    padding: 20px 0 0
}

.carts {
    padding: 70px 0
}

.bannerBooks.about .bannerBook.--big {
    padding-left: 120px
}

p.para.black {
    color: #000
}

ul.bookList.black li {
    color: #000
}

a.themeBtn.black {
    color: #000;
    box-shadow: 0 0 0 1px #000
}

a.themeBtn.black:hover {
    color: #fff;
    box-shadow: none
}

a.themeBtn.gradient.black:hover {
    box-shadow: 0 0 0 1px #000;
    color: #000
}

a.themeBtn.gradient.black {
    box-shadow: none;
    color: #fff
}

section.banner.inner {
    padding: 110px 0 0
}

.book_img {
    width: 100%;
    height: 300px;
    overflow: hidden;
    margin: 0 auto;
    border: 1px solid var(--c1);
    padding: 30px
}

.book_img img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.book_card {
    text-align: center;
    width: 100%;
    margin: 0 auto 35px
}

.book_cont {
    background: var(--c2);
    color: #Fff;
    padding: 26px;
    transition: 250ms
}

.book_cont h5 {
    font-family: var(--f1);
    font-size: 17px;
    font-weight: 300;
    margin: 0 0 10px
}

.book_cont h3 {
    font-family: var(--f2);
    text-transform: capitalize;
    font-size: 24px;
    font-weight: 500;
    margin: 0 0 8px
}

.book_cont h4 {
    font-size: 16px;
    font-family: var(--f1);
    font-weight: 500;
    margin: 0 0 10px
}

a.themebtn.book {
    color: #fff;
    text-decoration: underline!important;
    font-weight: 500
}

.book_card:hover .book_cont {
    background: var(--c1)
}

.book_card:hover .book_img {
    border: 2px solid var(--c1)
}

section.Books_sect {
    padding: 70px 0
}

.book_cont ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 8px 0px!important
}

.book_cont ul li {
    color: var(--c1);
    font-size: 16px
}

.book_card:hover .book_cont ul li {
    color: #D77118
}

.blogContent.grey {
    background: #F7F8FA
}

section.blogs_detail {
    padding: 70px 0
}

.blogs_cont h5 {
    background: #faf6ed;
    width: fit-content;
    padding: 4px 8px;
    border-radius: 30px;
    font-family: var(--f1);
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 5px
}

.blogs_cont h3 {
    font-family: var(--f1);
    font-size: 40px;
    font-weight: 600;
    margin: 0 0 12px
}

.blogs_cont h4 {
    font-size: 16px;
    margin: 0 0 12px;
    font-family: var(--f1);
    display: flex;
    align-items: center;
    gap: 6px
}

.blogs_cont h4 span {
    font-size: 20px
}

.blogs_cont p {
    font-family: var(--f1);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6
}

.blog_img {
    position: relative
}

.blog_img::before {
    position: absolute;
    content: '';
    width: 400px;
    height: 350px;
    border: 2px solid var(--c1);
    top: -35px;
    left: -35px;
    z-index: -1
}

.contact_img {
    width: 85%;
    height: 500px;
    overflow: hidden;
    margin: 0 auto
}

.contact_img img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.contact_main label {
    display: block;
    font-family: var(--f1);
    text-transform: capitalize;
    font-weight: 600;
    font-size: 15px;
    margin: 0 0 8px
}

.contact_main input {
    width: 100%;
    padding: 10px;
    border: none;
    margin: 0 0 25px;
    border-radius: 20px;
    box-shadow: 0 0 0 2px #8080805e;
    outline: none;
    font-family: var(--f1);
    font-size: 15px
}

.contact_main input::placeholder {
    font-family: var(--f1);
    font-size: 15px;
    text-transform: capitalize;
    font-weight: 500;
    color: #c1c0c0
}

.contact_main textarea {
    width: 100%;
    padding: 10px;
    border: none;
    margin: 0 0 25px;
    border-radius: 5px;
    box-shadow: 0 0 0 2px #8080805e;
    outline: none;
    font-family: var(--f1);
    font-size: 15px;
    height: 180px
}

.contact_main textarea::placeholder {
    font-family: var(--f1);
    font-size: 15px;
    text-transform: capitalize;
    font-weight: 500;
    color: #c1c0c0
}

.contact_cont h5 {
    color: var(--c1);
    font-family: var(--f1);
    font-size: 20px
}

.contact_cont h3 {
    font-size: 50px;
    font-weight: 600;
    font-family: var(--f1);
    margin: 0 0 8px
}

.contact_cont p {
    font-family: var(--f1);
    font-weight: 500;
    font-size: 14px;
    width: 85%
}

.contact_cont h3 span {
    color: var(--c1)
}

.main_form {
    background: #fff;
    padding: 20px 10px;
    border-radius: 22px;
    box-shadow: 0 8px 0 0 var(--c1)
}

section.contact_sect {
    padding: 70px 0
}

section.contact_sect .themebtn {
    background: var(--c1);
    border: none;
    padding: 11px 14px;
    border-radius: 50px;
    font-family: var(--f1);
    font-size: 16px;
    color: #fff;
    text-transform: capitalize
}

.Aboutbox.--alt {
    height: 100%;
    top: 0
}

.bookList.black li:first-child {
    border-color: #000
}

.checkOutFeild input {
    width: 100%;
    padding: 10px;
    border-radius: 50px;
    border: 1px solid #4444;
    font-size: 14px
}

.checkOutFeild {
    margin: 10px 0
}

.checkout h5 {
    font-size: 40px;
    margin: 0 0 20px;
    font-family: var(--f2);
    color: #000;
    font-weight: 600
}

section.order h5 {
    font-size: 40px;
    font-weight: 600;
    color: #000;
    font-family: 'Montserrat'
}

.orderList {
    display: flex;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid var(--c1);
    padding: 30px 0
}

.orderList p {
    margin: 0;
    font-size: 15px;
    width: 50%
}

.radioFeild {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0
}

.radioFeild label {
    font-size: 14px
}

.checkout {
    padding: 70px 0
}

.order {
    padding: 70px 0 70px;
    background: #c9a34e1c
}

.orderBtn {
    display: flex;
    align-items: center;
    justify-content: end;
    margin: 30px 0 0
}

.logBox {
    text-align: -webkit-center;
    padding: 30px;
    border-radius: 20px;
    background: #c9a34e42;
    margin: 0 0 40px
}

.logBox h4 {
    margin: 0 0 20px;
    font-size: 40px;
    font-family: var(--f2);
    font-weight: 700;
    color: #000
}

.logFeild input {
    width: 100%;
    padding: 10px;
    border: 1px solid #313131;
    border-radius: 50px;
    font-size: 14px;
    background: #fff0;
    color: #fff
}

.logFeild {
    margin: 20px 0
}

.logFeildBtn button {
    width: 100%
}

.logFeildline {
    margin: 20px 0 0
}

.logFeildline p {
    font-size: 14px;
    color: #000
}

.logFeildline p a {
    font-weight: 800
}

.logIn {
    padding: 70px 0
}

.forceIcon.--1 {
    background-position: 150.2% 16.1%;
    background-size: 1167%;
}

.forceIcon.--2 {
    background-position: 163.2% 16.1%;
    background-size: 1167%;
}

.forceIcon.--3 {
    background-position: 175% 16.1%;
    background-size: 1167%;
}

.forceIcon.--4 {
    background-position: 188.3% 18.1%;
    background-size: 1167%;
}

.forceIcon.--5 {
    background-position: 200.3% 16.1%;
    background-size: 1167%;
}
.aboutBtn:nth-child(2) .aboutIco {
    background-position: 14.9% 246%;
}

.aboutBtn:nth-child(3) .aboutIco {
    background-position: 22.3% 247%;
}
.broughtIcon.--1 {
    background-position: 24.5% 401%;
    background-size: 953%;
}
.broughtIcon {
    background-image: url(../images/sprite.png);
}
.broughtIcon.--2 {
    background-position: 43.5% 401%;
    background-size: 953%;
}

.broughtIcon.--3 {
    background-position: 7.5% 406%;
    background-size: 953%;
}

.broughtIcon.--4 {
    background-position: 62.5% 402%;
    background-size: 953%;
}
.testCollen {background-image: url('../images/sprite.png');}
.testCollen.--bottom {
    background-position: 135.1% 21%;
    background-size: 2750%;
}

.testCollen.--top {
    background-position: 135.1% 21%;
    background-size: 2750%;
}

.testCorner {
    background-image: url(../images/sprite.png);
}
.testCorner.--top {
    background-position: 197% 264%;
    background-size: 798%;
}

.testCorner.--bottom {
    background-position: 197% 264%;
    background-size: 798%;
}