@media (min-width:1500px) {
    .container {
        max-width: 1280px
    }
}

@media (min-width:1800px) {
    .container {
        max-width: 1600px
    }
}

@media only screen and (max-width:1600px) {
    html {
        font-size: 17px
    }

    .teamBox .overlay-text h4 {
        font-size: 1.25rem
    }

    .teamSec p {
        font-size: 15px
    }

    .logoForm {
        gap: 1rem;
        width: 100%
    }

    .footerLinks {
        gap: 0
    }

    .bookBox img {
        height: 250px
    }

    .bookBox .overlay {
        padding: 1.5rem;
        bottom: -9rem
    }

    .bookBox h4 {
        font-size: 1.5rem;
        margin-bottom: 1.5rem
    }

    .overlay p {
        min-height: 6.5rem
    }

    .servicesInner h4 {
        font-size: 2.7rem
    }
}

@media only screen and (max-width:1440px) {
    ul.listNum li:nth-child(3) {
        width: 38%
    }

    ul.socialIcons {
        padding: 1.8rem
    }

    html {
        font-size: 16px
    }

    .mainBanner .wiki-writing {
        right: 0
    }

    .innerbanner .banner-2,
    .innerbanner .banner-3 {
        width: 35rem
    }

    .portTag {
        width: 8rem;
        height: 8rem
    }

    .processSec .bookStep {
        bottom: -12rem
    }

    .logoForm {
        gap: 2rem
    }

    .mainBanner .bannerContnt h4 {
        margin-bottom: 1rem
    }

    .mainBanner .bannerContnt p {
        line-height: 1.6;
        width: 85%;
        margin: 0 0 1rem
    }

    .mainBanner .bannerContnt p strong {
        display: block;
        margin-top: 1rem
    }

    .innerbanner ul li,
    .logoSec h6 {
        font-size: 1rem
    }

    .bannerBook {
        right: -1rem;
        bottom: -4rem
    }

    .portSlider img {
        padding: 0 10px
    }

    .projectSec ul li h6,
    .projectSec ul li h6 .count {
        font-size: 2.25rem
    }

    .projectSec ul li p {
        font-size: 13px
    }

    .footerLinks {
        gap: 0;
        flex-direction: column
    }

    .socialLinks ul {
        gap: 11px
    }

    .faqSec {
        padding-top: 0
    }

    .mainBanner .btnSec .themeBtn1,
    .mainBanner .btnSec .themeBtn2 {
        padding: 1.25rem 1.5rem
    }

    .numSec {
        padding: 1.5rem 2rem
    }

    .signupForm h4::before {
        right: 40%
    }

    .innerbanner ul li,
    .listStyledBook li {
        flex: 0 0 46%
    }

    .contactbanner .banner-5 {
        width: 26rem
    }

    .portfolioSec .headingStyleOne h2 {
        margin-top: 2rem
    }

    .teamSec p {
        font-size: 14px
    }
}

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

    .innerbanner ul::before,
    .listStyledBook:before {
        inset: 0 !important
    }

    h2 {
        font-size: 1.9rem
    }

    h3 {
        font-size: 1.75rem
    }

    h4 {
        font-size: 1.5rem
    }

    .mainBanner .bannerContnt p br {
        display: none
    }

    .mainBanner figure {
        margin-bottom: -3rem
    }

    .innerbanner .banner-girl {
        width: 20rem
    }

    .innerbanner .banner-2,
    .innerbanner .banner-3 {
        width: 25rem
    }

    .contactbanner .banner-5 {
        bottom: -15rem
    }

    .ctaContnt h2,
    .ctaContnt p,
    .mainBanner .bannerContnt p {
        width: 100%
    }

    .innerbanner ul,
    .listStyledBook {
        padding: .5rem;
        margin-bottom: 0
    }

    .mainBanner .btnSec {
        margin-top: 2rem
    }

    .mainBanner .btnSec .themeBtn1,
    .mainBanner .btnSec .themeBtn2 {
        padding: 1rem 1.5rem
    }

    .portTag {
        width: 7rem;
        height: 7rem
    }

    .portTag p {
        font-size: 10px
    }

    .processSec .bookStep {
        bottom: -5rem;
        width: 22rem
    }

    .contactBook {
        width: 10rem
    }

    .testiThumb h4 {
        font-size: 1.5rem;
        margin-bottom: 1rem
    }

    .bookBox .overlay {
        padding: 1rem
    }

    .portfolioSec .stokeText {
        top: -3rem
    }

    .servicesBanner .banner-girl {
        width: 38rem
    }

    .teamSec .nav-tabs .nav-link {
        font-size: 1rem
    }

    .sticky .signupForm {
        max-height: 30rem;
        max-width: 100%
    }

    .animationImg {
        width: 10rem;
        right: 0
    }

    .pinSec .animationImg {
        right: 4rem
    }

    .innerbanner .bannerPubImg {
        width: 33rem !important;
        margin-right: -3rem
    }
}

