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

.c-card .details,
.c-card .details h4,
.default-btn2,
.punch {
    text-align: center
}

.default-btn2:hover {
    color: #fff !important
}

.services-links li a,
a,
a:focus,
a:hover {
    text-decoration: none
}

body,
html {
    overflow-x: clip;
    scroll-behavior: smooth
}

body,
p {
    color: var(--optionalColor);
    font-size: var(--fontSize)
}

.book-banner-area .main-banner-content .text p,
.book-banner-area .main-banner-content p,
a,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--blackColor)
}

:root {
    --mainfontFamily: "Montserrat", sans-serif;
    --optionalfontFamily: "Nunito", sans-serif;
    --mainColor: #003d7f;
    --optionalColor: #6b6b84;
    --whiteColor: #ffffff;
    --blackColor: #031521;
    --fontSize: 16px;
    --transition: 0.5s
}

.logo img {
    max-width: 226px
}

@media only screen and (max-width:1380px) {
    .logo img {
        max-width: 182px
    }
}

#banner-vid,
.video-overlay {
    top: 0;
    height: 100%;
    z-index: 1;
    width: 100%
}

#banner-vid,
.cta-img-inner img,
.video-overlay {
    position: absolute;
    left: 0
}

#banner-vid,
.book-item .image img {
    object-fit: cover
}

.book-item .image img {
    max-height: 460px;
    margin-bottom: 8px
}

.video-overlay {
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(4px)
}

