@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap');


p {
    font-family: "Urbanist", serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Unna", serif;
}

ul li {
    font-family: "Urbanist", serif !important;
}

h1 {
    font-size: 52px !important;
    line-height: 62px !important;
    font-weight: 600 !important;
}

h2 {
    font-size: 45px !important;
    line-height: 55px !important;
    font-weight: 600 !important;
}

h6 {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #344c61 !important;
}

h1 span,
h2 span {
    color: #344c61;
    background: -webkit-linear-gradient(#344c61bf, #344c61);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

section#hero h1 {
    color: white;
    font-size: 52px;
    line-height: 62px;
    font-weight: 600;
}

li.nav-item a {
    font-family: "Urbanist", serif !important;
    color: black !important;
    font-size: 18px;
    font-weight: 500;
}

section#hero {
    padding: 50px 0px;
    background: #111;
    position: relative;
    color: white;
    z-index: 1;
}

section#hero::before {
    position: absolute;
    background: url('../images/hero-overlay.png');
    top: 0;
    height: 100%;
    width: 100%;
    content: '';
    z-index: -1;
}

section#hero .row {
    align-items: center;
}

a.navbar-brand img {
    max-width: 110px;
}

.request-quote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.call-info-header a {
    text-decoration: none;
    color: black;
}

.call-info-header p {
    margin: 0;
}

.call-us-button {
    display: flex;
    gap: 10px;
    align-items: center;
}


/* From Uiverse.io by cssbuttons-io */
.amz-button {
    --color: #344c61;
    font-family: 'Urbanist';;
    display: inline-block;
    position: relative;
    cursor: pointer;
    overflow: hidden !important;
    border: 2px solid var(--color);
    transition: 0.5s;
    z-index: 1;
    font-size: 17px;
    border-radius: 6px;
    font-weight: 500;
    padding: 11px 18px;
    color: var(--color);
    background: transparent;
}

a.amz-button i {
    margin-right: 10px;
    font-size: 16px;
}

.amz-button:before {
    content: "";
    position: absolute;
    z-index: -1;
    background: linear-gradient(#8a9fff, #344c61);
    height: 0%;
    width: 100%;
    bottom: 0;
    right: 0;
    border-radius: 6px;
    transition: 0.5s;
}

.amz-button:hover {
    color: #fff;
    box-shadow: 0px 0px 6px 2px #4a4a4a !important;
    transform: translateY(-2px) !important;
    border: 2px solid #fff;
}

.amz-button:hover:before {
    height: 100%;
}

.amz-button:active:before {
    background: #344c61;
    transition: 0s;
}

.phone-div-header i {
    font-size: 23px;

}

.call-info-header p {
    font-weight: 600;
}

.hero-image-wrapper img {
    width: 85%;
    margin: 0 auto;
    display: table;
}

section#passionate-cards {
    padding: 50px 0px;
    background: rgb(249 249 249);
}

.passionate-card {
    text-align: center;
    box-shadow: 0px 0px 34px -26px rgba(82, 82, 82, 1);
    height: 340px;
    padding: 30px 20px;
    border-top-right-radius: 24px;
    border-top-left-radius: 24px;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
}

.passionate-image-wrapper img {
    width: 50px;
    filter: brightness(0) invert(1);
}

.passionate-image-wrapper {
    background: #344c61;
    width: 80px;
    margin: 0 auto;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-bottom: 20px;
}

.connect-back-image {
    background: url('../images/home-third-sec-col-image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.connect-second-col {
    padding: 50px 110px !important;
    background: rgb(249 249 249);
}

.connect-card-image-wrapper img {
    width: 30px;
    filter: brightness(0) invert(1);
}

.connect-card-image-wrapper {
    background: #344c61;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

section#custom-books {
    padding: 50px 0px;
    background: rgb(249 249 249);
}

.custom-books-card {
    padding: 20px 20px;
    text-align: center;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.10);
    transition: 1.5s cubic-bezier(0.075, 0.82, 0.165, 1);
    height: 340px;
}

.custom-books-card:hover {
    transform: translateY(-20px);
    background: rgb(52, 75, 96) !important;
    color: white !important;
}

.custom-books-card:hover .custom-card-image-wrapper {
    background: white;
}

.custom-books-card:hover .custom-card-image-wrapper img {
    filter: brightness(0);
}