@media only screen and (max-width:1199px) {
    html {
        font-size: 15px
    }

    .navbar-collapse {
        position: fixed;
        top: 0;
        bottom: 0;
        right: -100%;
        background: var(--primary);
        z-index: 4;
        width: calc(100% - 0px);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 3rem 2rem;
        transition: .5s
    }

    .navbar-collapse.show {
        right: 0;
        width: calc(100% - 0px);
        box-shadow: -10px 0 20px #0002;
        overflow-y: auto
    }

    header .navbar .navbar-collapse .navbar-nav {
        margin-left: 0 !important;
        align-items: flex-start;
        gap: 1.5rem
    }

    .mobTogleOpt {
        display: flex;
        gap: 0 2rem
    }

    .mobTogleOpt a i {
        color: var(--primary);
        font-size: 1.25rem
    }

    .navbar-toggler {
        position: relative;
        border: 0;
        padding: 0;
        margin-right: 1rem;
        z-index: 5;
        font-size: 1rem;
        color: var(--primary)
    }

    .navbar-toggler:focus {
        box-shadow: none
    }

    .navbar-toggler.collapsed .fa::before {
        content: "\f0c9"
    }

    .navbar-toggler[aria-expanded=true] .fa:before {
        content: "\f00d";
        color: var(--white)
    }

    header .navbar .navbar-nav .nav-item .nav-link {
        text-align: left !important;
        color: var(--white);
        font-size: 1.25rem
    }

    header .navbar .navbar-collapse .navbar-nav img {
        width: 15rem;
        margin-bottom: 1rem
    }

    header .navbar .navbar-nav .dropdown-menu ul li {
        padding: 8px 0;
        border-radius: 0;
        min-height: auto;
        border-bottom: 1px solid #ededed5c;
        max-width: 100%;
        flex: 0 0 100%
    }

    header .navbar .navbar-nav .dropdown-menu ul li a {
        padding: 0
    }

    header .navbar .navbar-nav .dropdown-menu ul li a h3 {
        font-size: 1.5rem
    }

    header .navbar .navbar-nav .dropdown-item p {
        font-size: 1rem;
        line-height: 1.5
    }

    header .navbar .navbar-nav .nav-item .themeBtn {
        background: var(--theme-color);
        color: var(--black);
        font-size: 1.25rem
    }

    header .container {
        z-index: unset
    }

    .abtContnt .stokeText,
    .audiGirl,
    .contactBook,
    .faqSec img,
    .mainBanner figure,
    .sticky {
        display: none
    }

    .mainBanner .bannerContnt p {
        width: 100%;
        margin: 0 0 2rem
    }

    .innerbanner ul::before,
    .listStyledBook:before {
        inset: 0 !important
    }

    .themeBtn1,
    .themeBtn2 {
        font-size: 1.125rem;
        padding: 1.15rem 1.5rem
    }

    .bookBanner {
        bottom: 0
    }

    .logoSec {
        padding: 2rem 0
    }

    .portSlider.slick-slider .slick-list,
    .portSlider.slick-slider .slick-track {
        margin: 2rem 0 3rem
    }

    .serContactSec .animationImg {
        top: -5rem;
        width: 13rem
    }

    .teamSec p {
        font-size: 12px
    }

    .headingStyleOne.signHead h2,
    .headingStyleOne.signHead h4 {
        font-size: 1.85rem
    }

    .signupForm {
        padding: 2rem 1rem;
        margin-right: 0
    }

    .signupForm h4::before {
        left: -12px;
        right: 30%
    }

    .teamBox .overlay-text h4 {
        font-size: 1rem
    }

    .ctaContnt h2,
    .ctaContnt p {
        width: 100%
    }

    .listNum li {
        gap: 5px
    }

    .listNum li a {
        font-size: 13px
    }

    .listNum {
        padding: 1rem 12px !important
    }

    footer h4 {
        font-size: 1.125rem;
        margin: 3rem 0 2rem
    }

    .teamSec .nav-tabs .nav-link {
        padding: 1rem
    }

    .editingSec {
        margin-top: 0;
        padding-bottom: 5rem
    }

    .thank-hdr h1 {
        font-size: 48px
    }

    .noNav header .tobBar ul .d-block {
        display: none !important
    }

    .bookBox .overlay {
        bottom: -8rem
    }
}