.banner-image img {
    filter: drop-shadow(14px 8px 6px #000)
}

.partner img {
    max-width: 100px
}

.main-color {
    color: var(--mainColor) !important
}

.what-we-do .section-title h2 {
    padding-bottom: 50px
}

.what-we-do-main-inner-box {
    bottom: -50px;
    background: linear-gradient(to bottom, #003d7f, #fff, #fcfcfc, #003d7f);
    z-index: 2;
    padding: 30px 20px 30px 30px;
    opacity: 1;
    transition: .5s;
    border-radius: 30px
}

.bg-grad {
    background-image: linear-gradient(to bottom, #fff, #fff, #fff, #f9f9f9bf), url(../img/gradbg.webp);
    background-position: bottom;
    background-size: cover
}

.what-we-do-main-inner-box h3,
.what-we-do-main-inner-box h5 {
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    padding: 15px 0 0
}

.what-we-do-main-inner-box p {
    color: #ffff;
    font-size: 16px;
    line-height: 24px;
    padding: 15px 0
}

.what-we-do-main-inner-box a {
    background: #ffff;
    padding: 15px 22px;
    font-size: 12px;
    color: #000;
    font-weight: 700;
    text-decoration: none
}

.default-btn span,
.default-btn2,
.default-btn2 span {
    display: inline-block;
    color: var(--whiteColor);
    opacity: 1
}

.what-we-do-main-inner-box img {
    width: unset !important
}

.what-we-rp {
    padding: 0 30px 0 180px
}

.book-area {
    background: #f5f5f5
}

.cta-sec {
    background: center/cover no-repeat #003d7f;
    padding: 80px 0 50px
}

.cta-img-inner img {
    margin: auto;
    top: -108px;
    bottom: 0;
    right: 0;
    max-height: 381px
}

.c-pb {
    padding-bottom: 150px
}

.default-btn2 {
    position: relative;
    overflow: hidden;
    z-index: 1;
    background-color: #00000008;
    transition: var(--transition);
    border-radius: 4px;
    font-weight: 700;
    padding: 9px 32px;
    border: 1px solid var(--mainColor)
}

.default-btn span,
.default-btn2 span {
    position: absolute;
    width: 0;
    height: 0;
    border-radius: 30px;
    background-color: var(--blackColor);
    transition: width .5s ease-in-out, height .5s ease-in-out;
    transform: translate(-50%, -50%);
    z-index: -1
}

.default-btn2:hover span,
.default-btn:hover span {
    width: 225%;
    height: 562.5px
}

.color1 {
    color: #1bbc9b
}

.color2 {
    color: #c0392b
}

.c-card {
    color: #013243;
    position: absolute;
    top: 50%;
    left: 64%;
    width: 309px;
    height: 440px;
    background: #e0e1dc;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) perspective(2000px);
    box-shadow: inset 300px 0 50px rgba(0, 0, 0, .5), 20px 0 60px rgba(0, 0, 0, .5);
    transition: 1s
}

.c-card:hover {
    transform: translate(-50%, -50%) perspective(2000px) rotate(15deg) scale(1.2);
    box-shadow: inset 20px 0 50px rgba(0, 0, 0, .5), 0 10px 100px rgba(0, 0, 0, .5)
}

.c-card:before {
    content: "";
    position: absolute;
    top: -5px;
    left: 0;
    width: 100%;
    height: 5px;
    background: #bac1ba;
    transform-origin: bottom;
    transform: skewX(-45deg)
}

.c-card:after {
    content: "";
    position: absolute;
    top: 0;
    right: -5px;
    width: 5px;
    height: 100%;
    background: #92a29c;
    transform-origin: left;
    transform: skewY(-45deg)
}

.c-card .imgBox {
    width: 100%;
    height: 100%;
    position: relative;
    transform-origin: left;
    transition: .7s
}

.c-card .bark {
    position: absolute;
    background: #e0e1dc;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: .7s
}

.c-card .imgBox img {
    min-width: 309px;
    max-height: 440px;
    object-fit: fill
}

.c-card:hover .imgBox {
    transform: rotateY(-135deg)
}

.c-card:hover .bark {
    opacity: 1;
    transition: .6s;
    box-shadow: 300px 200px 100px rgba(0, 0, 0, .4) inset
}

.c-card .details {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    padding: 0 0 0 52px;
    z-index: -1;
    margin-top: 70px
}

.c-card .details img {
    max-width: 150px;
    padding-bottom: 20px
}

.c-card .details p {
    font-size: 15px;
    line-height: 5px;
    padding-left: 10px
}

.inner-banner .banner-image,
.text-right {
    text-align: right
}

.accordion-flush .accordion-item:first-child {
    border-top: 0
}

.accordion-flush .accordion-item {
    border-right: 0;
    border-left: 0;
    border-radius: 0
}

.accordion-button::after {
    display: flex;
    width: 22px;
    height: 22px;
    margin-right: 10px !important;
    background-size: 1.25rem !important;
    transition: transform .2s ease-in-out !important;
    color: #e4573d;
    font-size: 16px;
    order: -1;
    position: unset !important;
    margin-left: 0;
    justify-content: center;
    align-items: center;
    filter: invert(20%) sepia(90%) saturate(2000%) hue-rotate(-20deg) brightness(105%) contrast(100%)
}

.accordion-button {
    font-size: 20px;
    font-weight: 700;
    padding: 15px 0;
    display: flex;
    align-items: center;
    position: relative;
    text-align: left;
    background: 0 0 !important;
    justify-content: flex-start;
    border: none !important;
    box-shadow: none !important
}

.banner-head h2 {
    color: #e4573d;
    font-size: 45px;
    font-weight: 700;
    line-height: 50px;
    padding: 15px 0 0
}

.services-sec-box {
    direction: ltr;
    display: flex;
    align-items: center;
    flex-flow: row-reverse;
    padding: 40px 10px 50px;
    min-height: 300px;
    border: 1px dashed #003d7f
}

.services-sec-box img {
    margin-left: 15px;
    max-width: 150px
}

.services-sec-box-inner {
    padding: 0 0 0 25px
}

.services-sec-box-inner h3,
.services-sec-box-inner h4 {
    color: #003d7f;
    font-size: 23px;
    font-weight: 700;
    padding: 0 0 15px
}

.services-sec-box-inner p {
    font-size: 14px;
    line-height: 20px
}

.we-offer {
    background: #f3e8eb38
}

.testimonial-area {
    background: linear-gradient(to right, #ffffffcf, #fff, #ffffffd1);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed
}

.cta-head-2 span {
    color: #ffff;
    font-size: 20px
}

.cta-head-2 strong.h3 {
    color: #ffff;
    font-size: 40px;
    font-weight: 700;
    line-height: 55px;
    padding: 25px 0;
    display: block
}

.contact-ul>li>a>i,
.cta-se-2,
.ghost-service:hover {
    background: var(--mainColor)
}

.contact-form {
    background: linear-gradient(135deg, #fff 0, #003d7f 100%);
    padding: 35px
}

.contact-area {
    background: url(../img/banner-c.webp) center/cover no-repeat
}

.clock-box,
.watch-parent {
    background: #e4573d;
    padding: 25px
}

.clock-box p,
.watch-parent p {
    color: #ffff;
    line-height: 22px;
    padding: 0 0 10px;
    font-size: 14px
}

.clock-box p span,
.watch-parent p span {
    font-weight: 700
}

.clock {
    width: 150px;
    height: 150px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 5px 0 #888;
    box-shadow: inset 0 0 20px 0 #888;
    border-radius: 100%;
    perspective: 100px;
    display: inline-block;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: #fff;
    border: 1px groove #0000004f
}

.clock .apm,
.needle {
    position: absolute;
    top: 50%
}

.time-number,
.time-number li {
    left: 50%;
    top: 0;
    position: absolute
}

.clock .apm {
    left: 60%;
    transform: translateY(-50%);
    font-size: 10px;
    color: #000 !important
}

.needle {
    width: 50%;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: translateY(-50%) rotateZ(-90deg);
    -ms-transform: translateY(-50%) rotateZ(-90deg);
    transform: translateY(-50%) rotateZ(-90deg);
    left: 50%
}

.needle .hours,
.needle .minutes,
.needle .seconds {
    display: block;
    position: relative;
    -webkit-transform: rotateZ(0);
    -ms-transform: rotateZ(0);
    transform: rotateZ(0);
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center
}

.needle .hours:empty::before,
.needle .minutes:empty::before,
.needle .seconds:empty::before {
    content: "";
    display: block;
    height: 2px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%)
}

.needle .seconds:empty::after {
    content: "";
    width: 10px;
    height: 10px;
    display: block;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: -5px;
    transform: translateY(-50%)
}

.needle .hours:empty::before {
    width: 50%;
    background-color: #000
}

.needle .hours:empty::after,
.needle .minutes:empty::after {
    background-color: Tomato
}

.needle .minutes:empty::before {
    width: 70%;
    background-color: #000
}

.needle .seconds:empty::before {
    width: 90%;
    background-color: #000
}

.clock.ui-banana-yellow .hours::before,
.clock.ui-banana-yellow .minutes::before,
.clock.ui-banana-yellow .seconds::after,
.clock.ui-banana-yellow .seconds::before,
.needle .seconds:empty::after {
    background-color: #000
}

.clock-ht h4,
.clock.ui-awesome .hours::before,
.clock.ui-awesome .minutes::before,
.clock.ui-awesome .seconds::after,
.clock.ui-awesome .seconds::before,
.clock.ui-black .hours::before,
.clock.ui-black .minutes::before,
.clock.ui-black .seconds::after,
.clock.ui-black .seconds::before,
.clock.ui-dodgerblue .hours::before,
.clock.ui-dodgerblue .minutes::before,
.clock.ui-dodgerblue .seconds::after,
.clock.ui-dodgerblue .seconds::before,
.clock.ui-tomato .hours::before,
.clock.ui-tomato .minutes::before,
.clock.ui-tomato .seconds::after,
.clock.ui-tomato .seconds::before {
    background-color: #fff
}

.time-number {
    list-style-type: none;
    margin: 0;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 50%
}

.time-number li {
    display: block;
    -webkit-transform-origin: bottom center;
    -moz-transform-origin: bottom center;
    -ms-transform-origin: bottom center;
    -o-transform-origin: bottom center;
    transform-origin: bottom center;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 0
}

.time-number li:first-child {
    -webkit-transform: translateX(-50%) rotateZ(30deg);
    -ms-transform: translateX(-50%) rotateZ(30deg);
    transform: translateX(-50%) rotateZ(30deg)
}

.time-number li:first-child>span {
    -webkit-transform: rotateZ(-30deg);
    -ms-transform: rotateZ(-30deg);
    transform: rotateZ(-30deg)
}

.time-number li:nth-child(2) {
    -webkit-transform: translateX(-50%) rotateZ(60deg);
    -ms-transform: translateX(-50%) rotateZ(60deg);
    transform: translateX(-50%) rotateZ(60deg)
}

.time-number li:nth-child(2)>span {
    -webkit-transform: rotateZ(-60deg);
    -ms-transform: rotateZ(-60deg);
    transform: rotateZ(-60deg)
}

.time-number li:nth-child(3) {
    -webkit-transform: translateX(-50%) rotateZ(90deg);
    -ms-transform: translateX(-50%) rotateZ(90deg);
    transform: translateX(-50%) rotateZ(90deg)
}

.time-number li:nth-child(3)>span {
    -webkit-transform: rotateZ(-90deg);
    -ms-transform: rotateZ(-90deg);
    transform: rotateZ(-90deg)
}

.time-number li:nth-child(4) {
    -webkit-transform: translateX(-50%) rotateZ(120deg);
    -ms-transform: translateX(-50%) rotateZ(120deg);
    transform: translateX(-50%) rotateZ(120deg)
}

.time-number li:nth-child(4)>span {
    -webkit-transform: rotateZ(-120deg);
    -ms-transform: rotateZ(-120deg);
    transform: rotateZ(-120deg)
}

.time-number li:nth-child(5) {
    -webkit-transform: translateX(-50%) rotateZ(150deg);
    -ms-transform: translateX(-50%) rotateZ(150deg);
    transform: translateX(-50%) rotateZ(150deg)
}

.time-number li:nth-child(5)>span {
    -webkit-transform: rotateZ(-150deg);
    -ms-transform: rotateZ(-150deg);
    transform: rotateZ(-150deg)
}

.time-number li:nth-child(6) {
    -webkit-transform: translateX(-50%) rotateZ(180deg);
    -ms-transform: translateX(-50%) rotateZ(180deg);
    transform: translateX(-50%) rotateZ(180deg)
}

.time-number li:nth-child(6)>span {
    -webkit-transform: rotateZ(-180deg);
    -ms-transform: rotateZ(-180deg);
    transform: rotateZ(-180deg)
}

.time-number li:nth-child(7) {
    -webkit-transform: translateX(-50%) rotateZ(210deg);
    -ms-transform: translateX(-50%) rotateZ(210deg);
    transform: translateX(-50%) rotateZ(210deg)
}

.time-number li:nth-child(7)>span {
    -webkit-transform: rotateZ(-210deg);
    -ms-transform: rotateZ(-210deg);
    transform: rotateZ(-210deg)
}

.time-number li:nth-child(8) {
    -webkit-transform: translateX(-50%) rotateZ(240deg);
    -ms-transform: translateX(-50%) rotateZ(240deg);
    transform: translateX(-50%) rotateZ(240deg)
}

.time-number li:nth-child(8)>span {
    -webkit-transform: rotateZ(-240deg);
    -ms-transform: rotateZ(-240deg);
    transform: rotateZ(-240deg)
}

.time-number li:nth-child(9) {
    -webkit-transform: translateX(-50%) rotateZ(270deg);
    -ms-transform: translateX(-50%) rotateZ(270deg);
    transform: translateX(-50%) rotateZ(270deg)
}

.time-number li:nth-child(9)>span {
    -webkit-transform: rotateZ(-270deg);
    -ms-transform: rotateZ(-270deg);
    transform: rotateZ(-270deg)
}

.time-number li:nth-child(10) {
    -webkit-transform: translateX(-50%) rotateZ(300deg);
    -ms-transform: translateX(-50%) rotateZ(300deg);
    transform: translateX(-50%) rotateZ(300deg)
}

.time-number li:nth-child(10)>span {
    -webkit-transform: rotateZ(-300deg);
    -ms-transform: rotateZ(-300deg);
    transform: rotateZ(-300deg)
}

.time-number li:nth-child(11) {
    -webkit-transform: translateX(-50%) rotateZ(330deg);
    -ms-transform: translateX(-50%) rotateZ(330deg);
    transform: translateX(-50%) rotateZ(330deg)
}

.time-number li:nth-child(11)>span {
    -webkit-transform: rotateZ(-330deg);
    -ms-transform: rotateZ(-330deg);
    transform: rotateZ(-330deg)
}

.clock.ui-awesome .apm,
.clock.ui-black .apm,
.clock.ui-dodgerblue .apm,
.clock.ui-tomato .apm {
    color: #fff;
    opacity: 1
}

.clock.ui-banana-yellow .apm {
    color: #000;
    opacity: 1
}

.clock.ui-dodgerblue,
.clock.ui-tomato {
    background-color: tomato;
    color: #fff
}

.clock.ui-black {
    background-color: #141414;
    color: #fff
}

.clock.ui-awesome {
    background-color: #ff2052;
    color: #fff
}

.clock.ui-banana-yellow {
    background-color: #ffe135;
    color: #000
}

.clock.ui-large {
    width: 400px;
    height: 400px;
    font-size: 40px
}

.clock.ui-medium {
    width: 180px;
    height: 180px
}

.clock.ui-small {
    width: 150px;
    height: 150px
}

.watch-box {
    display: flex;
    align-items: center;
    margin: 0 0 -40px
}

.watch-sec {
    position: absolute;
    bottom: 100px;
    left: 22%
}

.clock-ht h4 {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    margin: 15px 0 0;
    box-shadow: 0 0 11.44px 1.56px rgb(65 65 65 / 0%);
    padding: 10px;
    border-radius: 4px
}

.touc-sec-form input,
.touc-sec-form select {
    height: 65px;
    padding: 0 20px 0 25px;
    width: 100%;
    margin: 0 0 15px;
    background: #ffff
}

.clock-box-links {
    margin: 32px 0 0;
    padding: 0
}

.clock-box-links li,
li {
    list-style: none
}

.clock-box-links li a {
    color: #ffff;
    font-size: 16px;
    font-weight: 700;
    padding: 0 0 5px
}

.time-number li>span {
    display: block;
    margin-top: 5px;
    color: #000;
    font-weight: BOLD
}

.statue-img img {
    max-height: 350px;
    width: 100%
}

.footer-box-1 p {
    color: #000;
    font-size: 16px;
    line-height: 25px;
    padding: 20px 0
}

.footer-box-1 .clock-box-links {
    margin: 0 0 10px;
    border-bottom: 2px solid #ccc;
    padding: 0 0 10px
}

.services-links li a {
    color: #000;
    font-size: 16px;
    padding: 0 0 15px;
    font-weight: 500
}

.services-links li i {
    padding: 0 5px 0 0;
    color: var(--mainColor);
    font-size: 14px
}

.footer-box-2 strong.h4 {
    color: #000;
    font-size: 25px;
    font-weight: 700;
    padding: 0;
    margin-bottom: 15px;
    display: block
}

.c-col a,
.footer-box-1 .clock-box-links li a {
    color: #000;
    font-weight: 700
}

.footer-box-1 h6,
.footer-box-1 strong.h6 {
    line-height: 25px;
    padding: 0 0 10px;
    font-weight: 700;
    color: #000
}

.social-links {
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin-top: 10px
}

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

.books-folio img,
.footer-box-1 img {
    max-width: 350px
}

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

    .books-folio img,
    .footer-box-1 img {
        max-width: 276px
    }

    .srv-info-sec .srv-info-wrap .srv-item-ico i {
        font-size: 22px !important
    }
}

.social-links,
.social-links-list {
    display: flex;
    align-items: center;
    column-gap: 10px;
    padding: 0
}

.social-links-list li a {
    color: #000;
    padding: 10px 13px;
    border: 1px solid;
    border-radius: 50%
}

.dmca_sss a {
    border: none !important;
    border-radius: initial !important;
    padding: 0 !important;
    margin: 20px 0 0
}

.social-links h5,
.social-links strong.h5 {
    font-size: 18px;
    font-weight: 500;
    color: #000
}

.copyright-sec p,
.project-btn {
    font-size: 15px
}

.whatwe2 .what-we-do-main-inner-box {
    border-radius: 0;
    background: #ebebeb;
    text-align: end;
    padding: 20px;
    min-height: 405px
}

.kindle-service:hover .number-box,
.whatwe2 .what-we-do-main-inner-box img,
.why-kindle {
    background: #fff
}

.whatwe2 .what-we-do-main-inner-box h3 {
    color: #000000cf;
    font-size: 33px;
    font-weight: 800;
    text-align: end;
    margin-bottom: 37px
}

.whatwe2 .what-we-do-main-inner-box span {
    color: var(--mainColor);
    font-size: 49px;
    font-weight: 500;
    font-family: fantasy
}

.job-open p,
.whatwe2 .what-we-do-main-inner-box p {
    color: #000;
    font-size: 15px;
    line-height: 25px;
    padding: 15px 0;
    font-weight: 400
}

ul.banner-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding-top: 25px
}

.banner-list li {
    width: 25%;
    margin-bottom: 29px
}

.banner-list li a {
    display: flex;
    align-items: center;
    color: #fff;
    gap: 18px;
    font-weight: 600;
    text-decoration: underline;
    font-style: italic;
    text-underline-offset: 5px;
    text-decoration-style: dashed;
    text-decoration-color: chocolate
}

.ghost-service {
    background: #ebebeb;
    padding: 20px;
    box-shadow: -3px 2px 7px #80808054;
    transition: .5s ease-in-out;
    min-height: 396px;
    max-height: 396px;
    overflow: overlay
}

.ghost-service span {
    color: var(--mainColor);
    font-size: 49px;
    font-weight: 700;
    font-family: sans-serif;
    text-align: end;
    display: block;
    margin-bottom: 22px
}

.ghost-service p {
    color: #000;
    font-size: 15px;
    line-height: 20px;
    font-weight: 600
}

.banner_from h3,
.ghost-service:hover *,
.kindle-service:hover h4,
.kindle-service:hover p,
.p-box:hover .p-header span,
.punch {
    color: #fff
}

.ghost-service h3 {
    font-size: 20px;
    margin-bottom: 26px
}

.p-header span,
.punch {
    font-size: 40px;
    font-weight: 700
}

.p-header {
    background: #efefef;
    border-radius: 6px;
    padding: 20px 23px;
    margin: 0 0 15px;
    transition: .5s
}

.p-header span {
    color: #e4573d;
    padding: 15px 0
}

.ghost-slides p,
.navbar.is-sticky .drop-show a,
.navbar.is-sticky .nav-item a,
.navbar.is-sticky .others-option .option-item .social-icon li i,
.p-list li {
    color: #000 !important
}

.p-list {
    padding: 18px 0 0;
    height: 400px;
    overflow-y: scroll
}

.p-list::-webkit-scrollbar {
    width: 5px
}

.p-list::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    border-radius: 75px
}

.p-list::-webkit-scrollbar-thumb {
    background-color: var(--mainColor);
    border-radius: 75px
}

.p-list li {
    font-size: 15px;
    padding: 10px 25px;
    display: flex;
    line-height: 25px;
    font-weight: 600;
    border-bottom: 1px solid #8080802b
}

.p-list li i {
    color: var(--mainColor);
    padding: 6px 6px 0 0
}

.p-btn {
    display: flex;
    align-items: center;
    margin: 27px 0 0;
    justify-content: space-around;
    padding: 0
}

.contact-ul>li>a,
.counter {
    display: flex;
    align-items: center
}

.p-btn li:first-child a {
    background: #e4573d;
    border: 1px solid #e4573d;
    border-radius: 6px
}

.p-btn li:nth-child(2) a {
    background: #002868;
    border: 1px solid #002868;
    border-radius: 6px
}

.p-btn li:first-child a,
.p-btn li:nth-child(2) a {
    color: #ffff;
    font-size: 18px;
    padding: 12px 25px;
    font-weight: 700
}

.p-box {
    padding: 0 0 30px;
    border-radius: 7px;
    box-shadow: 0 0 11px 0 #8080805c
}

.kindle-service:hover,
.p-box:hover .p-header {
    background-color: var(--mainColor)
}

.book-item .image::before,
.book-slider.owl-theme .owl-nav [class*=owl-]:focus,
.book-slider.owl-theme .owl-nav [class*=owl-]:hover,
.book-slider2.owl-theme .owl-nav [class*=owl-]:focus,
.book-slider2.owl-theme .owl-nav [class*=owl-]:hover {
    background-color: var(--blackColor)
}

.ghost-slides {
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    min-height: 363px
}

.contact-banner,
.kindle-vella {
    z-index: 1;
    padding-top: 180px;
    position: relative
}

.ghost-slides h3 {
    margin-top: 32px
}

.ghost-sec {
    background: url(../img/ghost-slide-bg.webp) 0 0/cover no-repeat fixed
}

.ghost-slides img {
    max-width: 64px
}

.publishing-sec {
    background: #e9e9e93d
}

.contact-ul>li>a>i {
    padding: 16px 17px;
    border-radius: 50%;
    color: #fff;
    margin-right: 16px
}

.contact-ul>li>a>span {
    color: #000;
    font-weight: 600;
    font-size: 14px
}

.contact-ul {
    margin-top: 26px
}

.contact-ul>li>a {
    margin-bottom: 20px
}

.contact-banner {
    background: linear-gradient(to right, #000, #203a43d4, #000) bottom/cover no-repeat, url(../img/contact-banner.webp) bottom/cover no-repeat
}

.kindle-vella {
    background: linear-gradient(to right, #00000070, #000000bf, #000000c7) bottom/cover no-repeat, url(../img/kidnle-bg.avif) bottom/cover no-repeat
}

.cal-women {
    position: relative
}

.choose-sec2 {
    background: linear-gradient(to right, #fff, #ffffff00, #0f202700) 0 0/cover no-repeat, url(../img/choose2-bg.webp) 0 0/cover no-repeat
}

.counter {
    column-gap: 50px;
    margin: 50px 0 0;
    flex-wrap: wrap
}

.counter-list-box span,
.counter-list-box strong {
    color: #000;
    font-size: 45px;
    font-weight: 800
}

.counter-list-box .text,
.counter-list-box h6 {
    padding: 10px 0 0;
    color: #000;
    font-size: 15px;
    font-weight: 700
}

.c-drop-down {
    box-shadow: inset 0 1px 0 #eaf3fb, 0 3px 6px rgb(0 0 0 / 5%);
    border-radius: 5px;
    background: #fafbfd;
    width: 680px;
    top: 60px;
    -ms-transition: .8s ease-out;
    -moz-transition: .8s ease-out;
    -webkit-transition: .8s ease-out;
    -o-transition: .8s ease-out;
    transition: .8s ease-out;
    border: 0;
    left: 0;
    padding: 30px 0 10px;
    transform: scale(0);
    right: 0;
    margin: auto;
    bottom: auto;
    z-index: 2;
    position: absolute
}

.d-table,
.preloader {
    width: 100%;
    height: 100%
}

.pt-100,
.ptb-100 {
    padding-top: 100px
}

.pb-100,
.ptb-100 {
    padding-bottom: 100px
}

.drop-show:hover .c-drop-down {
    transform: scale(1)
}

.list-tabs>ul>li {
    margin-bottom: 8px
}

.list-tabs ul li img,
.main-banner-content .banner-holder a {
    margin-right: 10px
}

.list-tabs ul li a {
    font-size: 13px;
    font-weight: 600;
    padding: 0 0 29px;
    color: #000;
    margin: 0
}

body {
    padding: 0;
    margin: 0;
    font-family: var(--mainfontFamily)
}

.default-btn,
p {
    font-family: var(--optionalfontFamily)
}

a {
    transition: var(--transition)
}

a:focus,
a:hover {
    color: var(--mainColor);
    outline: 0
}

.slick-slide,
button:focus,
input:focus {
    outline: 0
}

p {
    line-height: 1.6;
    margin-bottom: 12px
}

.book-about-content .book-list li:last-child,
.main-banner-content .text p,
.main-banner-content p,
p:last-child {
    margin-bottom: 0
}

.d-table-cell {
    vertical-align: middle
}

img {
    max-width: 100%;
    height: auto
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    text-transform: capitalize
}

.pb-70 {
    padding-bottom: 70px
}

.default-btn {
    border: none;
    position: relative;
    display: inline-block;
    text-align: center;
    overflow: hidden;
    z-index: 1;
    background-color: var(--mainColor);
    color: var(--whiteColor);
    transition: var(--transition);
    border-radius: 4px;
    opacity: 1;
    font-weight: 700;
    padding: 10px 13px
}

.default-btn:hover {
    color: var(--whiteColor) !important
}

.default-btn i {
    font-size: 12px;
    position: relative;
    top: -1px;
    margin-left: 10px
}

.book-item:hover .image .icon,
.buy-now-btn,
.buy-now-btn img {
    top: 50%;
    transform: translateY(-50%)
}

.section-title {
    text-align: center;
    max-width: 100%;
    margin: 0 auto 45px
}

.section-title h2 {
    font-size: 45px;
    margin-bottom: 14px
}

.section-title p {
    line-height: 1.8
}

.buy-now-btn {
    left: 20px;
    z-index: 99;
    position: fixed;
    border-radius: 30px;
    display: inline-block;
    color: #fff;
    background-color: #82b440;
    padding: 10px 20px 10px 42px;
    box-shadow: 0 1px 20px 1px #82b440;
    font-size: 13px;
    font-weight: 600
}

.buy-now-btn img {
    left: 20px;
    width: 15px;
    position: absolute
}

.buy-now-btn:hover {
    background-color: #ff5740;
    color: #fff !important
}

.preloader .box,
.preloader .shadow {
    background: var(--whiteColor);
    position: absolute;
    left: 0
}

.preloader {
    position: fixed;
    z-index: 99999;
    background: var(--mainColor);
    top: 0;
    left: 0
}

.book-about-image,
.book-banner-area {
    background-repeat: no-repeat;
    background-size: cover
}

.preloader .loader {
    position: absolute;
    top: 43%;
    left: 0;
    right: 0;
    transform: translateY(-43%);
    text-align: center;
    margin: 0 auto;
    width: 50px;
    height: 50px
}

.preloader .box {
    width: 100%;
    height: 100%;
    animation: .5s linear infinite animate;
    top: 0;
    border-radius: 3px
}

.preloader .shadow {
    width: 100%;
    height: 5px;
    opacity: .1;
    top: 59px;
    border-radius: 50%;
    animation: .5s linear infinite shadow
}

@keyframes loader {
    0% {
        left: -100px
    }

    100% {
        left: 110%
    }
}

@keyframes animate {
    17% {
        border-bottom-right-radius: 3px
    }

    25% {
        transform: translateY(9px) rotate(22.5deg)
    }

    50% {
        transform: translateY(18px) scale(1, .9) rotate(45deg);
        border-bottom-right-radius: 40px
    }

    75% {
        transform: translateY(9px) rotate(67.5deg)
    }

    100% {
        transform: translateY(0) rotate(90deg)
    }
}

@keyframes shadow {
    50% {
        transform: scale(1.2, 1)
    }
}

.navbar {
    position: relative;
    padding-top: 25px;
    padding-bottom: 25px
}

.navbar.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    box-shadow: 0 2px 28px 0 rgba(0, 0, 0, .09);
    background-color: var(--whiteColor) !important;
    animation: .5s ease-in-out fadeInDown
}

.navbar-light {
    background-color: transparent !important
}

.navbar-light .logo h3 {
    font-size: 35px;
    margin-bottom: 0
}

.navbar-light .navbar-nav {
    margin: auto
}

.navbar-light .navbar-nav .nav-item {
    position: relative;
    padding: 0
}

.drop-show a,
.navbar-light .navbar-nav .nav-item a {
    font-size: 14px;
    color: #000;
    text-transform: capitalize;
    position: relative;
    padding: 0;
    margin-left: 13px;
    margin-right: 8px;
    font-weight: 500
}

.navbar-light .navbar-nav .nav-item a.active,
.navbar-light .navbar-nav .nav-item a:focus,
.navbar-light .navbar-nav .nav-item a:hover {
    color: var(--mainColor);
    position: relative;
    transition: var(--transition)
}

.navbar-light .navbar-nav .nav-item a i {
    font-size: 16px;
    position: relative;
    top: 2px;
    display: inline-block;
    margin-left: -4px;
    margin-right: -4px
}

.main-banner-content .banner-holder a:last-child,
.navbar-light .navbar-nav .nav-item:last-child a,
.navbar-light .others-option .option-item .social-icon li:last-child {
    margin-right: 0
}

.navbar-light .navbar-nav .nav-item:first-child a {
    margin-left: 0
}

.navbar-light .navbar-nav .nav-item.active a,
.navbar-light .navbar-nav .nav-item:hover a {
    color: var(--mainColor);
    transition: var(--transition)
}

.navbar-light .others-option .option-item .social-icon {
    padding-left: 0;
    margin-bottom: 0
}

.navbar .dark-logo,
.navbar.is-sticky .light-logo {
    display: none
}

.navbar.is-sticky .dark-logo {
    display: block
}

.navbar-light .others-option .option-item .social-icon li {
    display: inline-block;
    list-style-type: none;
    margin-right: 5px
}

.navbar-light .others-option .option-item .social-icon li i {
    display: inline-block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    border: 1px solid #000;
    border-radius: 50px;
    font-size: 20px;
    font-weight: 600;
    transition: var(--transition);
    color: #000
}

.navbar-light .others-option .option-item .social-icon li i:hover {
    background-color: var(--mainColor);
    border: 1px solid var(--mainColor);
    color: var(--whiteColor)
}

.book-about-image,
.book-banner-area,
.book-item .image,
.inner-banner,
.main-banner-content,
.single-saas-features {
    position: relative;
    z-index: 1
}

.book-banner-area {
    background-image: linear-gradient(180deg, #000000bf 0, #000000c2 100%), url(../img/banner/banner1.webp);
    background-position: center
}

.main-banner-content span {
    font-size: 18px;
    color: var(--mainColor);
    font-weight: 500
}

.main-banner-content h1 {
    font-size: 68px;
    margin-top: 15px;
    margin-bottom: 10px
}

.main-banner-content .banner-btn,
.main-banner-content .banner-holder {
    margin-top: 30px
}

.contact-form .send-btn,
.main-banner-content .text {
    margin-top: 10px
}

.book-item {
    transition: var(--transition);
    border-radius: 9px
}

.book-item .image {
    text-align: center;
    object-fit: cover
}

.book-item .image::before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition)
}

.book-item .image .icon {
    position: absolute;
    left: 0;
    right: 0;
    top: 40%;
    transform: translateY(-40%);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition)
}

.book-item .image .icon a i {
    display: inline-block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    background-color: var(--whiteColor);
    color: var(--mainColor);
    text-align: center;
    border-radius: 50px;
    font-size: 25px;
    transition: var(--transition)
}

.book-item .image .icon a i:hover {
    background-color: var(--mainColor);
    color: var(--whiteColor)
}

.book-item:hover .image::before {
    opacity: .5;
    visibility: visible
}

.book-item:hover .image .icon,
.srv-info-sec .srv-info-wrap .srv-item-content.active {
    opacity: 1;
    visibility: visible
}

.book-slider.owl-theme .owl-nav,
.book-slider2.owl-theme .owl-nav {
    margin-top: 0
}

.book-slider.owl-theme .owl-nav [class*=owl-],
.book-slider2.owl-theme .owl-nav [class*=owl-] {
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    outline: 0;
    width: 45px;
    height: 45px;
    line-height: 47px;
    transition: var(--transition);
    background-color: var(--whiteColor);
    color: var(--mainColor);
    border-radius: 50%;
    opacity: 1;
    visibility: hidden
}

.book-slider.owl-theme .owl-nav [class*=owl-].owl-next,
.book-slider2.owl-theme .owl-nav [class*=owl-].owl-next {
    left: auto;
    right: -10px
}

.book-slider.owl-theme:hover .owl-nav [class*=owl-],
.book-slider2.owl-theme:hover .owl-nav [class*=owl-] {
    opacity: 1;
    visibility: visible;
    left: 0;
    transition: var(--transition)
}

.book-slider.owl-theme:hover .owl-nav [class*=owl-].owl-next,
.book-slider2.owl-theme:hover .owl-nav [class*=owl-].owl-next {
    left: auto;
    right: 0
}

.book-about-image {
    background-image: url(../img/book-about.webp);
    background-position: center center;
    height: 100%;
    width: 100%
}

.book-about-content {
    padding: 10px
}

.book-about-content h3 {
    font-size: 40px;
    margin-bottom: 16px
}

.book-about-content strong {
    display: block;
    font-weight: 400;
    letter-spacing: 2px
}

.book-about-content p {
    margin-top: 15px;
    margin-bottom: 0
}

.book-about-content .book-list {
    padding-left: 0;
    margin-top: 20px;
    margin-bottom: 0
}

.book-about-content .book-list li {
    list-style-type: none;
    margin-bottom: 12px;
    text-transform: capitalize
}

.book-about-content .book-list li i {
    font-size: 20px;
    color: var(--mainColor);
    margin-right: 5px
}

.contact-form form .form-control {
    height: 60px;
    padding: 0 15px;
    line-height: initial;
    color: var(--blackColor);
    background-color: #fff;
    border: 0 solid #cecfdf;
    border-radius: 2px;
    transition: var(--transition);
    box-shadow: unset !important;
    font-weight: 500;
    font-size: 15px
}

.contact-form form .form-control:focus {
    border: 1px solid var(--mainColor)
}

.contact-form form .form-control::-moz-placeholder {
    color: var(--optionalColor)
}

.contact-form form .form-control::placeholder {
    color: var(--optionalColor)
}

.contact-form form textarea.form-control {
    height: auto !important;
    padding-top: 15px
}

.contact-form .with-errors ul {
    padding-left: 0;
    list-style-type: none;
    margin-top: 5px;
    margin-bottom: 0
}

.contact-form .with-errors ul li {
    color: red;
    font-weight: 500;
    font-size: 14px
}

.contact-form #msgSubmit {
    margin-bottom: 0;
    font-size: 22px;
    font-weight: 500
}

