html {
  scroll-behavior: smooth;
}

/*.main-banner {
    will-change: transform
}*/
.research__item p {
    max-width: 100%;
}
.research__number span {
    width: 60px;
    height: 60px;
    font-size: 36px;
}
.research__item:nth-child(odd) {
    padding-left: 0px;
}
.research__item {
    align-items: flex-start;
    border: 10px solid;
    padding: 20px !important;
    border-radius: 2em;
    margin-bottom: 1em;
    min-height: 13em;
}
.research__number span {
    border:5px solid #212529;
}

.price__item .btn_wrapper, .price__item .wc-btn-secondary {
    height: 40px;
    width: 125px;
    border-radius: 20px;
    font-size: 12px;
    text-transform: uppercase;
}

.price__item .btn_wrapper {
    margin-top: 25px;
}

.price__item .btn_wrapper {
    margin-right: 0;
}

.workflow__area-3 .wf_panel.research__area, .workflow__area-3 .wf_panel.counter__area-3 {
    display: flex;
    flex-wrap: wrap;
}

.workflow__area-3 .wf_panel.research__area > .container, .workflow__area-3 .wf_panel.counter__area-3  > .container {
    margin: auto;
}
.story__area .from-text{
    right: 0px;
}

.hero__title::after{
    display: none;
}

/* Hide all content sections by default */
.accordion-content {
  display: none;
}

.testimonial__text-2{
    margin-top: 62px;
}

.accordion-collapse{
    height: auto !important;
}

.faq__list .accordion-body, .faq__list-6 .accordion-body, .faq__list-3 .accordion-body{
    min-height: 80px !important;
}



@media (min-width: 768px){
    .workflow__number {
        font-size: 60px;
    }
    
    .font-50 {
        font-size: 50px;
    }
}






/*------------------------- Mobile Responsive CSS start ------------------------------------*/
@media (max-width: 650px){
    /*.main-banner{
        transition-timing-function: ease-in;
        transition: 0.2s;
    }*/
     
    :root {
        --circle-width: 32em !important;
    }
   /* body{
        height: auto !important;
        overscroll-behavior: auto !important;
        scroll-behavior: smooth !important;
    }*/
    html, body{
        overflow-x: hidden;
    }
    .scroll-top{
        z-index: 999999;
    }
    .price__item .best-value, .third-heading::after{
        display: none !important;
    }
    .header__area-2 {
        z-index: 1000;
    }
    .banner-heading h1 {
        font-size: 47px !important;
    }
    .about__img img{
        width: 100% !important;
    }
    .img-anim {
        width: 100% !important;
        height: auto !important;
    }
    .about__content p {
        margin-left: 0px !important;
    }
    .workflow__slide p{
        max-width: fit-content;
    }
    .price__item {
        height: 38vh;
    }
    .price__amount {
        top: 54%;
        right: -78px;
        width: 100%;
        display: flex;
    }
    .price__amount > p{
        margin: 19px 10px 0px 0px;
    }
    .research__item{
        display: grid;
    }
    .hero__title::after {
        right: 275px !important;
        color: #fff !important;
        top: -58px !important;
    }
    .portfolio__slide-2 .sec-title span {
        display: contents;
        padding-left: 0;
    }
    .portfolio__area-2 .sec-title-3 span {
        padding-left: 0 !important;
    }
    .story__area .from-text {
        right: -16px;
    }
    .contact__text{
        margin-left: 0;
    }
    h1.second-heading::after{
        display: none;
    }
    .banner-heading h1.third-heading{
        transform: translate(-50%, -25%) !important;
    }
    
    /*.menu-anim{
        padding: 30px 40px;
        line-height: 1.9;
    }
    .menu-anim a{
        color: #fff;
        text-transform: capitalize;
        font-size: 22px;
    }*/
    
}



/*------------------------- IPAD Responsive CSS start ------------------------------------*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .banner-heading h1 {
        font-size: 100px;
    }
    .hero__title::after {
        right: 86%;
        top: -40px;
    }
}