@media only screen and (max-width:991px) {
    html {
        font-size: 14px
    }

    .container {
        position: unset
    }

    .logoSec h6 {
        text-align: center;
        margin-bottom: 1rem
    }

    .logoSlider {
        border: none
    }

    .portTag {
        padding: 25px 10px;
        right: 0;
        top: -1rem;
        width: 6rem;
        height: 6rem
    }

    .portTag p {
        font-size: 8px
    }

    .portfolioSec .animationImg {
        width: 15rem
    }

    .projectSec ul {
        flex-wrap: wrap
    }

    .projectSec ul li {
        flex: 0 0 30%
    }

    .sticky .form-head h2,
    .teamBox .overlay-text h4 {
        font-size: 1.5rem
    }

    .teamSec p {
        font-size: 15px
    }

    .logoForm {
        gap: 1rem
    }

    .logoForm .logo1,
    .logoForm .logo2,
    .logoForm .logo3,
    .logoForm .logo4,
    .logoForm .logo5,
    .logoForm .logo6 {
        margin: 0;
        width: 7rem;
        height: 7rem
    }

    .signupForm {
        margin: 3rem 0 0;
        max-width: 100%
    }

    .signupForm h4::before {
        right: 70%
    }

    .ctaSec {
        background: var(--primary);
        padding-top: 1rem
    }

    .numSec {
        padding: 1.5rem 2rem
    }

    ul.socialIcons {
        display: flex;
        margin-bottom: 1rem;
        padding: 14px 2rem
    }

    .tickCircle {
        width: 1.5rem;
        height: 1.5rem
    }

    .serbox .tickCircle i,
    .servicesList .checkBoxStyle label {
        font-size: 12px
    }

    .serbox ul li {
        padding: 5px 0;
        font-size: 1.125rem;
        line-height: 1.5
    }

    .mainBanner .bannerContnt {
        display: flex;
        flex-direction: column;
        justify-content: center
    }

    .mainBanner .bannerContnt h2 strong,
    .mainBanner .bannerContnt h4 strong {
        display: inline-block
    }

    .mainBanner .bannerContnt p {
        line-height: 1.7
    }

    .animationImg,
    .autherImg,
    .pinSec ul li br {
        display: none
    }

    .bookBox img {
        height: 200px
    }

    .serviceSec .headingStyleThree .stokeText {
        font-size: 3rem;
        margin-bottom: 1rem
    }

    .dropdown-menu.enlarge li {
        flex: 100%
    }

    .archiveSec {
        padding: 4rem 0
    }

    .pinSec ul {
        align-items: flex-start;
        flex-direction: column;
        gap: 2rem
    }

    .pinSec {
        padding: 3rem 0
    }

    .discountStrip h2 {
        font-size: 2rem
    }

    .sticky {
        width: 30.7rem
    }

    .sticky .signupForm {
        padding: 1rem;
        border-radius: 0
    }

    .stepBanner .headingStyleThree .stokeText {
        margin-bottom: -3rem
    }

    .teamSec .nav-tabs .nav-item {
        flex: 0 0 49%
    }

    .teamSec .nav-tabs .nav-item .nav-link {
        width: 100%;
        font-weight: 700
    }

    header .tobBar ul li a {
        font-size: 0
    }

    .servicesBanner ul::before {
        inset: 0
    }

    .servicesForm {
        padding: 2rem 1rem 1rem;
        border-radius: .5rem
    }

    .inputGroup .form-control,
    .servicesList {
        border-radius: 5px
    }

    .servicesList .checkBoxStyle {
        padding: 10px 1rem
    }

    .innerbanner ul,
    .listStyledBook {
        flex-direction: column
    }
}

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

    .archiveSec,
    .editingSec,
    .mainBanner,
    .serContactSec {
        background: linear-gradient(359deg, #151c24, #2f4052) !important
    }

    .servicesForm .themeBtn2,
    .stepTwo .servicesForm .themeBtn2,
    ul.listNum li:nth-child(3) {
        width: 100%
    }

    html {
        font-size: 15px
    }

    header .tobBar ul {
        gap: 2rem
    }

    header .tobBar {
        padding: 1rem 1rem 1rem 0
    }

    header .tobBar ul li a {
        font-size: 0
    }

    .navbar-collapse.show {
        width: calc(100% - 0rem)
    }

    .archiveSec,
    .editingSec,
    .serContactSec {
        padding: 2rem 0
    }

    .bookBox .overlay,
    .ctaSec,
    .processBox,
    .serbox {
        background: linear-gradient(359deg, #151c24, #2f4052)
    }

    .processSec,
    .serviceSec,
    .teamSec {
        background: #51c0cd
    }

    .booksSec {
        background: var(--white);
        padding: 3rem 0 0
    }

    .abtContnt .stokeText,
    .mainBanner .bannerContnt h2 strong,
    .mainBanner .bannerContnt h4 strong {
        display: block
    }

    .mainBanner .bannerContnt p {
        line-height: 1.5;
        margin-bottom: 1rem
    }

    .innerbanner ul::before {
        inset: 0
    }

    .innerbanner ul {
        margin-bottom: 1rem;
        gap: 10px;
        padding: 1rem
    }

    .companyLogoSec .headShadow {
        padding-left: 0
    }

    .abtContnt .stokeText,
    .bookBox img,
    .companyLogoSec .headShadow .stokeText,
    .ctaInner .ctaContnt h2 br,
    .editbox h4 br,
    .headingStyleThree .stokeText,
    .mainBanner .bannerContnt h2 br,
    .mainBanner .bannerContnt h4 br,
    .portfolioSec .stokeText,
    .stokeText,
    .teamSec h5 br,
    .testiThumb .img img,
    .testiThumb .quote img,
    .testimonialSec .headingStyleThree .stokeText {
        display: none
    }

    .projectSec ul {
        gap: .5rem
    }

    .projectSec ul li {
        flex: 0 0 32%
    }

    .serbox h4 {
        font-size: 1.75rem
    }

    .tickCircle {
        width: 2rem;
        height: 2rem
    }

    .socialLinks ul {
        gap: 4px;
        flex-direction: column-reverse;
        justify-content: start;
        align-items: start
    }

    ul.socialIcons {
        flex-direction: row;
        align-items: center
    }

    footer p,
    footer ul li a {
        font-size: 11px;
        margin: 0
    }

    .numSec {
        padding: 0
    }

    .themeBtn1,
    .themeBtn2 {
        padding: 1rem 12px
    }

    .testiThumb {
        padding: 2rem 1rem;
        margin: 2rem 1rem;
        min-height: auto
    }

    .testiThumb .img img {
        width: 9rem
    }

    .slick-dots li {
        width: 1rem;
        height: 2px
    }

    .slick-dots li.slick-active {
        background: var(--theme-color);
        width: 50px
    }

    .portTag {
        width: 8rem;
        height: 8rem;
        padding: 28px 10px
    }

    .portTag p {
        font-size: 10px
    }

    .innerbanner ul li {
        flex: 100%
    }

    .innerbanner ul li img {
        width: 3rem
    }

    .sticky .signupForm {
        padding: 1rem;
        border-radius: 0
    }

    .sticky .form-head h2 {
        font-size: 1.5rem
    }

    .teamBox .overlay-text {
        padding: .5rem;
        background: #0008
    }

    .serbox:after,
    .serbox:before,
    .teamBox .overlay-text:after,
    .teamBox .overlay-text:before {
        content: none
    }

    .teamBox .overlay-text h4 {
        font-size: 1.125rem;
        font-weight: 600
    }

    .teamBox .overlay-text p {
        font-size: .9rem
    }

    .contactbanner ul li {
        font-size: 1rem;
        padding: 3px 0
    }

    .contactbanner ul li img {
        width: 25px
    }

    .pinSec {
        padding: 2rem 0;
        margin-bottom: 2rem
    }

    .servicesList li,
    .teamSec .nav-tabs .nav-item {
        flex: 0 0 48%
    }

    .questionList,
    .servicesList {
        gap: 0
    }

    header .tobBar ul li i {
        font-size: 1.35rem
    }

    .serContactSec h2 {
        text-align: center
    }

    .processSec .headingStyleThree h2,
    .processSec .headingStyleThree h2 span,
    .processSec .headingStyleThree h4 {
        text-align: center;
        color: var(--white)
    }

    .headingStyleThree {
        text-align: center;
        padding: 0 0 2rem
    }

    ul.socialIcons {
        justify-content: center
    }

    .socialIcons li a {
        width: 2.5rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem
    }

    .socialIcons li a img {
        width: 20px
    }

    .serviceSec h2 {
        margin-top: -1rem
    }

    .serviceSec .headingStyleThree h4 {
        margin: 10px 0 0
    }

    .processSec .headingStyleThree,
    .serContactSec .headingStyleThree {
        margin-bottom: 0 !important
    }

    .bookBox {
        margin: 0 10px 1rem
    }

    .teamSec h5 {
        margin-top: 7px
    }

    .pinSec ul li {
        border: none
    }

    .editingSec .headingStyleThree h2 span {
        margin-bottom: 10px
    }

    .designBook {
        min-height: auto;
        padding: 3rem 1rem
    }

    .designBook img {
        width: 7rem;
        top: 0
    }

    .mainBanner .themeBtn1:before {
        content: "75% OFF";
        padding: 5px 10px;
        position: absolute;
        top: -12px;
        right: 10px;
        left: auto;
        width: auto;
        height: auto;
        background: var(--theme-color);
        border: 1px solid;
        border-radius: 4px;
        animation: .5s infinite disc;
        filter: grayscale(0);
        font-weight: 400
    }

    @keyframes disc {

        0%,
        100% {
            background: var(--primary)
        }

        50% {
            background: var(--theme-color)
        }
    }

    .bookBox .overlay {
        inset: 0;
        position: unset
    }

    .stepBanner .headingStyleThree h2 {
        font-size: 3rem
    }

    .portfolioSec .headingStyleOne h2 {
        margin-top: 0
    }
}

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

    .ctaInner .ctaContnt h2,
    .ctaSec {
        margin: 0
    }

    .btnSec a,
    .numSec ul li a {
        width: 100%
    }

    .btnSec {
        flex-direction: column;
        align-items: flex-start
    }

    .btnSec a {
        text-align: center
    }

    .projectSec ul li {
        flex: 0 0 49%
    }

    .logoForm {
        gap: 1rem;
        justify-content: space-evenly;
        padding: 0 0 4rem
    }

    .logoForm .logo {
        width: 8rem !important;
        height: 8rem !important;
        margin: 0 !important
    }

    .signupForm h4::before {
        right: 50%
    }

    .signupForm input {
        height: 3rem
    }

    .ctaSec {
        padding: 1rem 0
    }

    .numSec {
        margin-bottom: 0;
        display: block
    }

    .numSec ul {
        gap: 1rem;
        flex-direction: column;
        align-items: stretch
    }

    ul.socialIcons {
        gap: 2rem
    }

    .privacySec {
        justify-content: center;
        margin-bottom: 1rem
    }

    .portfolioSec .headingStyleOne h2 {
        margin-top: 1rem
    }

    .portfolioSec .headingStyleOne h4 {
        font-size: 1.76rem
    }

    .serviceSec .headingStyleThree .stokeText {
        font-size: 2.5rem;
        margin-bottom: -5rem
    }

    .sticky {
        width: 30rem
    }

    .stepBanner .headingStyleThree .stokeText {
        font-size: 3rem !important;
        margin-bottom: -2rem
    }

    .stokeText {
        display: none
    }

    .processSec .themeBtn2,
    .serviceSec .themeBtn2 {
        background: linear-gradient(359deg, #151c24, #2f4052);
        border: 0
    }

    .processSec .themeBtn2:hover,
    .serviceSec .themeBtn2:hover {
        background: linear-gradient(0deg, #fff, #ccc);
        color: var(--black)
    }

    .wikiImg img {
        height: 160px
    }

    .thank-hdr h1 {
        font-size: 33px;
        line-height: 1
    }

    .thankyouBanner {
        background: var(--primary) !important
    }

    .thank-hdr {
        background: 0 0;
        padding: 1rem
    }

    .mainBanner .bannerContnt h2 span {
        font-weight: 400
    }

    footer h4 {
        margin: 3rem 0 10px;
    }

    footer ul.footerBorder.last:nth-last-child(1) {
        padding-top: 5rem;
    }
}