.contact-form #msgSubmit.text-danger {
    margin-top: 20px !important
}

.inner-banner {
    background-image: linear-gradient(180deg, #000000bf 0, #000000c2 100%), url(../img/banner/inner-banner.webp);
    background-size: cover;
    background-position: center;
    padding: 70px 0
}

.single-saas-features,
.why-choose-area {
    background-color: #fafafa
}

.inner-banner .main-banner-content h1 {
    margin-top: 0;
    margin-bottom: 25px;
    color: #fff;
    font-weight: 700;
    font-size: 55px
}

.inner-banner .main-banner-content.two h1 {
    font-size: 65px
}

.inner-banner.two {
    height: 850px
}

.inner-banner.two .banner-image {
    text-align: left
}

.single-testimonial-item {
    position: relative;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 25px
}

.single-testimonial-item .testimonial-desc {
    background-color: var(--whiteColor);
    box-shadow: 0 2px 20px 0 rgb(0 0 0 / 8%);
    border-radius: 5px;
    position: relative;
    z-index: 1;
    padding: 39px 25px 8px;
    text-align: center;
    min-height: 261px
}

.single-testimonial-item .testimonial-desc p {
    margin-bottom: 20px;
    position: relative
}

.single-testimonial-item .testimonial-desc::before {
    content: "";
    position: absolute;
    left: 35px;
    bottom: -12px;
    width: 25px;
    height: 25px;
    z-index: -1;
    background: var(--whiteColor);
    transform: rotate(45deg);
    box-shadow: 1px 1px 3px 0 #80808021
}

.single-testimonial-item .client-info {
    padding-bottom: 10px;
    border-bottom: 1px solid #80808045
}

.single-testimonial-item .client-info h3 {
    margin-bottom: 0;
    font-size: 18px;
    font-weight: 600;
    text-align: justify
}

.single-testimonial-item .client-info span {
    display: block;
    color: var(--optionalColor);
    margin-top: 4px;
    font-family: var(--optionalfontFamily);
    font-weight: 600
}

.platform {
    margin-bottom: 20px;
    margin-top: 17px
}

.platform img {
    max-width: 108px
}

.platform .ver-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 700;
    color: #0000007a;
    margin-left: 9px
}