.custom-card-image-wrapper img {
    width: 40px;
    filter: brightness(0) invert(1);
}

.custom-card-image-wrapper {
    background: #344c61;
    width: 60px;
    height: 60px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-bottom: 10px;
    border: 2px solid #344c61;
}

.custom-books-heading {
    margin-bottom: 50px;
}

section#custom-books .row {
    padding: 15px 0px;
}

section#hire {
    padding: 50px 0px;
    background: url('../images/hire-sec-back--image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.hire-image-wrapper img {
    width: 100%;
}

.connect-col-cards-p-div {
    margin-bottom: 20px;
}

button.amz-button i {
    margin-right: 10px;
}

.hero-button-wrapper button.amz-button {
    color: white !important;
    border: 2px solid white;
}

.why-choose-book-image-wrappper img {
    width: 93%;
    margin: 0 auto;
    display: table;
}

.why-choose-laptop-image img {
    position: relative;
    border-radius: 8px;
    width: 80%;
}

section#why-choose-us .row {
    align-items: center;
}

.laptop-content {
    position: absolute;
    top: unset;
    bottom: 30px;
    color: white;
    left: 30px;
}

.why-choose-laptop-image {
    position: relative;
}

.laptop-content span {
    background: #4f6476;
    color: white;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 10px;
}

.laptop-content h4 {
    margin-top: 5px;
}

section#why-choose-us {
    padding: 50px 0px;
    background: rgb(249 249 249);
}

section#counter {
    padding: 50px 0px;
    background: url('../images/counter-back-image.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: white;
}

.counter-card {
    text-align: center;
}

.counter-content h6 {
    color: white !important;
}

.counter-image-wrapper img {
    width: 60px;
    filter: brightness(0) invert(1);
}

.counter-content h3 {
    font-size: 65px;
    line-height: 75px;
    font-weight: 700;
}

.slider img {
    width: 80%;
    margin: 0 auto;
}

section#portfolio-sec {
    padding: 50px 0px;
}

.portfolio-heading h4 {
    background: #445a6e;
    display: table;
    margin: 0 auto;
    padding: 7px 14px;
    border-radius: 50px;
    color: white;
    margin-bottom: 20px;
}

.portfolio-heading {
    margin-bottom: 40px;
}

section#call-to-action {
    padding: 60px 0px;
    background: #181818;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 5%;
    text-align: center;
    color: white;
}

section#call-to-action h2 {
    color: white;
}

.call-to-button-wrapper button.amz-button {
    color: white !important;
    border: 2px solid white !important;
}

section#elevating-author {
    padding: 50px 0px;
    background: url('../images/hero-back-image.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    position: relative;
    z-index: 1;
}

.elevating-button-wrapper button.amz-button {
    border: 2px solid white;
    color: white;
}

section#elevating-author:before {
    position: absolute;
    content: '';
    background: rgb(249 249 249 / 15%);
    height: 100%;
    width: 100%;
    top: 0;
    z-index: -1;
}

.accordion-button:not(.collapsed) {
    background: -webkit-linear-gradient(#344c61bf, #344c61);
    color: white !important;
}

section#faqs button.accordion-button {
    font-size: 18px;
    font-weight: 700 !important;
}

section#faqs {
    padding: 50px 0px;
}

.faqs-heading {
    margin-bottom: 40px;
}

.accordion-body {
    font-family: "Urbanist", serif !important;
}

section#what-our-clients {
    padding: 50px 0px;
    background: url('../images/clients-back-image.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    position: relative;
    z-index: 1;
}

section#what-our-clients h2 {
    color: white;
}

section#what-our-clients:before {
    position: absolute;
    content: '';
    background: #19222d;
    height: 100%;
    width: 100%;
    top: 0;
    z-index: -1;
    opacity: 0.9;
}

.clients-testi-div {
    text-align: center;
    width: 80%;
    margin: 0 auto;
    padding: 0px 0px;
}

.clients-testi-div p.name-clients {
    font-weight: 700 !important;
    font-size: 18px;
}

.clients-heading {
    margin-bottom: 40px;
}

.slick-dots li.slick-active button:before {
    opacity: .75;
    color: #50667a !important;
}

.slick-dots li button:before {
    width: 30px !important;
    height: 20px !important;
    color: white !important;
    text-align: center;
    opacity: unset !important;

}

