@media (max-width: 1024px) and (min-width:981px) {
    section.banner .col-8.cont {
        width:90%
    }

    section.cta a.main-btn:hover::after {
        transform: translateX(71%)
    }

    section.cta a.main-btn:hover .icon-container {
        transform: translateX(37%)
    }

    .home-blog-sec .col-lg-4 {
        width: 50%
    }

    section.cta .bottom-content .col-9 {
        padding: 30px
    }

    section.cta .bottom-content .col-3 {
        padding: 30px 30px 30px 0
    }
}

@media (max-width: 980px) {
    .about-us-cont {
        min-height: auto;
    }
        .about-us-cont h2{
       font-size:40px;
    }

    .service-head h2{
         font-size: 28px;
    }

    section.faq .head h2{
        font-size: 28px;
    }

    section.process .col-4 {
        width: 50%;
    }

    section.process {
        padding-bottom: var(--p30);
    }
  
      .process .head h2 {
        font-size: 28px;
    }

    section.blog-wrapper .head h2{
        font-size: 28px;
    }
    section.banner h1 {
        font-size: 40px;
        margin-bottom: 10px
    }

    section.banner .col-8.cont {
        width: 90%
    }

    section.about-us .row {
        flex-direction: column-reverse;
        gap: 30px
    }

    .demo .col-md-8,section.about-us .col-6.about-us-cont,section.about-us .col-6.about-us-img,section.process .col-6 {
        width: 100%
    }

    section.about-us img {
        height: 400px
    }

    section.about-us .about-us-img {
        width: 100%;
        height: 400px;
        float: none;
        margin-left: 0;
        margin-bottom: 30px;
    }

    section.cta .bottom-content .col-9 {
        padding: 30px;
        width: 65%
    }

    section.cta .bottom-content .col-3 {
        padding: 30px 30px 30px 0;
        width: 35%
    }

    section.cta .bottom-content h2 {
        font-size: var(--f28)
    }

    .blog-wrapper {
        padding: var(--p50) var(--p12) var(--p50)
    }

    .home-blog-sec .col-lg-4,section.services .col-4 {
        width: 50%
    }

    .blog-page .bottom-sec {
        padding: 20px
    }

    .blog-page .bottom-sec h3 {
        font-size: var(--f20);
        height: 45px;
    }

    section.services .icon-box h2 {
        font-size: 28px
    }
  
     section.cta, section.faq, section.service-wrapper, section.services {
    /* padding-bottom: 20px; */
    /* padding-top: 30px; */
}
  
}

@media (max-width: 540px) {
  
  section.cta, section.faq, section.service-wrapper, section.services {
        padding-bottom: 30px;
    }
  
  section.process .process-info {
    padding: 20px;
  }
  
      .banner h1, .video-cont h1:before {
        display: block;
    }
  
  
    section.process .col-12{
    padding:0;
  }

  
      .about-us-cont h2 {
        font-size: 28px;
    }
  
  section.custom-solution .custom-solution-info {
    display: block;
}
    section.custom-solution .col-6 {
        width: 100%;
        padding: 0;
    }

    section.process h4 strong {
        font-size: 20px;
    }

    section.process h4 strong:before {
        font-size: 21px;
    }

    section.process .col-4 {
        width: 100%;
        padding: 0;
    }

    section.custom-solution h4 {
        font-size: var(--f20);
        padding-top: 20px;
    }

    section.about-us .about-us-img {
        height: 300px;
    }

    .home-blog-sec .col-lg-4,section.banner .col-8.cont,section.services .col-4 {
        width: 100%;
        padding: 0
    }

    .blog-wrapper {
        padding: var(--p40) var(--p12) var(--p40);
        padding-top: 0;
    }

    .blog-page .bottom-sec {
        padding: 20px
    }

    .blog-page .bottom-sec h3 {
        font-size: var(--f18);
        height: 40px;
    }

    section.faq .accordion-flush .accordion-item .accordion-button,section.faq .accordion-flush .accordion-item .accordion-button.collapsed {
        font-size: 16px;
        padding: 20px 35px;
    }
section.faq .list-faq{
    font-size:18px;
    width:35px;
}
    .demo .col-md-8,.owl-carousel .owl-stage-outer,section.about-us .col-6.about-us-cont,section.about-us .col-6.about-us-img,section.faq .col-12,section.process .col-6,section.service-wrapper .col-12 {
        padding: 0
    }

    .testimonial {
        padding: 25px 20px;
        margin: 0;
        border-radius: 0 50px
    }

    .testimonial .description {
        margin-bottom: 0
    }

    .testimonial .title {
        font-size: 18px
    }

    .demo .owl-nav {
        margin-top: 15px
    }

    section.cta .bottom-content .col-9 {
        padding: 20px;
        width: 100%
    }

    section.cta .bottom-content h2 {
        font-size: var(--f24);
        width: 100%;
        text-align: center
    }

    section.cta .bottom-content .col-3 {
        padding: 0 20px 20px;
        width: 100%;
        justify-content: center
    }

    section.about-us img {
        height: 300px
    }

    section.banner {
        padding-bottom: 0;
        height: auto;
        max-height: 400px;
        padding-top: 0;
    }

    section.banner h1 {
        font-size: 28px;
        margin-bottom: 10px;
        margin-top: 0;
        padding: 0
    }

    section.banner p {
        font-size: 15px;
        height: 150px;
        overflow: hidden
    }

    section.process {
        padding-bottom: 40px;
        padding-top: 30px;
    }

    section.process .head {
        width: 100%;
        margin-bottom: 30px
    }

    section.services .icon-box h2 {
        font-size: 25px;
        margin-bottom: 0
    }

    section.service-wrapper {
        padding-bottom: 0;
        padding-top: 20px;
    }
  
  section.custom-solution .service-head {
    margin-bottom: 60px;
 }
}

@media (max-width: 360px) {
    section.banner h1 {
        font-size:28px;
        padding: 0
    }

    section.banner p {
        margin-bottom: 0
    }

    section.about-us img,section.services .icon-box,section.services .services-area {
        height: 250px
    }

    section.about-us .about-us-img {
        height: 250px;
    }

    section.cta .row p {
        font-size: var(--f16)
    }

    section.cta .bottom-content h2 {
        font-size: var(--f20)
    }

    .blog-page .upper-sec,.blog-page .upper-sec img {
        height: 200px
    }

    .blog-page .admin-area {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px
    }

    section.blog-details-upper h1 {
        font-size: var(--f28)
    }

    section.services .icon-box h2 {
        font-size: 22px;
        margin-bottom: 0
    }

    section.service-wrapper .service-box h2 {
        font-size: 15px
    }
}

@media (max-width: 320px) {
    section.banner {
        padding-bottom:50px;
        height: 430px;
        max-height: 430px
    }
}