.single-saas-features {
    margin-bottom: 30px;
    text-align: left;
    padding: 30px;
    transition: var(--transition);
    border-radius: 5px
}

.book-slider2::before,
.number-box {
    background: var(--mainColor);
    margin: auto;
    right: 0
}

.single-saas-features .icon i {
    display: inline-block;
    height: 70px;
    width: 70px;
    line-height: 70px;
    background-color: #f3f3f3;
    color: var(--mainColor);
    font-size: 45px;
    border-radius: 50px;
    transition: var(--transition);
    text-align: center
}

.single-saas-features h3 {
    font-size: 25px;
    margin-top: 25px;
    margin-bottom: 15px;
    transition: var(--transition)
}

.single-saas-features p {
    margin-bottom: 0;
    transition: var(--transition);
    font-size: 15px
}

.single-saas-features::before {
    top: 50%;
    left: 50%;
    width: 0%;
    z-index: -1;
    height: 100%;
    content: "";
    position: absolute;
    transition: .3s ease-in-out;
    background-color: var(--mainColor);
    transform: translate(-50%, -50%);
    border-radius: 5px;
    transition: var(--transition)
}

.single-saas-features:hover {
    transform: translateY(-10px)
}

.single-saas-features:hover::before {
    width: 100%
}

.single-saas-features:hover .icon i {
    background-color: var(--whiteColor);
    color: var(--mainColor)
}