.footer-image-wrapper img {
    width: 140px;
}

ul.contact-info {
    padding-left: 0;
}

ul.contact-info li {
    list-style: none;
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

ul.contact-info a {
    text-decoration: none;
    color: black;
    text-decoration: none;
    font-weight: 600;
}

footer p {
    color: black !important;
}

footer p a {
    font-family: "Urbanist", serif !important;
    color: black !important;
    text-decoration: none;
    font-weight: 600;
}

input,
textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 5px;
    color: black;
    border: 2px solid #6e6a6a;
    background: white;
    margin-bottom: 10px !important;
    font-family: "Urbanist", serif !important;
}

.form-container {
    padding: 10px 35px 10px 35px;
    border-radius: 10px;
    border-color: transparent;
    padding-bottom: 30px;
    padding-top: 30px;
    box-shadow: 1px 1px 11px 4px #ffff;
    width: 65%;
    background: linear-gradient(357deg, #000000, #344c61);
    margin: 0 auto;
    margin-bottom: 10px;
}

section#contact-form {
    background: linear-gradient(45deg, #edeef0, #e5e6e8), url(../images/contact-back-image.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.contact-button-div button#contact-submit {
    width: 100%;
    background: #445a6e;
    color: white;
}

.contact-from-image-wrapper img {
    margin: 0 auto;
    height: 479px;
}

section#contact-form .row {
    align-items: center;
}

.form-heading h2 {
    color: white;
    margin-bottom: 20px;
}

section#contact-form .contact-sec-1 {
    background: url(../images/contact-img.jpg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    min-height: 660px;
    background-size: contain;
}

footer {
    padding: 60px 0px 0px 0px;
}

footer .text-center.p-4 {
    font-family: "Urbanist", serif !important;
}

section#service-hero-sec {
    padding: 50px 0px;
    background: url('../images/service-back-image.webp'), linear-gradient(135deg, #ed9a9a 0%, #ed9a9a 32%, #fac673 100%);
    position: relative;
    color: white;
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
}

section#service-hero-sec:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ed9a9a 0%, #4d5f6b 32%, #607D8B 100%);
    top: 0;
    z-index: -1;
    opacity: 0.6;
}

section#service-hero-sec .form-container {
    width: 70% !important;
}

section#service-hero-sec .row {
    align-items: center;
}

section#get-your-aspiration {
    padding: 50px 0px;
    background: url(../images/hero-back-image.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom right;
    color: white;
}

section#elevating {
    padding: 50px 0px;

}

section#elevating .row {
    align-items: center;
}

.elevating-image-wrapper img {
    width: 60%;
    display: table;
    margin: 0 auto;
}

section#service-hero-sec p span {
    font-size: 19px;
    font-weight: 700;
}

section#service-hero-sec p {
    margin-bottom: 0;
}

section#about-us-hero-section {
    padding: 50px 0px;
    background: url('../images/about-back-image-min.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: white;
    position: relative;
    z-index: 1;
}

section#about-us-hero-section::before {
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    background: #000000ab;
    top: 0;
    z-index: -1;
}

section#about-us-hero-section .abouts-button-wrapper button.amz-button {
    color: white;
    border: 2px solid white;
}

section#innovative {
    padding: 50px 0px;
}

.innovative-image-wrapper img {
    width: 80%;
    margin: 0 auto;
    display: table;
}

section#innovative .row {
    align-items: center;
}

section#contact-hero-section {
    padding: 100px 0px;
    text-align: center;
    background: url('../images/hire-sec-back--image.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

section#contact-info-form {
    padding: 50px 0px;
}

section#contact-info-form .form-container {
    width: 80%;
}

.form-heading p {
    color: white;
    margin-bottom: 0;
}

.contact-side-card {
    padding: 90px 50px;
    box-shadow: 0px 0px 34px -16px rgba(82, 82, 82, 1);
    background: white;
}

.call-us-heading {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
}

.call-us-heading i {
    font-size: 26px;
    color: #4a5f73;
}

.contact-call-card p a {
    color: black;
    text-decoration: none;
    font-family: "Urbanist", serif !important;
    font-weight: 600;
}

.call-us-heading h3 {
    font-weight: 600;
    font-size: 35px;
}

.contact-call-card {
    margin-bottom: 30px;
}