.single-saas-features:hover h3,
.single-saas-features:hover p {
    color: var(--whiteColor)
}

.book-slider2 {
    position: relatives
}

.book-slider2::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100px;
    left: -20px;
    top: 0;
    bottom: 0
}

.kindle-service {
    padding: 70px 25px;
    position: relative;
    transition: .3s ease-in-out;
    min-height: 378px;
    border: 1px dashed #003d7f
}

.kindle-service h3 {
    color: #003d7f;
    margin-bottom: 27px;
    margin-top: 23px;
    font-weight: 700;
    text-align: center
}

.kindle-service p {
    color: #000;
    font-weight: 600;
    text-align: center
}

.kindle-chart span,
.number-box {
    border-radius: 50%;
    display: flex;
    font-weight: 700
}

.number-box {
    height: 60px;
    width: 60px;
    color: #000;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -21px;
    left: 0;
    font-size: 20px;
    font-family: system-ui;
    transition: .3s ease-in-out
}

.kindle-chart {
    display: flex;
    column-gap: 20px
}

.kindle-chart span {
    background: #003d7f;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 25px;
    padding: 13px 10px;
    position: relative;
    width: 51px;
    height: 51px
}

.kindle-chart-label h2,
.text-yellow {
    color: var(--mainColor)
}

.kindle-chart span.before-hide::before {
    position: unset
}

.kindle-chart span::before {
    position: absolute;
    content: "";
    background: #003d7f;
    width: 4px;
    height: 145px;
    z-index: -1;
    top: 0
}

.kindle-chart-label h2 {
    font-size: 25px;
    font-weight: 800;
    font-family: Montserrat;
    line-height: 57px
}

.kindle-chart-label p {
    color: #000;
    font-weight: 600
}

.kindle-work-img img {
    filter: drop-shadow(-5px 5px 3px black)
}

::-webkit-scrollbar {
    width: 5px
}

::-webkit-scrollbar-thumb {
    background-color: var(--mainColor)
}

.contact-form .form-group {
    margin-bottom: 10px
}

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

    .app-banner-area,
    .page-title-area,
    .ptb-100,
    .saas-banner-area {
        padding-top: 50px;
        padding-bottom: 50px
    }

    .pt-100 {
        padding-top: 50px
    }

    .pb-100 {
        padding-bottom: 50px
    }

    .pb-70 {
        padding-bottom: 20px
    }

    .blog-details-desc .article-content .features-list li,
    .main-banner-content span,
    .products-details-tab .tabs li a,
    .section-title p,
    p {
        font-size: 15px
    }

    .section-title {
        margin: 0 auto 30px
    }

    .app-banner-area .main-banner-content h1,
    .main-banner-content h1,
    .saas-banner-area .main-banner-content h1,
    .section-title h2,
    .single-pricing-box .price {
        font-size: 30px !important
    }

    .navbar-light .navbar-nav .nav-item a {
        margin-left: 0;
        margin-right: 0;
        margin-top: 15px
    }

    .main-banner-content .banner-btn,
    .navbar-light .others-option .option-item .social-icon {
        margin-top: 20px
    }

    .book-banner-area,
    .products-banner-area.two {
        height: 100%;
        padding-top: 50px;
        padding-bottom: 50px
    }

    .main-banner-content {
        text-align: center;
        max-width: 100%
    }

    .banner-image,
    .newsletter-form-content .newsletter-content {
        margin-top: 35px
    }

    .book-about-content {
        padding: 0
    }

    .app-about-content h3,
    .app-download-content h3,
    .book-about-content h3,
    .products-about-content h3,
    .saas-about-content h3 {
        font-size: 26px
    }

    .comments-area .comment-respond .comment-reply-title,
    .comments-area .comments-title,
    .products-details-tab .tab_content .tabs_item .products-details-tab-content h3,
    .reviews-slides .reviews-feedback .single-feedback p,
    .single-app-features h3,
    .single-blog-post .post-content h3,
    .single-book-feature h3,
    .single-gallery-item .gallery-content h3,
    .single-pricing-box .pricing-header h3,
    .single-saas-features h3 {
        font-size: 20px
    }

    .single-book-feature .icon i {
        height: 70px;
        width: 70px;
        line-height: 70px;
        font-size: 35px
    }

    .single-fun-fact h3 {
        font-size: 30px;
        margin: 6px 0 5px
    }

    .reviews-area {
        overflow: hidden
    }

    .newsletter-form-content .newsletter-content h2,
    .page-title-content h2,
    .users-content h3 {
        font-size: 25px
    }

    .newsletter-form-content .newsletter-form button {
        position: relative;
        right: 0;
        top: 0;
        margin-top: 15px
    }

    .app-about-area .container,
    .author-content,
    .products-details-tab .tab_content {
        padding: 20px
    }

    .author-content h3 {
        font-size: 25px;
        margin-bottom: 15px
    }

    .author-content .social-icon {
        margin-top: 20px;
        margin-bottom: 10px
    }

    .author-area .row .col-lg-4 {
        padding-right: 15px
    }

    .app-about-content,
    .app-banner-area .banner-image,
    .author-image,
    .newsletter-image,
    .products-banner-area .banner-image {
        text-align: center
    }

    .single-blog-post .post-content {
        padding: 16px
    }

    .contact-image,
    .faq-image,
    .specification-image {
        margin-bottom: 35px;
        text-align: center
    }

    .products-banner-area {
        height: 100%;
        padding-bottom: 50px;
        padding-top: 50px
    }

    .products-about-image,
    .saas-about-image {
        text-align: center;
        margin-top: 30px
    }

    .app-about-image,
    .app-download-content {
        margin-top: 35px;
        text-align: center
    }

    .why-choose-image {
        margin-bottom: 20px
    }

    .app-download-content .app-holder a img {
        max-width: 100px
    }

    .video-content {
        padding-top: 55px;
        padding-bottom: 70px
    }

    .video-content h3 {
        font-size: 28px
    }

    .app-banner-area .main-banner-content .banner-holder a img {
        max-width: 128px
    }

    .app-banner-area .banner-image img {
        max-width: 100%
    }

    .banner-form,
    .widget-area .widget:first-child {
        margin-top: 30px
    }

    .overview-item {
        padding-bottom: 50px;
        margin-bottom: 50px;
        border-bottom: 1px solid #f3f3f3
    }

    .overview-item:last-child {
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: none
    }

    .overview-content,
    :nth-child(3) .overview-left-img {
        margin-bottom: 30px
    }

    .overview-content.text-color {
        padding-left: 0
    }

    .overview-content h3 {
        font-size: 24px
    }

    :nth-child(3) .overview-content {
        margin-bottom: 0
    }

    .page-title-content ul {
        margin-top: 12px
    }

    .blog-details-desc .article-content h3 {
        font-size: 20px;
        line-height: 1.4
    }

    .blockquote,
    blockquote {
        padding: 30px !important
    }

    .blockquote p,
    blockquote p {
        font-size: 18px !important
    }

    .comments-area .comment-body {
        padding-left: 70px
    }

    .comments-area .comment-author .avatar {
        height: 55px;
        width: 55px;
        left: -70px
    }

    .comments-area .comment-metadata {
        font-size: 12px
    }

    .comments-area .children {
        margin-left: 0
    }

    .product-details-image {
        height: 500px
    }

    .product-details-desc {
        padding: 0;
        margin-top: 25px
    }

    .product-details-desc .buy-checkbox-btn .cbx span:last-child {
        font-size: 14px
    }

    .products-details-tab .tab_content .tabs_item .products-details-tab-content .product-review-form .review-title .default-btn {
        display: none
    }

    .products-details-tab .tab_content .tabs_item .products-details-tab-content .product-review-form .review-comments .review-item {
        padding-right: 0
    }

    .products-details-tab .tab_content .tabs_item .products-details-tab-content .product-review-form .review-comments .review-item .review-report-link {
        position: relative;
        top: 10px
    }

    .products-banner-area.two .banner-image {
        margin-top: 0;
        margin-bottom: 35px;
        text-align: center
    }

    .products-banner-area.two .main-banner-content.two h1 {
        font-size: 30px;
        margin-bottom: 16px
    }

    .productsQuickView .modal-content {
        padding: 40px 10px
    }

    .productsQuickView .modal-content .product-content {
        margin-top: 25px
    }

    .example-demo-modal .inner {
        width: 280px
    }
}

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

    .app-banner-area,
    .ptb-100 {
        padding-top: 70px;
        padding-bottom: 70px
    }

    .pt-100 {
        padding-top: 70px
    }

    .pb-100 {
        padding-bottom: 70px
    }

    .pb-70 {
        padding-bottom: 40px
    }

    .section-title {
        margin: 0 auto 30px
    }

    .section-title h2 {
        font-size: 45px
    }

    .navbar-light .navbar-nav .nav-item a {
        margin-left: 0;
        margin-right: 0;
        margin-top: 15px
    }

    .main-banner-content .banner-btn,
    .navbar-light .others-option .option-item .social-icon {
        margin-top: 20px
    }

    .book-banner-area,
    .products-banner-area.two {
        height: 100%;
        padding-top: 70px;
        padding-bottom: 70px
    }

    .main-banner-content {
        text-align: center;
        max-width: 100%
    }

    .main-banner-content span {
        font-size: 15px
    }

    .app-banner-area .main-banner-content h1,
    .main-banner-content h1,
    .saas-banner-area .main-banner-content h1 {
        font-size: 50px
    }

    .banner-image,
    .newsletter-form-content .newsletter-content {
        margin-top: 35px
    }

    .book-about-content {
        padding: 0
    }

    .app-about-content h3,
    .app-download-content h3,
    .book-about-content h3,
    .products-about-content h3,
    .saas-about-content h3 {
        font-size: 36px
    }

    .reviews-slides .reviews-feedback .single-feedback p,
    .single-blog-post .post-content h3,
    .single-book-feature h3,
    .single-gallery-item .gallery-content h3,
    .single-pricing-box .pricing-header h3 {
        font-size: 20px
    }

    .single-book-feature .icon i {
        height: 70px;
        width: 70px;
        line-height: 70px;
        font-size: 35px
    }

    .single-fun-fact h3 {
        font-size: 30px;
        margin: 6px 0 5px
    }

    .reviews-area {
        overflow: hidden
    }

    .newsletter-form-content .newsletter-content h2,
    .users-content h3 {
        font-size: 35px
    }

    .newsletter-form-content .newsletter-form button {
        position: relative;
        right: 0;
        top: 0;
        margin-top: 15px
    }

    .single-pricing-box .price {
        font-size: 30px
    }

    .app-about-area .container,
    .author-content {
        padding: 20px
    }

    .author-content h3 {
        font-size: 35px;
        margin-bottom: 15px
    }

    .author-content .social-icon {
        margin-top: 20px;
        margin-bottom: 10px
    }

    .author-area .row .col-lg-4 {
        padding-right: 15px
    }

    .app-about-area,
    .app-banner-area .banner-image,
    .app-download,
    .author-image,
    .newsletter-image,
    .products-banner-area .banner-image {
        text-align: center
    }

    .single-blog-post .post-content {
        padding: 16px
    }

    .contact-image,
    .faq-image,
    .specification-image {
        margin-bottom: 35px;
        text-align: center
    }

    .products-banner-area {
        height: 100%;
        padding-bottom: 70px;
        padding-top: 70px
    }

    .products-about-image,
    .saas-about-image {
        text-align: center;
        margin-top: 30px
    }

    .app-about-image,
    .app-download-content {
        margin-top: 35px;
        text-align: center
    }

    .why-choose-image {
        margin-bottom: 20px
    }

    .video-content {
        padding-top: 55px;
        padding-bottom: 70px
    }

    .video-content h3 {
        font-size: 28px
    }

    .app-banner-area .main-banner-content .banner-holder a img {
        max-width: 128px
    }

    .app-banner-area .banner-image img {
        max-width: 100%
    }

    .saas-banner-area {
        padding-top: 50px;
        padding-bottom: 50px
    }

    .banner-form,
    .widget-area .widget:first-child {
        margin-top: 30px
    }

    .overview-item {
        padding-bottom: 50px;
        margin-bottom: 50px;
        border-bottom: 1px solid #f3f3f3
    }

    .overview-item:last-child {
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: none
    }

    .product-details-image {
        height: 500px
    }

    .product-details-desc {
        padding: 0;
        margin-top: 25px
    }

    .page-title-content h2 {
        font-size: 40px
    }

    .products-banner-area.two .banner-image {
        margin-top: 0;
        margin-bottom: 35px;
        text-align: center
    }

    .products-banner-area.two .main-banner-content.two h1 {
        font-size: 50px;
        margin-bottom: 16px
    }
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    .main-banner-content h1 {
        font-size: 60px
    }

    .single-blog-post .post-content h3 {
        font-size: 20px
    }

    .single-products-feature {
        padding: 20px
    }

    .single-products-feature h3 {
        font-size: 18px
    }

    .single-app-features h3,
    .single-saas-features h3 {
        font-size: 22px
    }

    .single-fun-fact p {
        font-size: 16px
    }
}