section#contact-info-form .row {
    align-items: center;
}

a:hover {
    color: black !important;
}

/* modal */
div#quoteModal .modal-content {
    width: 60%;
    margin: 0 auto;
    top: 60px;
    padding: 30px;
    background: url(../images/modal-bg-image.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.modal-content span.close {
    position: absolute;
    right: 10px;
    top: 10px;
    background: #344c61;
    height: 40px;
    width: 40px;
    text-align: center;
    border-radius: 5px;
    line-height: 30px;
    opacity: 1;
    color: white;
    cursor: pointer;
}

div#quoteModal {
    overflow: hidden;
}

.modal-button-div {
    display: table;
    margin: 0 auto;
}
.modal-image-wrapper img {
    width: 100%;
    margin: 0 auto;
    display: table;
}

.modal-content .row {
    align-items: center;
}

/* modal */


@media only screen and (max-width:480px) {
    h1 {
        font-size: 30px !important;
        line-height: 40px !important;
        font-weight: 600 !important;
    }

    p {
        text-align: center;
    }

    h1,
    h2 {
        text-align: center;
    }

    .passionate-card {
        margin-bottom: 20px;
        height: auto;
    }

    section#passionate-cards,
    section#hero,
    section#counter,
    section#custom-books,
    section#hire,
    section#why-choose-us,
    section#portfolio-sec,
    section#elevating-author,
    section#what-our-clients,
    section#contact-form,
    section#faqs,
    section#about-us-hero-section,
    section#innovative,
    section#contact-info-form,
    section#service-hero-sec,
    section#get-your-aspiration,
    section#elevating {
        padding: 30px 0px;
    }
    .elevating-image-wrapper img {
        width: 100%;
        margin-bottom: 20px;
    }    
    section#get-your-aspiration{
        background: unset;
        background-color: #6a757b;
    }
    section#service-hero-sec ul li {
        text-align: left !important;
    }
    section#service-hero-sec .form-container {
        width: 100% !important;
    }       
    section#service-hero-sec ul {
    list-style-position: inside;
    margin: 0 auto;
    display: table;
    margin-top: 10px;
    margin-bottom: 20px;
}
    .call-us-heading {
        justify-content: center;
    }

    section#innovative .row {
        flex-direction: column-reverse;
    }

    section#contact-info-form .form-container {
        width: 100%;
    }

    .abouts-button-wrapper {
        text-align: center;
        margin-bottom: 30px;
    }

    .connect-second-col {
        padding: 0px 10px !important;
        background: rgb(249 249 249);
        text-align: center;
    }

    h2 {
        font-size: 23px !important;
        line-height: 33px !important;
        font-weight: 600 !important;
    }

    p {
        font-size: 14px !important;
    }

    .connect-card-image-wrapper {
        margin: 0 auto;
    }

    .col-lg-6.connect-second-col {
        padding: 30px 10px !important;
    }

    .counter-image-wrapper img {
        width: 50px;
        margin-bottom: 10px;
    }

    .counter-card {

        margin-bottom: 30px;
    }

    .counter-content h3 {
        font-size: 40px;
        line-height: 50px;
        font-weight: 700;
    }

    p br {
        display: none;
    }

    .hire-button-wrapper {
        text-align: center;
    }

    .hero-button-wrapper {
        text-align: center;
    }

    .why-choose-laptop-image {

        text-align: center;
        margin-bottom: 20px;
    }

    .elevating-button-wrapper {
        text-align: center;
    }

    .clients-testi-div {
        width: 100%;
    }

    .form-container {
        width: 100%;
    }

    .hire-image-wrapper img {
        margin-bottom: 20px;
    }

    .custom-books-card {
        height: auto;
        margin-bottom: 20px;
    }

    section#why-choose-us .row :nth-child(2) {
        order: -1;
    }

    #why-choose-us .row>div:nth-child(3) {
        order: -1;
    }

    .laptop-content {
        left: 60px;
        text-align: left !important;
    }

    ul.contact-info li {
        justify-content: center;
    }

    section#custom-books .row {
        padding: 0px 0px;
    }

    section#contact-form .contact-sec-1 {
        display: none;
    }
    div#quoteModal .modal-content{
        width: 100%;
    }
    .modal-image-wrapper img{
        display: none;
    }
}