@media only screen and (max-width:1200px) {
    .what-we-rp {
        padding: 0 20px
    }

    .others-option {
        display: none
    }
}

@media only screen and (max-width:1300px) {
    .c-card {
        left: 50%
    }
}

@media only screen and (max-width:768px) {
    .cta-img-inner img {
        top: -48px;
        bottom: 0;
        right: 0;
        max-height: 381px;
        height: 155px
    }
}

@media only screen and (max-width:680px) {
    .c-drop-down {
        width: 100%
    }
}

.tankyou-sec {
    height: 800px;
    background-image: linear-gradient(180deg, #000000bf 0, #000000c2 100%), url(../img/banner/banner1.webp);
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat
}

.modal-header.c-header {
    padding: 0;
    border: 0
}

.req-body {
    box-shadow: inset 0 0 0 7px #ff5740
}

#requestquote .form-control::placeholder {
    color: #000
}

#requestquote .form-control {
    border-top: 1px solid rgba(0, 0, 0, .13);
    border-bottom: 3px solid rgba(0, 0, 0, .13);
    padding: 10px 15px
}

.job-open {
    border-radius: 0;
    padding: 5px 26px;
    border: 3px dashed var(--mainColor);
    display: flex;
    justify-content: center;
    flex-direction: column;
    min-height: 385px;
    box-shadow: 0 0 4px 0 #8080804f
}

.job-open h3 {
    color: #000000cf;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 0
}

.job-open span {
    color: var(--mainColor);
    font-size: 40px;
    font-weight: 600
}

.job-content {
    border: 6px solid var(--mainColor);
    border-radius: 0
}

.c-content h2 {
    color: #ff5740;
    text-align: center
}

.c-col {
    padding: 44px 0
}

.c-content {
    border-radius: 10px
}

button.ev-close {
    border: 0;
    color: #ff5740;
    font-size: 26px
}

.terms-sec p {
    font-size: 22px;
    font-weight: 500 !important
}

.terms-sec .terms-points li {
    list-style: circle;
    color: #000000db;
    font-weight: 600;
    font-size: 15px;
    margin: 14px 0 14px 20px
}

.terms-sec .terms-points {
    padding: 0;
    margin: 30px 0
}

.srv-info-sec .srv-info-wrap {
    position: relative;
    z-index: 1;
    height: 0;
    padding-top: 100%
}

.srv-info-sec .srv-info-wrap:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 10%;
    top: 10%;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    border: 6px dashed var(--mainColor);
    animation: 12s linear infinite rotateBorder;
    box-shadow: inset 0 0 20px 20px #7c7b7b
}

@keyframes rotateBorder {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.srv-info-sec .srv-info-wrap .srv-item-ico {
    position: absolute;
    z-index: 1;
    width: 15%;
    height: 15%;
    font-size: 40px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 5px 7px 30px rgba(72, 73, 121, .15);
    -moz-box-shadow: 5px 7px 30px rgba(72, 73, 121, .15);
    box-shadow: 5px 7px 30px rgba(72, 73, 121, .15);
    -webkit-transition: .3s ease-in;
    -o-transition: .3s ease-in;
    -moz-transition: .3s ease-in;
    transition: .3s ease-in;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center
}

.srv-info-sec .srv-info-wrap .srv-item-ico:after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 100%;
    -webkit-transition: .3s ease-in;
    -o-transition: .3s ease-in;
    -moz-transition: .3s ease-in;
    transition: .3s ease-in;
    opacity: 0;
    z-index: -1
}

.srv-info-sec .srv-info-wrap .srv-item-ico.active:after,
.srv-info-sec .srv-info-wrap .srv-item-ico:hover:after {
    opacity: 1;
    background-image: linear-gradient(to right, #10348d 0, #4496c8 100%)
}

.srv-info-sec .srv-info-wrap .srv-item-ico i+i,
.srv-info-sec .srv-info-wrap .srv-item-ico.active i {
    opacity: 0
}

.srv-info-sec .srv-info-wrap .srv-item-ico.active i+i {
    background: -webkit-linear-gradient(#fff, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 1
}

.srv-info-sec .srv-info-wrap .srv-item-ico i {
    font-size: 40px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-transition: .3s ease-in;
    -o-transition: .3s ease-in;
    -moz-transition: .3s ease-in;
    transition: .3s ease-in;
    position: absolute;
    background-image: linear-gradient(to right, #4496c8, #10348d);
    opacity: 1
}

.srv-info-sec .srv-info-wrap .srv-item-ico i img {
    width: 45px
}

.srv-info-sec .srv-info-wrap .ico-one {
    left: 13%;
    top: 13%
}

.srv-info-sec .srv-info-wrap .ico-two {
    right: 13%;
    top: 13%
}

.srv-info-sec .srv-info-wrap .ico-three {
    right: 13%;
    bottom: 13%
}

.srv-info-sec .srv-info-wrap .ico-three-alt {
    right: 0;
    left: 0;
    bottom: 3%;
    margin: auto
}

.srv-info-sec .srv-info-wrap .ico-four {
    left: 13%;
    bottom: 13%
}

.srv-info-sec .srv-info-wrap .srv-item-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 22%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: .6s;
    -o-transition: .6s;
    -moz-transition: .6s;
    transition: .6s
}

.srv-info-sec .srv-info-wrap .srv-item-content h5 {
    font-size: 16px;
    color: #10348d;
    text-transform: uppercase;
    font-weight: 700;
    background: linear-gradient(to right, #4496c8 0, #10348d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.srv-info-sec .srv-info-wrap .srv-item-content h3 {
    font-size: 24px;
    color: var(--mainColor);
    font-weight: 700
}

.srv-info-sec .srv-info-wrap .srv-item-content p {
    font-size: 16px;
    margin: 0;
    color: #000
}

@media only screen and (max-width:480px) {
    .srv-info-sec .srv-info-wrap .srv-item-content p {
        font-size: 12px
    }
}

.banner_from {
    position: relative;
    background: url(../img/banner/banner-formbg.webp) 0 0/cover no-repeat;
    padding: 30px 40px;
    border-radius: 10px;
    width: 80%;
    z-index: 1
}

@media only screen and (max-width:991px) {
    .banner-list {
        justify-content: space-between
    }

    .banner-list li {
        width: 100%
    }

    .d-table-cell {
        padding-top: 76px
    }

    button.navbar-toggler {
        filter: brightness(0) saturate(100%) invert(47%) sepia(98%) saturate(741%) hue-rotate(356deg) brightness(103%) contrast(105%)
    }

    .book-slider2::before {
        position: unset
    }

    .services-sec-box {
        flex-direction: column
    }

    .services-sec-box img {
        max-height: 250px;
        max-width: 250px
    }

    .cta-head-2 strong.h3 {
        font-size: 23px;
        line-height: 40px
    }

    .navbar-collapse {
        background: #fff;
        padding: 10px;
        border-radius: 16px
    }

    .drop-show a,
    .navbar-light .navbar-nav .nav-item a {
        color: #000
    }

    .banner_from {
        margin-top: 20px;
        width: 100%
    }
}

.banner_from form .form-control {
    width: 100%;
    border: 0;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
    background-color: #edebea;
    height: 55px;
    color: #000
}

.banner_from form .form-control::placeholder {
    color: #000
}

.banner_from textarea {
    resize: none;
    height: 180px !important
}