/*Bhoj food delivery app css starts here*/

@font-face {
    font-family: 'Roboto';
    src: url('../portfolio-fonts/bhoj/Roboto-Regular.woff2') format('woff2'),
    url('../portfolio-fonts/bhoj/Roboto-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@media only screen and (min-width: 1200px){
 .bhoj-detail-main .bhoj-container{
     max-width: 1140px;
     margin: 0 auto;
     padding: 0;
 }
}

.bhoj-detail-main .bhojptb-200{
    padding: 200px 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px){
    .bhoj-detail-main .bhojptb-200{
        padding: 110px 0;
    }
}
@media only screen and (max-width: 1199px){
    .bhoj-detail-main .bhojptb-200{
        padding: 90px 0;
    }
}
@media only screen and (max-width: 991px){
    .bhoj-detail-main .bhojptb-200{
        padding: 70px 0;
    }
}
@media only screen and (max-width: 767px){
    .bhoj-detail-main .bhojptb-200{
        padding: 50px 0;
    }
}
@media only screen and (max-width: 575px){
    .bhoj-detail-main .bhojptb-200{
        padding: 35px 0;
    }
}


.bhoj-detail-main .bhojpb-200{
    padding-bottom: 200px;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px){
    .bhoj-detail-main .bhojpb-200{
        padding-bottom: 110px;
    }
}
@media only screen and (max-width: 1199px){
    .bhoj-detail-main .bhojpb-200{
        padding-bottom: 90px;
    }
}
@media only screen and (max-width: 991px){
    .bhoj-detail-main .bhojpb-200{
        padding-bottom: 70px;
    }
}
@media only screen and (max-width: 767px){
    .bhoj-detail-main .bhojpb-200{
        padding-bottom: 50px;
    }
}
@media only screen and (max-width: 575px){
    .bhoj-detail-main .bhojpb-200{
        padding-bottom: 35px;
    }
}
/*bhoj banner section css */
.bhoj-detail-main .bhoj-new-section-banner{
    background: url("../img/case-study-details/food-delivery-app/webp/bhoj-banner-screen.webp") no-repeat;
    aspect-ratio: auto 1920 / 1600;
    max-width: 100%;
    width: 100%;
    height: auto;
    background-size: cover;
    position: relative;
}
@media only screen and (max-width: 991px) {
    .bhoj-detail-main .bhoj-new-section-banner{
        padding: 50px 0;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .bhoj-detail-main .bhoj-new-section-banner{
        background-position: center;
    }
}

@media only screen and (max-width: 767px) {
    .bhoj-detail-main .bhoj-new-section-banner{
        height: 60vh;
        background-position: center;
    }
}

.bhoj-detail-main .bhoj-new-section-banner .section-banner-main{
    top: 30vh;
    position: absolute;
    max-width: 1140px;
    margin: 0 auto;
}

@media only screen and (max-width: 1600px) {
    .bhoj-detail-main .bhoj-new-section-banner .section-banner-main{
        top: 26vh;
    }
}
@media only screen and (max-width: 1199px) {
    .bhoj-detail-main .bhoj-new-section-banner .section-banner-main{
        max-width: 80%;
        top: 15vh;
    }
}
@media only screen and (max-width: 991px) {
    .bhoj-detail-main .bhoj-new-section-banner .section-banner-main{
        top: 0;
        position: relative;
        max-width: none;
    }
}

.bhoj-detail-main .bhoj-new-section-banner .section-banner-main .banner-span{
    font-size: 1.625rem;
    line-height: 2.438rem;
    color:#121212;
    position: relative;
    margin-bottom: 1rem;
    display: inline-flex;
}

@media only screen and (max-width: 1199px) {
    .bhoj-detail-main .bhoj-new-section-banner .section-banner-main .banner-span{
        margin-bottom: 1.8rem;
    }
}

@media only screen and (max-width: 991px) {
    .bhoj-detail-main .bhoj-new-section-banner .section-banner-main .banner-span{
        margin-bottom: 1.5rem;
    }
}

@media only screen and (max-width: 767px) {
    .bhoj-detail-main .bhoj-new-section-banner .section-banner-main .banner-span{
        font-size: 1.325rem;
        line-height: 2.238rem;
        margin-bottom: 0.5rem;
    }
}

.bhoj-detail-main .bhoj-new-section-banner .section-banner-main .banner-span:after{
    content: '';
    top: 50%;
    width: 20px;
    background-color: #121212;
    height: 2px;
    margin: 0;
    position: absolute;
    right: -35px;
    z-index: 1;
}
@media only screen and (max-width: 575px) {
    .bhoj-detail-main .bhoj-new-section-banner .section-banner-main .banner-span:after{
        content: none;
    }
}

.bhoj-detail-main .bhoj-new-section-banner .section-banner-main h2{
    font-size: 4.375rem;
    line-height: 5.625rem;
    color: #121212;
    transition: all 2s ease-in-out;
}


@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .bhoj-detail-main .bhoj-new-section-banner .section-banner-main h2{
        font-size: 3.3rem;
        line-height: 4.5rem;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .bhoj-detail-main .bhoj-new-section-banner .section-banner-main h2{
        font-size: 3rem;
        line-height: 4.3rem;
    }
}

@media only screen and (max-width: 767px) {
    .bhoj-detail-main .bhoj-new-section-banner .section-banner-main h2{
        font-size: 2rem;
        line-height: 3rem;
    }
}

@media only screen and (max-width: 575px) {
    .bhoj-detail-main .bhoj-new-section-banner .section-banner-main h2{
        font-size: 1.8rem;
        line-height: 2.8rem;
    }
}
@media only screen and (max-width: 375px) {
    .bhoj-detail-main .bhoj-new-section-banner .section-banner-main h2{
        font-size: 1.5rem;
        line-height: 2.3rem;
    }
}
/*bhoj banner section css end*/

/*bhoj about section css*/
.bhoj-detail-main .bhoj-section-ignite-about .banner-container-text {
    position: absolute;
    top: 30rem;
    max-width: 1170px;
    left: 0;
    right: 0;
}

.bhoj-detail-main .bhoj-section-ignite-about .about-text-left{
    position: sticky;
    top: 80px;
}
@media only screen and (max-width: 767px){
    .bhoj-detail-main .bhoj-section-ignite-about .about-text-left{
        position: relative;
        top: 0;
    }
}

.bhoj-detail-main .bhoj-section-ignite-about .about-text-left .small-title {
    font-size: 1.125rem;
    line-height: 1.875rem;
    color: #131313;
    padding: 1rem 0 0.5rem;
    margin-bottom: 0.3rem;
    display: block;
}

@media only screen and (max-width: 767px){
    .bhoj-detail-main .bhoj-section-ignite-about .about-text-left .small-title{
        padding: 0 0 0.5rem;
    }
}

@media only screen and (max-width: 575px){
    .bhoj-detail-main .bhoj-section-ignite-about .about-text-left .small-title{
        padding: 0 0 0.3rem;
    }
}

.bhoj-detail-main .bhoj-section-ignite-about .about-text-left ul{
    margin-bottom: 2.8rem;
}

.bhoj-detail-main .bhoj-section-ignite-about .about-text-left ul li{
    padding-left: 1rem;
    font-family: 'Roboto';
    font-size: 1rem;
    line-height: 1.18rem;
    color: #353535;
    margin-bottom: 1.2rem;
    display: block;
    position: relative;
}

@media only screen and (max-width: 767px){
    .bhoj-detail-main .bhoj-section-ignite-about .about-text-left ul li{
        margin-bottom: 0.8rem;
    }
}

@media only screen and (max-width: 575px){
    .bhoj-detail-main .bhoj-section-ignite-about .about-text-left ul li{
        margin-bottom: 0.5rem;
    }
}

.bhoj-detail-main .bhoj-section-ignite-about .about-text-left ul li:before{
    content: '';
    left: 0;
    background-color: #353535;
    margin: 0;
    height: 2px;
    width: 8px;
    top: 0.4rem;
    position: absolute;
}

.bhoj-detail-main .bhoj-section-ignite-about .about-text-left ul li:last-child{
    margin-bottom: 0;
}
.bhoj-detail-main .bhoj-section-ignite-about .about-text-left ul.links li a{position: relative;}
.bhoj-detail-main .bhoj-section-ignite-about .about-text-left ul.links li a:after{
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background: currentColor;
    bottom: -5px;
    left: 0;
    border-radius: 10px;
    pointer-events: none;
    transform-origin: 100% 50%;
    transform: scale3d(0, 1, 1);
    transition: transform 0.3s;
}

.bhoj-detail-main .bhoj-section-ignite-about .about-text-left ul.links li a:hover:after{
    transform-origin: 0% 50%;
    transform: scale3d(1, 1, 1);
}

.bhoj-detail-main .bhoj-section-ignite-about .about-text-right .sub-heading {
    font-size: 3.125rem;
    line-height: 4.688rem;
    color: #131313;
    margin-bottom: 1.7rem;
    display: block;
}
@media only screen and (max-width: 1199px) {
    .bhoj-detail-main .bhoj-section-ignite-about .about-text-right .sub-heading {
        margin-bottom: 2rem;
    }
}
@media only screen and (max-width: 991px) {
    .bhoj-detail-main .bhoj-section-ignite-about .about-text-right .sub-heading {
        font-size: 2.5rem;
        line-height: 3.7rem;
        margin-bottom: 1.5rem;
    }
}

@media only screen and (max-width: 767px) {
    .bhoj-detail-main .bhoj-section-ignite-about .about-text-right .sub-heading {
        font-size: 2rem;
        line-height: 3.2rem;
        margin-bottom: 1rem;
    }
}
@media only screen and (max-width: 575px) {
    .bhoj-detail-main .bhoj-section-ignite-about .about-text-right .sub-heading {
        margin-bottom: 0.7rem;
        font-size: 1.8rem;
        line-height: 2.5rem;
    }
}
.bhoj-detail-main .bhoj-section-ignite-about .about-text-right .sub-heading-details{
    font-family: 'Roboto';
    font-size: 1.375rem;
    line-height: 2rem;
    color: #353535;
    margin-bottom: 1.3rem;
}
@media only screen and (max-width: 767px) {
    .bhoj-detail-main .bhoj-section-ignite-about .about-text-right .sub-heading-details{
        font-size: 1.12rem;
        line-height: 1.75rem;
        margin-bottom: 0;
    }
}


.bhoj-detail-main .bhoj-section-ignite-about .about-text-right ul li{
    padding-left: 1rem;
    font-family: 'Roboto';
    font-size: 1.375rem;
    line-height: 2rem;
    color: #353535;
    margin-bottom: 0.8rem;
    display: block;
    position: relative;
}
@media only screen and (max-width: 767px) {
    .bhoj-detail-main .bhoj-section-ignite-about .about-text-right ul li{
        font-size: 1.12rem;
        line-height: 1.9rem;
        margin-bottom: 0.3rem;
    }
}
@media only screen and (max-width: 575px) {
    .bhoj-detail-main .bhoj-section-ignite-about .about-text-right ul li{
        line-height: 1.75rem;
    }
}
.bhoj-detail-main .bhoj-section-ignite-about .about-text-right ul li:last-child{
    margin-bottom: 0;
}
.bhoj-detail-main .bhoj-section-ignite-about .about-text-right ul li:before{
    content: '';
    left: 0;
    background-color: #353535;
    margin: 0;
    height: 2px;
    width: 8px;
    top: 0.9rem;
    position: absolute;
}

@media only screen and (max-width: 575px) {
    .bhoj-detail-main .bhoj-section-ignite-about .about-text-right ul li:before{
        top: 0.8rem;
    }
}

.bhoj-detail-main .bhoj-section-ignite-about .about-text-right .challenges-sub-heading-details{
    font-family: 'Roboto';
    font-size: 1.375rem;
    line-height: 2rem;
    color: #353535;
    margin-bottom: 0.5rem;
    position: relative;
}

@media only screen and (max-width: 767px) {
    .bhoj-detail-main .bhoj-section-ignite-about .about-text-right .challenges-sub-heading-details{
        font-size: 1.12rem;
        line-height: 1.9rem;
    }
}

@media only screen and (max-width: 575px) {
    .bhoj-detail-main .bhoj-section-ignite-about .about-text-right .challenges-sub-heading-details{
        line-height: 1.75rem;
    }
}

/*bhoj about section css end*/

/*bhoj-section-big-img-one section css*/
.bhoj-detail-main .bhoj-section-big-img-one .big-img-main{
    margin-bottom: 3.125rem;
}
@media only screen and (max-width: 991px){
    .bhoj-detail-main .bhoj-section-big-img-one .big-img-main{
        margin-bottom: 1.875rem;
    }
}
.bhoj-detail-main .bhoj-section-big-img-one .big-img-main .parent img{
    width: 100%;
    aspect-ratio: auto 2280 / 1520;
    max-width: 100%;
    height: auto;
}
.bhoj-detail-main .bhoj-section-big-img-one .small-img-left{
    margin-bottom: 3.125rem;
    padding-right: 10px;
}
@media only screen and (max-width: 991px){
    .bhoj-detail-main .bhoj-section-big-img-one .small-img-left{
        padding-right: 0;
        margin-bottom: 1.875rem;
    }
}

.bhoj-detail-main .bhoj-section-big-img-one .small-img-left .parent img{
    aspect-ratio: auto 1092 / 1520;
    width: 100%;
    height: auto;
}

.bhoj-detail-main .bhoj-section-big-img-one .small-img-right{
    margin-bottom: 3.125rem;
    padding-left: 10px;
}
@media only screen and (max-width: 991px){
    .bhoj-detail-main .bhoj-section-big-img-one .small-img-right{
        padding-left: 0;
        margin-bottom: 1.875rem;
    }
}

.bhoj-detail-main .bhoj-section-big-img-one .small-img-left .parent img{
    aspect-ratio: auto 1092 / 1520;
    width: 100%;
    height: auto;
}
/*bhoj-section-big-img-one section css ends*/

/*bhoj features section css*/
.bhoj-detail-main .bhoj-section-development-content .development-main .sub-heading{
    font-size: 3.125rem;
    line-height: 4.688rem;
    color: #131313;
    margin-bottom: 5.625rem;
    display: block;
}
@media only screen and (max-width: 1199px) {
    .bhoj-detail-main .bhoj-section-development-content .development-main .sub-heading{
        margin-bottom: 2rem;
    }
}

@media only screen and (max-width: 991px) {
    .bhoj-detail-main .bhoj-section-development-content .development-main .sub-heading{
        font-size: 2.5rem;
        line-height: 3.7rem;
        margin-bottom: 1.5rem;
    }
}
@media only screen and (max-width: 767px) {
    .bhoj-detail-main .bhoj-section-development-content .development-main .sub-heading{
        font-size: 2rem;
        line-height: 3.2rem;
        margin-bottom: 1rem;
    }
}

@media only screen and (max-width: 575px) {
    .bhoj-detail-main .bhoj-section-development-content .development-main .sub-heading{
        font-size: 1.8rem;
        line-height: 2.5rem;
        margin-bottom: 0.7rem;
    }
}



.bhoj-detail-main .bhoj-section-development-content .development-main p{
    font-family: 'Roboto';
    font-size: 2.2rem;
    line-height: 3.4rem;
    color: #353535;
    margin-bottom: 8rem;
    display: block;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .bhoj-detail-main .bhoj-section-development-content .development-main p{
        margin-bottom: 4rem;
    }
}
@media only screen and (max-width: 767px) {
    .bhoj-detail-main .bhoj-section-development-content .development-main p{
        font-size: 1.8rem;
        line-height: 3rem;
        margin-bottom: 4rem;
    }
}
@media only screen and (max-width: 767px) {
    .bhoj-detail-main .bhoj-section-development-content .development-main .development-point-main .development-point.last{
        margin-top: 0.3rem;
    }
}

.bhoj-detail-main .bhoj-section-development-content .development-main .development-point-main .development-point ul li{
    padding-left: 1rem;
    font-family: 'Roboto';
    font-size: 1.375rem;
    line-height: 2rem;
    color: #353535;
    margin-bottom: 1.2rem;
    display: block;
    position: relative;
}
@media only screen and (max-width: 767px) {
    .bhoj-detail-main .bhoj-section-development-content .development-main .development-point-main .development-point ul li{
        font-size: 1.12rem;
        line-height: 1.9rem;
        margin-bottom: 0.3rem;
    }
}

@media only screen and (max-width: 575px) {
    .bhoj-detail-main .bhoj-section-development-content .development-main .development-point-main .development-point ul li{
        line-height: 1.75rem;
    }
}

.bhoj-detail-main .bhoj-section-development-content .development-main .development-point-main .development-point ul li:last-child{
    margin-bottom: 0;
}

.bhoj-detail-main .bhoj-section-development-content .development-main .development-point-main .development-point ul li:before{
    content: '';
    left: 0;
    background-color: #353535;
    margin: 0;
    height: 2px;
    width: 8px;
    top: 0.9rem;
    position: absolute;
}

@media only screen and (max-width: 575px){
    .bhoj-detail-main .bhoj-section-development-content .development-main .development-point-main .development-point ul li:before{
        top: 0.8rem;
    }
}

/*bhoj features section css ends*/

/*bhoj big image two section css*/
.bhoj-detail-main .bhoj-section-big-img-two .big-img-main{margin-bottom: 3.125rem;}
@media only screen and (max-width: 991px){
    .bhoj-detail-main .bhoj-section-big-img-two .big-img-main{
        margin-bottom: 1.875rem;
    }
}
.bhoj-detail-main .bhoj-section-big-img-two .big-img-main .parent img{
    width: 100%;
    aspect-ratio: auto 2280 / 1520;
    max-width: 100%;
    height: auto;
}
.bhoj-detail-main .bhoj-section-big-img-two .small-img-left{
    margin-bottom: 3.125rem;
    padding-right: 10px;
}
@media only screen and (max-width: 991px){
    .bhoj-detail-main .bhoj-section-big-img-two .small-img-left{
        padding-right: 0;
        margin-bottom: 1.875rem;
    }
}
.bhoj-detail-main .bhoj-section-big-img-two .small-img-left .parent img{
    aspect-ratio: auto 1092 / 1520;
    width: 100%;
    height: auto;
}

.bhoj-detail-main .bhoj-section-big-img-two .small-img-right{
    margin-bottom: 3.125rem;
    padding-left: 10px;
}
@media only screen and (max-width: 991px){
    .bhoj-detail-main .bhoj-section-big-img-two .small-img-right{
        padding-left: 0;
        margin-bottom: 1.875rem;
    }
}

.bhoj-detail-main .bhoj-section-big-img-two .small-img-left .parent img{
    aspect-ratio: auto 1092 / 1520;
    width: 100%;
    height: auto;
}
/*bhoj big image two section css ends*/

/*bhoj features two section css*/
.bhoj-detail-main .bhoj-section-development-content-features .development-main .sub-heading{
    font-size: 3.125rem;
    line-height: 4.688rem;
    color: #131313;
    margin-bottom: 5.625rem;
    display: block;
}
@media only screen and (max-width: 1199px) {
    .bhoj-detail-main .bhoj-section-development-content-features .development-main .sub-heading{
        margin-bottom: 2rem;
    }
}

@media only screen and (max-width: 991px) {
    .bhoj-detail-main .bhoj-section-development-content-features .development-main .sub-heading{
        font-size: 2.5rem;
        line-height: 3.7rem;
        margin-bottom: 1.5rem;
    }
}
@media only screen and (max-width: 767px) {
    .bhoj-detail-main .bhoj-section-development-content-features .development-main .sub-heading{
        font-size: 2rem;
        line-height: 3.2rem;
        margin-bottom: 1rem;
    }
}

@media only screen and (max-width: 575px) {
    .bhoj-detail-main .bhoj-section-development-content-features .development-main .sub-heading{
        font-size: 1.8rem;
        line-height: 2.5rem;
        margin-bottom: 0.7rem;
    }
}

@media only screen and (max-width: 767px) {
    .bhoj-detail-main .bhoj-section-development-content-features .development-main .development-point-main .development-point.last{
        margin-top: 0.3rem;
    }
}

.bhoj-detail-main .bhoj-section-development-content-features .development-main .development-point-main .development-point ul li{
    padding-left: 1rem;
    font-family: 'Roboto';
    font-size: 1.375rem;
    line-height: 2rem;
    color: #353535;
    margin-bottom: 1.2rem;
    display: block;
    position: relative;
}

@media only screen and (max-width: 767px){
    .bhoj-detail-main .bhoj-section-development-content-features .development-main .development-point-main .development-point ul li{
        font-size: 1.12rem;
        line-height: 1.9rem;
        margin-bottom: 0.3rem;
    }
}

@media only screen and (max-width: 575px){
    .bhoj-detail-main .bhoj-section-development-content-features .development-main .development-point-main .development-point ul li{
        line-height: 1.75rem;
    }
}
.bhoj-detail-main .bhoj-section-development-content-features .development-main .development-point-main .development-point ul li:last-child{
    margin-bottom: 0;
}
.bhoj-detail-main .bhoj-section-development-content-features .development-main .development-point-main .development-point ul li:before{
    content: '';
    left: 0;
    background-color: #353535;
    margin: 0;
    height: 2px;
    width: 8px;
    top: 0.9rem;
    position: absolute;
}
@media only screen and (max-width: 575px) {
    .bhoj-detail-main .bhoj-section-development-content-features .development-main .development-point-main .development-point ul li:before{
        top: 0.8rem;
    }
}
.bhoj-detail-main .bhoj-section-development-content-features .development-main .development-point-main .col-md-6:nth-last-child(1) .development-point{
    margin-bottom: 0;
}
.bhoj-detail-main .bhoj-section-development-content-features .development-main .development-point-main .col-md-6:nth-last-child(2) .development-point{
    margin-bottom: 0;
}
/*bhoj features two section css ends*/

/*bhoj big image three section css*/
.bhoj-detail-main .bhoj-section-big-img-three .big-img-main{margin-bottom: 3.125rem;}
@media only screen and (max-width: 991px){
    .bhoj-detail-main .bhoj-section-big-img-three .big-img-main{
        margin-bottom: 1.875rem;
    }
}
.bhoj-detail-main .bhoj-section-big-img-three .big-img-main .parent img{
    width: 100%;
    aspect-ratio: auto 2280 / 1520;
    max-width: 100%;
    height: auto;
}
.bhoj-detail-main .bhoj-section-big-img-three .small-img-left{
    margin-bottom: 3.125rem;
    padding-right: 10px;
}
@media only screen and (max-width: 991px){
    .bhoj-detail-main .bhoj-section-big-img-three .small-img-left{
        padding-right: 0;
        margin-bottom: 1.875rem;
    }
}

.bhoj-detail-main .bhoj-section-big-img-three .small-img-left .parent img{
    aspect-ratio: auto 1092 / 1520;
    width: 100%;
    height: auto;
}

.bhoj-detail-main .bhoj-section-big-img-three .small-img-right{
    margin-bottom: 3.125rem;
    padding-left: 10px;
}
@media only screen and (max-width: 991px){
    .bhoj-detail-main .bhoj-section-big-img-three .small-img-right{
        padding-left: 0;
        margin-bottom: 1.875rem;
    }
}

.bhoj-detail-main .bhoj-section-big-img-three .small-img-left .parent img{
    aspect-ratio: auto 1092 / 1520;
    width: 100%;
    height: auto;
}
/*bhoj big image three section css ends*/

/*bhoj features three section css*/
.bhoj-detail-main .bhoj-section-development-content-three .development-main .sub-heading{
    font-size: 3.125rem;
    line-height: 4.688rem;
    color: #131313;
    margin-bottom: 5.625rem;
    display: block;
}
@media only screen and (max-width: 1199px) {
    .bhoj-detail-main .bhoj-section-development-content-three .development-main .sub-heading{
        margin-bottom: 2rem;
    }
}

@media only screen and (max-width: 991px) {
    .bhoj-detail-main .bhoj-section-development-content-three .development-main .sub-heading{
        font-size: 2.5rem;
        line-height: 3.7rem;
        margin-bottom: 1.5rem;
    }
}
@media only screen and (max-width: 767px) {
    .bhoj-detail-main .bhoj-section-development-content-three .development-main .sub-heading{
        font-size: 2rem;
        line-height: 3.2rem;
        margin-bottom: 1rem;
    }
}

@media only screen and (max-width: 575px) {
    .bhoj-detail-main .bhoj-section-development-content-three .development-main .sub-heading{
        font-size: 1.8rem;
        line-height: 2.5rem;
        margin-bottom: 0.7rem;
    }
}

@media only screen and (max-width: 575px){
    .bhoj-detail-main .bhoj-section-development-content-three .development-main .development-point-main .development-point.last{
        margin-top: 0.3rem;
    }
}

.bhoj-detail-main .bhoj-section-development-content-three .development-main .development-point-main .development-point ul li{
    padding-left: 1rem;
    font-family: 'Roboto';
    font-size: 1.375rem;
    line-height: 2rem;
    color: #353535;
    margin-bottom: 1.2rem;
    display: block;
    position: relative;
}

@media only screen and (max-width: 767px){
    .bhoj-detail-main .bhoj-section-development-content-three .development-main .development-point-main .development-point ul li{
        font-size: 1.12rem;
        line-height: 1.9rem;
        margin-bottom: 0.3rem;
    }
}

@media only screen and (max-width: 575px){
    .bhoj-detail-main .bhoj-section-development-content-three .development-main .development-point-main .development-point ul li{
        line-height: 1.75rem;
    }
}

.bhoj-detail-main .bhoj-section-development-content-three .development-main .development-point-main .development-point ul li:last-child{
    margin-bottom: 0;
}

.bhoj-detail-main .bhoj-section-development-content-three .development-main .development-point-main .development-point ul li:before{
    content: '';
    left: 0;
    background-color: #353535;
    margin: 0;
    height: 2px;
    width: 8px;
    top: 0.9rem;
    position: absolute;
}
@media only screen and (max-width: 575px) {
    .bhoj-detail-main .bhoj-section-development-content-three .development-main .development-point-main .development-point ul li:before{
        top: 0.8rem;
    }
}
.bhoj-detail-main .bhoj-section-development-content-three .development-main .development-point-main .col-md-6:nth-last-child(1) .development-point{
    margin-bottom: 0;
}
.bhoj-detail-main .bhoj-section-development-content-three .development-main .development-point-main .col-md-6:nth-last-child(2) .development-point{
    margin-bottom: 0;
}
/*bhoj features three section css ends*/

/*bhoj big image four section css*/
.bhoj-detail-main .bhoj-section-big-img-four .big-img-main{margin-bottom: 3.125rem;}
@media only screen and (max-width: 991px){
    .bhoj-detail-main .bhoj-section-big-img-four .big-img-main{
        margin-bottom: 1.875rem;
    }
}
.bhoj-detail-main .bhoj-section-big-img-four .big-img-main .parent img{
    width: 100%;
    aspect-ratio: auto 2280 / 1520;
    max-width: 100%;
    height: auto;
}
.bhoj-detail-main .bhoj-section-big-img-four .small-img-left{
    margin-bottom: 3.125rem;
    padding-right: 10px;
}
@media only screen and (max-width: 576px){
    .bhoj-detail-main .bhoj-section-big-img-four .small-img-left{
        @media only screen and (min-width: 576px) {
            width: calc(100% - 8px);
            margin-right: auto;
        }
    }
}
.bhoj-detail-main .bhoj-section-big-img-four .small-img-left .parent img{
    aspect-ratio: auto 1092 / 1520;
    width: 100%;
    height: auto;
}

.bhoj-detail-main .bhoj-section-big-img-four .small-img-right{
    margin-bottom: 3.125rem;
    padding-left: 10px;
}
@media only screen and (max-width: 576px){
    .bhoj-detail-main .bhoj-section-big-img-four .small-img-right{
        @media only screen and (min-width: 576px) {
            width: calc(100% - 8px);
            margin-left: auto;
        }
    }
}
.bhoj-detail-main .bhoj-section-big-img-four .small-img-left .parent img{
    aspect-ratio: auto 1092 / 1520;
    width: 100%;
    height: auto;
}
/*bhoj big image four section css ends*/

/*bhoj technology stack section css */
.bhoj-detail-main .bhoj-section-technology-stacks-ts .development-main .sub-heading{
    font-size: 3.125rem;
    line-height: 4.688rem;
    color: #131313;
    margin-bottom: 5.625rem;
    display: block;
}
@media only screen and (max-width: 1199px) {
    .bhoj-detail-main .bhoj-section-technology-stacks-ts .development-main .sub-heading{
        margin-bottom: 2rem;
    }
}
@media only screen and (max-width: 991px) {
    .bhoj-detail-main .bhoj-section-technology-stacks-ts .development-main .sub-heading{
        font-size: 2.5rem;
        line-height: 3.7rem;
        margin-bottom: 1.5rem;
    }
}
@media only screen and (max-width: 767px) {
    .bhoj-detail-main .bhoj-section-technology-stacks-ts .development-main .sub-heading{
        font-size: 2rem;
        line-height: 3.2rem;
        margin-bottom: 1.9rem;
    }
}
@media only screen and (max-width: 575px) {
    .bhoj-detail-main .bhoj-section-technology-stacks-ts .development-main .sub-heading{
        font-size: 1.8rem;
        line-height: 2.5rem;
        margin-bottom: 1.5rem;
    }
}
.bhoj-detail-main .bhoj-section-technology-stacks-ts .development-main .technology-stacks-main ul{
    gap: 32px;
}

@media only screen and (max-width: 1199px) {
    .bhoj-detail-main .bhoj-section-technology-stacks-ts .development-main .technology-stacks-main ul{
        gap: 34px;
    }
}
@media only screen and (max-width: 991px) {
    .bhoj-detail-main .bhoj-section-technology-stacks-ts .development-main .technology-stacks-main ul{
        gap: 30px;
    }
}
@media only screen and (max-width: 575px) {
    .bhoj-detail-main .bhoj-section-technology-stacks-ts .development-main .technology-stacks-main ul{
        gap: 15px;
    }
}

.bhoj-detail-main .bhoj-section-technology-stacks-ts .development-main .technology-stacks-main ul li{
    min-width: 212px;
    width: calc(25% - 32px);
}
@media only screen and (max-width: 1199px) {
    .bhoj-detail-main .bhoj-section-technology-stacks-ts .development-main .technology-stacks-main ul li{
        width: calc(33.33% - 23px);
    }
}
@media only screen and (max-width: 767px) {
    .bhoj-detail-main .bhoj-section-technology-stacks-ts .development-main .technology-stacks-main ul li{
        width: calc(33.33% - 23px);
        min-width: max-content;
    }
}
@media only screen and (max-width: 575px) {
    .bhoj-detail-main .bhoj-section-technology-stacks-ts .development-main .technology-stacks-main ul li{
        width: calc(33.33% - 10px);
    }
}

@media only screen and (max-width:480px) {
    .bhoj-detail-main .bhoj-section-technology-stacks-ts .development-main .technology-stacks-main ul li{
        width: calc(50% - 8px);
    }
}

.bhoj-detail-main .bhoj-section-technology-stacks-ts .development-main .technology-stacks-main ul li .tech-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 18px;
}
@media only screen and (max-width:480px) {
    .bhoj-detail-main .bhoj-section-technology-stacks-ts .development-main .technology-stacks-main ul li .tech-box{
        gap: 12px;
    }
}
.bhoj-detail-main .bhoj-section-technology-stacks-ts .development-main .technology-stacks-main ul li .tech-box.kotlin-bg{
    background-color: rgba(0,152,222,0.05);
}
.bhoj-detail-main .bhoj-section-technology-stacks-ts .development-main .technology-stacks-main ul li .tech-box.swift-bg{
    background-color: rgba(227,159,58,0.05);
}
.bhoj-detail-main .bhoj-section-technology-stacks-ts .development-main .technology-stacks-main ul li .tech-box.laravel-bg{
    background-color: rgba(255,45,32,0.05);
}
.bhoj-detail-main .bhoj-section-technology-stacks-ts .development-main .technology-stacks-main ul li .tech-box.mysql-bg{
    background-color: rgba(255,250,241,0.35);
}
.bhoj-detail-main .bhoj-section-technology-stacks-ts .development-main .technology-stacks-main ul li .tech-box.vue-bg{
    background-color: rgba(77,186,135,0.05);
}
.bhoj-detail-main .bhoj-section-technology-stacks-ts .development-main .technology-stacks-main ul li .tech-box .img-box{
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media only screen and (max-width: 480px){
    .bhoj-detail-main .bhoj-section-technology-stacks-ts .development-main .technology-stacks-main ul li .tech-box .img-box{
        height: 50px;
    }
}
@media only screen and (max-width: 480px){
    .bhoj-detail-main .bhoj-section-technology-stacks-ts .development-main .technology-stacks-main ul li .tech-box .img-box img{
        max-width: 80%;
    }
}

/*bhoj technology stack section css ends*/

/*bhoj testimonial section css*/


.bhoj-detail-main .bhoj-section-detailpage-testimonial .testimonial-text{
    max-width: 927px;
}
@media only screen and (max-width: 991px){
    .bhoj-detail-main .bhoj-section-detailpage-testimonial .testimonial-text{
        max-width: none;
        padding-left: 30px;
    }
}
@media only screen and (max-width: 575px){
    .bhoj-detail-main .bhoj-section-detailpage-testimonial .testimonial-text{
        padding-left: 15px;
    }
}

.bhoj-detail-main .bhoj-section-detailpage-testimonial .testimonial-text .left-quote {
    position: absolute;
    top: -10px;
    left: -40px;
}
@media only screen and (max-width: 991px){
    .bhoj-detail-main .bhoj-section-detailpage-testimonial .testimonial-text .left-quote{
        left: 0;
    }
}


.bhoj-detail-main .bhoj-section-detailpage-testimonial .testimonial-text .right-quote {
    margin-left: -32px;
}

.bhoj-detail-main .bhoj-section-detailpage-testimonial .testimonial-text p{
    font-size: 1.875rem;
    line-height: 3.125rem;
    color: #131313;
    margin-bottom: 0;
    display: block;
}

@media only screen and (max-width: 991px){
    .bhoj-detail-main .bhoj-section-detailpage-testimonial .testimonial-text p{
        font-size: 1.375rem;
        line-height: 2.5rem;
    }
}

@media only screen and (max-width: 767px){
    .bhoj-detail-main .bhoj-section-detailpage-testimonial .testimonial-text p{
        font-size: 1.12rem;
        line-height: 2.12rem;
    }
}

.bhoj-detail-main .bhoj-section-detailpage-testimonial .ceo-details{
    margin: 2.5rem 0 0;
    gap: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px){
    .bhoj-detail-main .bhoj-section-detailpage-testimonial .ceo-details{
        margin: 2.5rem 0 0;
    }
}
@media only screen and (max-width: 575px){
    .bhoj-detail-main .bhoj-section-detailpage-testimonial .ceo-details{
        margin: 1.875rem 0 0;
        gap: 15px;
    }
}
@media only screen and (max-width: 375px){
    .bhoj-detail-main .bhoj-section-detailpage-testimonial .ceo-details{
        flex-direction: column;
        align-items: start!important;
    }
}

.bhoj-detail-main .bhoj-section-detailpage-testimonial .ceo-details .ceo-img img{
    width: 100px;
    aspect-ratio: auto 200 / 200;
    max-width: 100%;
    height: auto;
    border-radius: 99em;
    overflow: hidden;
}
@media only screen and (max-width: 575px){
    .bhoj-detail-main .bhoj-section-detailpage-testimonial .ceo-details .ceo-img img{
        width: 70px;
    }
}

.bhoj-detail-main .bhoj-section-detailpage-testimonial .ceo-details .ceo-wrap span{
    font-size: 1.375rem;
    line-height: 2rem;
    color: #131313;
    margin-bottom: 0;
    display: block;
}
@media only screen and (max-width: 767px){
    .bhoj-detail-main .bhoj-section-detailpage-testimonial .ceo-details .ceo-wrap span{
        font-size: 1.12rem;
        line-height: 1.9rem;
    }
}

.bhoj-detail-main .bhoj-section-detailpage-testimonial .ceo-details .ceo-wrap p{
    font-family: 'Roboto';
    font-size: 1.375rem;
    line-height: 2rem;
    color: #353535;
    opacity: 0.8;
    margin-bottom: 0;
    display: block;
}

@media only screen and (max-width: 767px){
    .bhoj-detail-main .bhoj-section-detailpage-testimonial .ceo-details .ceo-wrap p{
        font-size: 1.12rem;
        line-height: 1.9rem;
    }
}

/*bhoj testimonial section css ends*/

/*bhoj result section css*/
.bhoj-detail-main .bhoj-section-the-result .the-result{
    margin:0  0 5rem;
}
@media only screen and (max-width: 991px) {
    .bhoj-detail-main .bhoj-section-the-result .the-result{
        margin:  0 0 3rem;
    }
}

@media only screen and (max-width: 767px) {
    .bhoj-detail-main .bhoj-section-the-result .the-result{
        margin: 0;
    }
}
.bhoj-detail-main .bhoj-section-the-result .the-result h2{
    font-size: 3.125rem;
    line-height: 4.688rem;
    color: #131313;
    margin-bottom: 1.5rem;
    display: block;
}
@media only screen and (max-width: 1199px) {
    .bhoj-detail-main .bhoj-section-the-result .the-result h2{
       margin-bottom: 2rem;
    }
}
@media only screen and (max-width: 991px) {
    .bhoj-detail-main .bhoj-section-the-result .the-result h2{
        font-size: 2.5rem;
        line-height: 3.7rem;
        margin-bottom: 1.5rem;
    }
}

@media only screen and (max-width: 767px) {
    .bhoj-detail-main .bhoj-section-the-result .the-result h2{
        font-size: 2rem;
        line-height: 3.2rem;
        margin-bottom: 1rem;
    }
}

@media only screen and (max-width: 575px) {
    .bhoj-detail-main .bhoj-section-the-result .the-result h2{
        font-size: 1.8rem;
        line-height: 2.5rem;
        margin-bottom: 0.7rem;
    }
}

.bhoj-detail-main .bhoj-section-the-result .the-result .sub-heading-details{
    font-family: 'Roboto';
    font-size: 1.375rem;
    line-height: 2rem;
    color: #353535;
    margin-bottom: 1.2rem;
    display: block;
    max-width: 950px;
}
@media only screen and (max-width: 767px){
    .bhoj-detail-main .bhoj-section-the-result .the-result .sub-heading-details{
        font-size: 1.12rem;
        line-height: 1.9rem;
        margin-bottom: 0.8rem;
    }
}
@media only screen and (max-width: 575px){
    .bhoj-detail-main .bhoj-section-the-result .the-result .sub-heading-details{
        line-height: 1.75rem;
    }
}


.bhoj-detail-main .bhoj-section-the-result .achievement-outer{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 50px;
}

@media only screen and (max-width: 991px){
    .bhoj-detail-main .bhoj-section-the-result .achievement-outer{
        grid-gap: 30px;
    }
}
@media only screen and (max-width: 767px){
    .bhoj-detail-main .bhoj-section-the-result .achievement-outer{
        margin-top: 30px;
    }
}
@media only screen and (max-width: 575px){
    .bhoj-detail-main .bhoj-section-the-result .achievement-outer{
        grid-gap: 15px;
    }
}

.bhoj-detail-main .bhoj-section-the-result .achievement-outer .achivements-download  .numbers{
    font-size: 2.5rem;
    line-height: 3.75rem;
    color: #131313;
    margin-bottom: 1rem;
}
@media only screen and (max-width: 991px) {
    .bhoj-detail-main .bhoj-section-the-result .achievement-outer .achivements-download  .numbers{
        font-size: 2rem;
        line-height: 3.5rem;
    }
}

@media only screen and (max-width: 767px) {
    .bhoj-detail-main .bhoj-section-the-result .achievement-outer .achivements-download  .numbers{
        font-size: 1.5rem;
        line-height: 2.5rem;
    }
}


.bhoj-detail-main .bhoj-section-the-result .achievement-outer .achivements-download p{
    font-family: 'Roboto';
    font-size: 1.125rem;
    line-height: 1.875rem;
    color: #353535;
}
@media only screen and (max-width: 575px) {
    .bhoj-detail-main .bhoj-section-the-result .achievement-outer .achivements-download p{
        line-height: 1.5rem;
    }
}
/*bhoj result section css ends*/
/*Bhoj food delivery app css ends here*/

/*Bookmyticket app css starts here*/

@font-face {
    font-family: 'Archivo Black';
    src: url('../portfolio-fonts/movie-ticket-app/ArchivoBlack-Regular.woff2') format('woff2'),
    url('../portfolio-fonts/movie-ticket-app/ArchivoBlack-Regular.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Belgrano', Serif;
    src: url('../portfolio-fonts/movie-ticket-app/Belgrano-Regular.woff2') format('woff2'),
    url('../portfolio-fonts/movie-ticket-app/Belgrano-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Akkurat';
    src: url('../portfolio-fonts/movie-ticket-app/Akkurat.woff2') format('woff2'),
    url('../portfolio-fonts/movie-ticket-app/Akkurat.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.bookmyticket-wrapper {
    font-size: 18px;
    line-height: 30px;
    font-weight: 400;
    background-color: #000;
    overflow: hidden;
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper {
        font-size: 16px;
        line-height: 28px;
    }
}
.bookmyticket-wrapper ::selection {
    -webkit-text-fill-color: #fff;
}
.bookmyticket-wrapper .bookbg-black {
    background-color: #111;
}
.bookmyticket-wrapper .bookfont-white {
    color: #fff;
}
.bookmyticket-wrapper .bookfont-grey {
    color: #999;
}
.bookmyticket-wrapper .bookfont-yellow {
    color: #f3dd68;
}
.bookmyticket-wrapper .font-akkurat {
    font-family: 'Akkurat';
}
.bookmyticket-wrapper .font-belgrano {
    font-family: 'Belgrano', serif;
}
.bookmyticket-wrapper .font-archivo {
    font-family: 'Archivo Black', sans-serif;
}
.bookmyticket-wrapper h1, .bookmyticket-wrapper h2, .bookmyticket-wrapper h3, .bookmyticket-wrapper h4, .bookmyticket-wrapper h5, .bookmyticket-wrapper h6 {
    font-family: 'Archivo Black', sans-serif;
    font-weight: 900;
    margin: 0;
}
.bookmyticket-wrapper .gradient-text {
    text-transform: uppercase;
    background: linear-gradient(90deg, #ffef9b, #f3dd68);
    background: -webkit-linear-gradient(90deg, #ffef9b, #f3dd68);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.bookmyticket-wrapper .title-wrap {
    position: relative;
    display: inline-block;
}
.bookmyticket-wrapper .title-wrap .small-title {
    font-family: 'Archivo Black', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    background: linear-gradient(90deg, #ffef9b, #f3dd68);
    background: -webkit-linear-gradient(90deg, #ffef9b, #f3dd68);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    position: relative;
    z-index: 2;
    display: inline-block;
    word-break: break-word;
}
.bookmyticket-wrapper .title-wrap .small-title em {
    font-style: normal;
    display: block;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .title-wrap .small-title em {
        display: inline-block;
    }
}
.bookmyticket-wrapper .title-wrap .title-bg {
    font-family: 'Archivo Black', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    background: -webkit-linear-gradient(90deg, #ffef9b 100%, #f3dd68 100%);
    background: linear-gradient(90deg, #ffef9b 100%, #f3dd68 100%);
    -webkit-background-clip: text;
    -webkit-text-stroke: 1px transparent;
    color: #111;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    margin: -5px auto 0;
    opacity: 0.5;
}
.bookmyticket-wrapper .title-wrap .title-bg em {
    font-style: normal;
    display: block;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .title-wrap .title-bg em {
        display: inline-block;
    }
}
.bookmyticket-wrapper .custom-container-common {
    position: relative;
}
@media only screen and (min-width: 1200px) {
    .bookmyticket-wrapper .custom-container-common {
        margin: 0 auto !important;
        width: 100%;
        max-width: 1820px;
        padding: 0;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1899px) {
    .bookmyticket-wrapper .custom-container-common {
        width: calc(100% - 10%);
        max-width: none;
    }
}
.bookmyticket-wrapper .bookptb-170 {
    padding: 170px 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1699px) {
    .bookmyticket-wrapper .bookptb-170 {
        padding: 110px 0;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .bookptb-170 {
        padding: 90px 0;
    }
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .bookptb-170 {
        padding: 70px 0;
    }
}
@media only screen and (max-width: 767px) {
    .bookmyticket-wrapper .bookptb-170 {
        padding: 50px 0;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .bookptb-170 {
        padding: 35px 0;
    }
}
.bookmyticket-wrapper .bookpb-170 {
    padding-bottom: 170px;
}
@media only screen and (min-width: 1200px) and (max-width: 1699px) {
    .bookmyticket-wrapper .bookpb-170 {
        padding-bottom: 110px;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .bookpb-170 {
        padding-bottom: 90px;
    }
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .bookpb-170 {
        padding-bottom: 70px;
    }
}
@media only screen and (max-width: 767px) {
    .bookmyticket-wrapper .bookpb-170 {
        padding-bottom: 50px;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .bookpb-170 {
        padding-bottom: 35px;
    }
}
.bookmyticket-wrapper .bookpb-150 {
    padding-bottom: 150px;
}
@media only screen and (min-width: 1200px) and (max-width: 1699px) {
    .bookmyticket-wrapper .bookpb-150 {
        padding-bottom: 110px;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .bookpb-150 {
        padding-bottom: 90px;
    }
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .bookpb-150 {
        padding-bottom: 70px;
    }
}
@media only screen and (max-width: 767px) {
    .bookmyticket-wrapper .bookpb-150 {
        padding-bottom: 50px;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .bookpb-150 {
        padding-bottom: 35px;
    }
}

.bookmyticket-wrapper .bookpb-130 {
    padding-bottom: 130px;
}
@media only screen and (min-width: 1200px) and (max-width: 1699px) {
    .bookmyticket-wrapper .bookpb-130 {
        padding-bottom: 110px;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .bookpb-130 {
        padding-bottom: 90px;
    }
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .bookpb-130 {
        padding-bottom: 70px;
    }
}
@media only screen and (max-width: 767px) {
    .bookmyticket-wrapper .bookpb-130 {
        padding-bottom: 50px;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .bookpb-130 {
        padding-bottom: 35px;
    }
}

.bookmyticket-wrapper .bookptb-100 {
    padding: 100px 0;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .bookptb-100 {
        padding: 90px 0;
    }
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .bookptb-100 {
        padding: 70px 0;
    }
}
@media only screen and (max-width: 767px) {
    .bookmyticket-wrapper .bookptb-100 {
        padding: 50px 0;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .bookptb-100 {
        padding: 35px 0;
    }
}
.bookmyticket-wrapper .bookptb-90 {
    padding: 90px 0;
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .bookptb-90 {
        padding: 70px 0;
    }
}
@media only screen and (max-width: 767px) {
    .bookmyticket-wrapper .bookptb-90 {
        padding: 50px 0;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .bookptb-90 {
        padding: 35px 0;
    }
}

.bookmyticket-wrapper .bookpb-80 {
    padding-bottom: 80px;
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .bookpb-80 {
        padding-bottom: 70px;
    }
}
@media only screen and (max-width: 767px) {
    .bookmyticket-wrapper .bookpb-80 {
        padding-bottom: 50px;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .bookpb-80 {
        padding-bottom: 35px;
    }
}
.bookmyticket-wrapper .bookpb-70 {
    padding-bottom: 70px;
}
@media only screen and (max-width: 767px) {
    .bookmyticket-wrapper .bookpb-70 {
        padding-bottom: 50px;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .bookpb-70 {
        padding-bottom: 35px;
    }
}

.bookmyticket-wrapper .bookpb-60 {
    padding-bottom: 60px;
}
@media only screen and (max-width: 767px) {
    .bookmyticket-wrapper .bookpb-60 {
        padding-bottom: 50px;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .bookpb-60 {
        padding-bottom: 35px;
    }
}
.bookmyticket-wrapper .bookpt-60 {
    padding-top: 60px;
}
@media only screen and (max-width: 767px) {
    .bookmyticket-wrapper .bookpt-60 {
        padding-top: 50px;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .bookpt-60 {
        padding-top: 35px;
    }
}


.bookmyticket-wrapper .bookmt-100 {
    margin-top: 100px;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .bookmt-100 {
        margin-top: 90px;
    }
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .bookmt-100 {
        margin-top: 70px;
    }
}
@media only screen and (max-width: 767px) {
    .bookmyticket-wrapper .bookmt-100 {
        margin-top: 50px;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .bookmt-100 {
        margin-top: 35px;
    }
}

.bookmyticket-wrapper .bookmt-90 {
    margin-top: 90px;
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .bookmt-90 {
        margin-top: 70px;
    }
}
@media only screen and (max-width: 767px) {
    .bookmyticket-wrapper .bookmt-90 {
        margin-top: 50px;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .bookmt-90 {
        margin-top: 35px;
    }
}
.bookmyticket-wrapper .bookmb-80 {
    margin-bottom: 80px;
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .bookmb-80 {
        margin-bottom: 70px;
    }
}
@media only screen and (max-width: 767px) {
    .bookmyticket-wrapper .bookmb-80 {
        margin-bottom: 50px;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .bookmb-80 {
        margin-bottom: 35px;
    }
}


.bookmyticket-wrapper .bookmt-50 {
    margin-top: 50px;
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .bookmt-50 {
        margin-top: 35px;
    }
}

.bookmyticket-wrapper .bookmb-30 {
    margin-bottom: 30px;
}
@media only screen and (max-width: 767px) {
    .bookmyticket-wrapper .bookmb-30 {
        margin-bottom: 20px;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .bookmb-30 {
        margin-bottom: 15px;
    }
}
.bookmyticket-wrapper .bookmt-20 {
    margin-top: 20px;
}
.bookmyticket-wrapper .bookmb-20 {
    margin: 0 0 20px;
}
.bookmyticket-wrapper .bookmb-15 {
    margin: 0 0 15px;
}
.bookmyticket-wrapper .rotate {
    -webkit-animation: spin 5s linear infinite;
    animation: spin 5s linear infinite;
    position: relative;
}
@keyframes spin {
    100% {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn);
    }
}
.bookmyticket-wrapper .bookfont-200 {
    font-size: 200px;
    line-height: 218px;
}
@media only screen and (min-width: 1700px) and (max-width: 1899px) {
    .bookmyticket-wrapper .bookfont-200 {
        font-size: 10vw;
        line-height: 10.354vw;
    }
}
@media only screen and (min-width: 1366px) and (max-width: 1699px) {
    .bookmyticket-wrapper .bookfont-200 {
        font-size: 9.417vw;
        line-height: 10.354vw;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .bookmyticket-wrapper .bookfont-200 {
        font-size: 8.417vw;
        line-height: 9.354vw;
    }
}
.bookmyticket-wrapper .bookfont-154 {
    font-size: 154px;
    line-height: 168px;
}
@media only screen and (min-width: 1700px) and (max-width: 1899px) {
    .bookmyticket-wrapper .bookfont-154 {
        font-size: 130px;
        line-height: 140px;
    }
}
@media only screen and (min-width: 1366px) and (max-width: 1699px) {
    .bookmyticket-wrapper .bookfont-154 {
        font-size: 110px;
        line-height: 120px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .bookmyticket-wrapper .bookfont-154 {
        font-size: 90px;
        line-height: 100px;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .bookfont-154 {
        font-size: 60px;
        line-height: 70px;
    }
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .bookfont-154 {
        font-size: 50px;
        line-height: 60px;
    }
}
@media only screen and (max-width: 767px) {
    .bookmyticket-wrapper .bookfont-154 {
        font-size: 45px;
        line-height: 50px;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .bookfont-154 {
        font-size: 42px;
        line-height: 48px;
    }
}
.bookmyticket-wrapper .bookfont-100 {
    font-size: 3.208vw;
    line-height: 4.677vw;
}
@media only screen and (max-width: 767px) {
    .bookmyticket-wrapper .bookfont-100 {
        font-size: 6.208vw;
        line-height: 6.677vw;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .bookfont-100 {
        font-size: 6.208vw;
        line-height: 6.677vw;
    }
}
@media only screen and (max-width: 480px) {
    .bookmyticket-wrapper .bookfont-100 {
        font-size: 7.208vw;
        line-height: 7.677vw;
    }
}
@media only screen and (max-width: 375px) {
    .bookmyticket-wrapper .bookfont-100 {
        font-size: 9.208vw;
        line-height: 9.677vw;
    }
}
.bookmyticket-wrapper .bookfont-70 {
    font-size: 3.646vw;
    line-height: 3.958vw;
}
.bookmyticket-wrapper .bookfont-60 {
    font-size: 60px;
    line-height: 64px;
    letter-spacing: 0.6px;
}
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .bookmyticket-wrapper .bookfont-60 {
        font-size: 50px;
        line-height: 54px;
    }
}
@media only screen and (max-width: 767px) {
    .bookmyticket-wrapper .bookfont-60 {
        font-size: 40px;
        line-height: 44px;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .bookfont-60 {
        font-size: 30px;
        line-height: 34px;
    }
}
.bookmyticket-wrapper .bookfont-50 {
    font-size: 50px;
    line-height: 54px;
}
@media only screen and (max-width: 767px) {
    .bookmyticket-wrapper .bookfont-50 {
        font-size: 45px;
        line-height: 50px;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .bookfont-50 {
        font-size: 35px;
        line-height: 45px;
    }
}
@media only screen and (max-width: 375px) {
    .bookmyticket-wrapper .bookfont-50 {
        font-size: 28px;
        line-height: 38px;
    }
}
.bookmyticket-wrapper .bookfont-18 {
    font-size: 18px;
    line-height: 22px;
}
.bookmyticket-wrapper .bookfont-18l {
    font-size: 18px;
    line-height: 30px;
}
.bookmyticket-wrapper .bookr50 {
    border-radius: 50px;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .bookr50 {
        border-radius: 30px;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .bookr50 {
        border-radius: 20px;
    }
}
@media only screen and (max-width: 480px) {
    .bookmyticket-wrapper .bookr50 {
        border-radius: 10px;
    }
}
.bookmyticket-wrapper h2.title {
    margin: 0 0 30px;
}
.bookmyticket-wrapper h3.title {
    font-size: 70px;
    line-height: 76px;
    position: relative;
    text-transform: uppercase;
    background: linear-gradient(180deg, #ffef9b, #f3dd68);
    background: -webkit-linear-gradient(180deg, #ffef9b, #f3dd68);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 20px;
    word-break: break-word;
}
@media only screen and (max-width: 1899px) {
    .bookmyticket-wrapper h3.title {
        font-size: 65px;
        line-height: 70px;
    }
}
@media only screen and (max-width: 1699px) {
    .bookmyticket-wrapper h3.title {
        font-size: 58px;
        line-height: 64px;
    }
}
@media only screen and (max-width: 1365px) {
    .bookmyticket-wrapper h3.title {
        font-size: 50px;
        line-height: 55px;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper h3.title {
        font-size: 46px;
        line-height: 50px;
    }
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper h3.title {
        font-size: 42px;
        line-height: 48px;
    }
}
@media only screen and (max-width: 767px) {
    .bookmyticket-wrapper h3.title {
        font-size: 38px;
        line-height: 44px;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper h3.title {
        font-size: 30px;
        line-height: 36px;
        margin: 0 0 15px;
    }
}
@media only screen and (max-width: 480px) {
    .bookmyticket-wrapper h3.title {
        font-size: 28px;
        line-height: 34px;
    }
}
.bookmyticket-wrapper p {
    color: #999;
    font-family: 'Akkurat';
    margin: 0;
    text-transform: capitalize;
}
.bookmyticket-wrapper .resp-view {
    text-align: center;
}
.bookmyticket-wrapper .book-banner-section {
    background: url("../img/case-study-details/movie-ticket-booking-app/webp/bg-vector.webp") no-repeat center center;
    background-size: 100% 100%;
    margin-bottom: 90px;
    height: 100vh;
    position: relative;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-banner-section {
        margin-bottom: 70px;
        height: auto;
        padding-top: 35px;
    }
}
@media only screen and (max-width: 767px) {
    .bookmyticket-wrapper .book-banner-section {
        margin-bottom: 50px;
        padding-top: 20px;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .book-banner-section {
        margin-bottom: 35px;
    }
}
.bookmyticket-wrapper .book-banner-section .mobile-wrap img {
    width: 587px;
    aspect-ratio: 0.717603912;
    height: auto;
    max-width: 100%;
    min-height: 100%;
}
.bookmyticket-wrapper .book-banner-section .custom-container-common {
    height: 100vh;
    position: relative;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-banner-section .custom-container-common {
        height: auto;
    }
}
.bookmyticket-wrapper .book-banner-section .custom-container-common .row {
    height: 100vh;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-banner-section .custom-container-common .row {
        height: auto;
    }
}
.bookmyticket-wrapper .book-banner-section .banner-outer {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 90px);
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-banner-section .banner-outer {
        height: auto;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-banner-section .banner-outer .top-outer .logo-wrap {
        text-align: center;
        margin-bottom: 20px;
    }
}
.bookmyticket-wrapper .book-banner-section .banner-outer .top-outer .logo-wrap img {
    width: 210px;
    aspect-ratio: 2.625;
    height: 100%;
    min-height: auto;
    max-width: 100%;
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .book-banner-section .banner-outer .top-outer .logo-wrap img {
        max-width: 50%;
        max-height: 50%;
    }
}
.bookmyticket-wrapper .book-banner-section .banner-outer .top-outer .name-wrap {
    text-align: right;
    display: flex;
    flex-direction: column;
}
@media only screen and (max-width: 767px) {
    .bookmyticket-wrapper .book-banner-section .banner-outer .top-outer .name-wrap {
        align-items: center;
    }
}
.bookmyticket-wrapper .book-banner-section .banner-outer .bottom-wrap {
    height: 100vh;
    display: flex;
    align-items: center;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-banner-section .banner-outer .bottom-wrap {
        height: auto;
        display: block;
    }
}
.bookmyticket-wrapper .book-banner-section .banner-outer .bottom-wrap .bottom-outer {
    width: 100%;
}
.bookmyticket-wrapper .book-banner-section .banner-outer .bottom-wrap .bottom-outer .inner-content {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    height: 100%;
    width: 100%;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-banner-section .banner-outer .bottom-wrap .bottom-outer .inner-content {
        display: block;
        text-align: center;
    }
}
.bookmyticket-wrapper .book-banner-section .banner-outer .bottom-wrap .bottom-outer .inner-content .resp-view .resp-title-text {
    margin-bottom: 30px;
}
@media only screen and (max-width: 480px) {
    .bookmyticket-wrapper .book-banner-section .banner-outer .bottom-wrap .bottom-outer .inner-content .resp-view .img-wrap {
        margin: 15px 0;
    }
}
.bookmyticket-wrapper .book-banner-section .banner-outer .bottom-wrap .bottom-outer .inner-content .resp-view .img-wrap img {
    width: 587px;
    aspect-ratio: 0.717603912;
    max-width: 60%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .bookmyticket-wrapper .book-banner-section .banner-outer .bottom-wrap .bottom-outer .inner-content .resp-view .img-wrap img {
        max-width: 50%;
    }
}
.bookmyticket-wrapper .book-banner-section .banner-outer .bottom-wrap .bottom-outer .inner-content .common-div {
    display: flex;
    flex-direction: column;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-banner-section .banner-outer .bottom-wrap .bottom-outer .inner-content .common-div {
        display: block;
    }
}
.bookmyticket-wrapper .book-banner-section .banner-outer .bottom-wrap .bottom-outer .inner-content .common-div.left {
    width: 36.05%;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-banner-section .banner-outer .bottom-wrap .bottom-outer .inner-content .common-div.left {
        width: 100%;
    }
}
.bookmyticket-wrapper .book-banner-section .banner-outer .bottom-wrap .bottom-outer .inner-content .common-div.left .big-book-text {
    text-transform: uppercase;
    background: -webkit-linear-gradient(90deg, #ffef9b 100%, #f3dd68 100%);
    background: linear-gradient(90deg, #ffef9b 100%, #f3dd68 100%);
    -webkit-background-clip: text;
    -webkit-text-stroke: 3px transparent;
    color: #000;
    transition: all 5s ease-out;
    width: max-content;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-banner-section .banner-outer .bottom-wrap .bottom-outer .inner-content .common-div.left .big-book-text {
        display: none !important;
    }
}
.bookmyticket-wrapper .book-banner-section .banner-outer .bottom-wrap .bottom-outer .inner-content .common-div.left .big-book-text:hover {
    background: linear-gradient(90deg, #ffef9b, #f3dd68);
    background: -webkit-linear-gradient(90deg, #ffef9b, #f3dd68);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 5s ease-in;
}
.bookmyticket-wrapper .book-banner-section .banner-outer .bottom-wrap .bottom-outer .inner-content .common-div.left .short-wrap {
    max-width: 630px;
}
@media only screen and (min-width: 1500px) and (max-width: 1699px) {
    .bookmyticket-wrapper .book-banner-section .banner-outer .bottom-wrap .bottom-outer .inner-content .common-div.left .short-wrap {
        max-width: 520px;
    }
}
@media only screen and (min-width: 1366px) and (max-width: 1499px) {
    .bookmyticket-wrapper .book-banner-section .banner-outer .bottom-wrap .bottom-outer .inner-content .common-div.left .short-wrap {
        max-width: 480px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .bookmyticket-wrapper .book-banner-section .banner-outer .bottom-wrap .bottom-outer .inner-content .common-div.left .short-wrap {
        max-width: 425px;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-banner-section .banner-outer .bottom-wrap .bottom-outer .inner-content .common-div.left .short-wrap {
        max-width: 100%;
    }
}
.bookmyticket-wrapper .book-banner-section .banner-outer .bottom-wrap .bottom-outer .inner-content .common-div.right {
    width: 41.37%;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-banner-section .banner-outer .bottom-wrap .bottom-outer .inner-content .common-div.right {
        width: 100%;
    }
}
.bookmyticket-wrapper .book-banner-section .banner-outer .bottom-wrap .bottom-outer .inner-content .common-div.right .short-wrap {
    max-width: 750px;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    align-items: baseline;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-banner-section .banner-outer .bottom-wrap .bottom-outer .inner-content .common-div.right .short-wrap {
        max-width: none;
        text-align: center;
    }
}
.bookmyticket-wrapper .book-banner-section .banner-outer .bottom-wrap .bottom-outer .inner-content .common-div.right .short-wrap .book-icon {
    position: relative;
    left: 100px;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-banner-section .banner-outer .bottom-wrap .bottom-outer .inner-content .common-div.right .short-wrap .book-icon {
        left: 0;
    }
}
.bookmyticket-wrapper .book-banner-section .banner-outer .bottom-wrap .bottom-outer .inner-content .common-div.right .short-wrap .big-ticket-text:hover {
    background: -webkit-linear-gradient(90deg, #ffef9b 100%, #f3dd68 100%);
    background: linear-gradient(90deg, #ffef9b 100%, #f3dd68 100%);
    -webkit-background-clip: text;
    -webkit-text-stroke: 3px transparent;
    color: #000;
    -webkit-text-fill-color: unset;
}
.bookmyticket-wrapper .book-banner-section:before {
    content: '';
    position: absolute;
    background: url("../img/case-study-details/movie-ticket-booking-app/webp/mobile-screen.webp") no-repeat center center;
    z-index: 2;
    left: -6%;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 auto;
    text-align: center;
    width: 587px;
    height: 817px;
    background-size: cover;
}
@media only screen and (max-width: 1899px) {
    .bookmyticket-wrapper .book-banner-section:before {
        background-size: 80% 80%;
    }
}
@media only screen and (min-width: 1500px) and (max-width: 1799px) {
    .bookmyticket-wrapper .book-banner-section:before {
        background-size: 90% 90%;
    }
}
@media only screen and (min-width: 1366px) and (max-width: 1499px) {
    .bookmyticket-wrapper .book-banner-section:before {
        background-size: 70% 70%;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .bookmyticket-wrapper .book-banner-section:before {
        background-size: 60% 60%;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-banner-section:before {
        display: none;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-get-tickets {
        margin: 0 0 50px;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .book-get-tickets {
        margin: 0 0 35px;
    }
}
.bookmyticket-wrapper .book-get-tickets .ticket-outer {
    text-align: center;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-get-tickets .ticket-outer {
        padding: 50px 0;
    }
}
@media only screen and (max-width: 480px) {
    .bookmyticket-wrapper .book-get-tickets .ticket-outer {
        padding: 25px 0;
    }
}
@media only screen and (max-width: 375px) {
    .bookmyticket-wrapper .book-get-tickets .ticket-outer {
        padding: 20px 0px;
    }
}
.bookmyticket-wrapper .book-get-tickets .ticket-outer .text-outer {
    padding: 0 20px;
}
@media only screen and (max-width: 375px) {
    .bookmyticket-wrapper .book-get-tickets .ticket-outer .text-outer {
        padding: 0 15px;
    }
}
.bookmyticket-wrapper .book-get-tickets .ticket-outer .text-outer .title-wrap .title-bg {
    margin: -10px auto 0;
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .book-get-tickets .ticket-outer .text-outer .title-wrap .title-bg {
        margin: -5px auto 0;
    }
}
.bookmyticket-wrapper .book-get-tickets .ticket-outer .text-outer .short-content {
    max-width: 900px;
    margin: 0 auto;
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .book-get-tickets .ticket-outer .text-outer .short-content {
        max-width: none;
    }
}
.bookmyticket-wrapper .book-get-tickets .ticket-outer .marquee-wrapper {
    overflow: hidden;
    width: 100%;
    line-height: 0;
    font-size: 0;
}
.bookmyticket-wrapper .book-get-tickets .ticket-outer .marquee-wrapper .marquee-inner {
    display: flex;
    align-items: center;
    white-space: nowrap;
    width: 100%;
    background: url("../img/case-study-details/movie-ticket-booking-app/webp/ticket-slider-bg.webp") no-repeat;
    height: 310px;
    background-size: cover;
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .book-get-tickets .ticket-outer .marquee-wrapper .marquee-inner {
        height: 250px;
    }
}
.bookmyticket-wrapper .book-get-tickets .ticket-outer .marquee-wrapper .marquee-inner .common-slider {
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 100%;
}
.bookmyticket-wrapper .book-get-tickets .ticket-outer .marquee-wrapper .marquee-inner .common-slider .marquee-items {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    white-space: nowrap;
    position: relative;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: moviemarqueeLeft 90s linear infinite;
    animation: moviemarqueeLeft 90s linear infinite;
}
@keyframes moviemarqueeLeft {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}
@-webkit-keyframes moviemarqueeLeft {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}
@-moz-keyframes moviemarqueeLeft {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}
.bookmyticket-wrapper .book-get-tickets .ticket-outer .marquee-wrapper .marquee-inner .common-slider .marquee-items .item {
    width: 220px;
    height: 220px;
    margin: 0 10px;
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .book-get-tickets .ticket-outer .marquee-wrapper .marquee-inner .common-slider .marquee-items .item {
        width: 190px;
        height: 190px;
    }
}
@media only screen and (max-width: 480px) {
    .bookmyticket-wrapper .book-get-tickets .ticket-outer .marquee-wrapper .marquee-inner .common-slider .marquee-items .item {
        width: 150px;
        height: 150px;
    }
}
.bookmyticket-wrapper .book-get-tickets .ticket-outer .marquee-wrapper .marquee-inner .common-slider .marquee-items .item .img-wrap img {
    width: 220px;
    aspect-ratio: 1;
    border-radius: 6px;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .book-get-tickets .ticket-outer .marquee-wrapper .marquee-inner .common-slider .marquee-items .item .img-wrap img {
        width: 190px;
        aspect-ratio: 1;
    }
}
@media only screen and (max-width: 480px) {
    .bookmyticket-wrapper .book-get-tickets .ticket-outer .marquee-wrapper .marquee-inner .common-slider .marquee-items .item .img-wrap img {
        width: 150px;
        aspect-ratio: 1;
    }
}
.bookmyticket-wrapper .book-get-tickets .ticket-outer .marquee-wrapper .marquee-inner .common-slider .marquee-items .item:hover .img-wrap img {
    filter: none;
}
.bookmyticket-wrapper .book-about-project .content-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 20px;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-about-project .content-wrap {
        grid-template-columns: 1fr;
        grid-row-gap: 30px;
    }
}
.bookmyticket-wrapper .book-about-project .content-wrap .left-side {
    padding: 50px;
    position: relative;
    overflow: hidden;
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .book-about-project .content-wrap .left-side {
        padding: 50px 30px;
    }
}
@media only screen and (max-width: 480px) {
    .bookmyticket-wrapper .book-about-project .content-wrap .left-side {
        padding: 25px;
    }
}
@media only screen and (max-width: 375px) {
    .bookmyticket-wrapper .book-about-project .content-wrap .left-side {
        padding: 20px 15px;
    }
}
.bookmyticket-wrapper .book-about-project .content-wrap .left-side .short-info {
    max-width: 800px;
    position: relative;
    z-index: 2;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-about-project .content-wrap .left-side .short-info {
        max-width: none;
        text-align: center;
    }
}
.bookmyticket-wrapper .book-about-project .content-wrap .left-side:before {
    content: '';
    background: url("../img/case-study-details/movie-ticket-booking-app/webp/about-bg.webp") no-repeat right bottom;
    background-size: cover;
    position: absolute;
    width: 492px;
    height: 212px;
    right: -22px;
    bottom: -78px;
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .book-about-project .content-wrap .left-side:before {
        display: none;
    }
}
.bookmyticket-wrapper .book-about-project .content-wrap .right-side {
    text-align: center;
    padding: 0 30px 90px 30px;
    overflow: hidden;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-about-project .content-wrap .right-side {
        padding: 0 30px 70px;
    }
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .book-about-project .content-wrap .right-side {
        padding: 0 30px 50px;
    }
}
@media only screen and (max-width: 767px) {
    .bookmyticket-wrapper .book-about-project .content-wrap .right-side {
        padding: 0 30px 30px;
    }
}
@media only screen and (max-width: 480px) {
    .bookmyticket-wrapper .book-about-project .content-wrap .right-side {
        padding: 0 25px 25px;
    }
}
.bookmyticket-wrapper .book-about-project .content-wrap .right-side img {
    width: 752px;
    aspect-ratio: 1.4745098039;
    max-width: 100%;
    height: auto;
    min-height: auto;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .bookmyticket-wrapper .book-about-project .content-wrap .right-side img {
        max-width: 60%;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens {
        margin-top: 70px;
    }
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .book-app-screens {
        margin-top: 50px;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .book-app-screens {
        margin-top: 35px;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common {
    background: linear-gradient(to bottom, rgba(246, 226, 116, 0.30), rgba(0, 0, 0, 0.30), rgba(246, 226, 116, 0.30), rgba(0, 0, 0, 0.30), rgba(246, 226, 116, 0.30));
    background: -webkit-linear-gradient(to bottom, rgba(246, 226, 116, 0.30), rgba(0, 0, 0, 0.30), rgba(246, 226, 116, 0.30), rgba(0, 0, 0, 0.30), rgba(246, 226, 116, 0.30));
    position: relative;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common {
        background: transparent;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common:before {
    content: '';
    position: absolute;
    border-radius: 50px;
    left: 1px;
    top: 1px;
    background-color: #000;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    z-index: 2;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common:before {
        display: none;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer {
    position: relative;
    z-index: 3;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer {
        background: linear-gradient(to bottom, rgba(246, 226, 116, 0.30), rgba(0, 0, 0, 0.30), rgba(246, 226, 116, 0.30), rgba(0, 0, 0, 0.30), rgba(246, 226, 116, 0.30));
        background: -webkit-linear-gradient(to bottom, rgba(246, 226, 116, 0.30), rgba(0, 0, 0, 0.30), rgba(246, 226, 116, 0.30), rgba(0, 0, 0, 0.30), rgba(246, 226, 116, 0.30));
        border-radius: 30px;
        position: relative;
        z-index: 2;
        padding: 50px 30px;
    }
}
@media only screen and (max-width: 767px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer {
        padding: 30px;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer {
        border-radius: 20px;
    }
}
@media only screen and (max-width: 480px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer {
        padding: 25px;
        border-radius: 10px;
    }
}
@media only screen and (max-width: 375px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer {
        padding: 20px 15px;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .app-title-outer {
    text-align: center;
    margin-bottom: 70px;
}
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .app-title-outer {
        margin-bottom: 50px;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .app-title-outer {
        margin-bottom: 30px;
    }
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .app-title-outer {
        margin-bottom: 0;
    }
}
@media only screen and (min-width: 1900px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .onboard-screens {
        width: 83.52%;
        max-width: none;
        margin: 0 auto;
    }
}
@media only screen and (min-width: 1700px) and (max-width: 1899px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .onboard-screens {
        width: 89%;
        max-width: none;
        margin: 0 auto;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1699px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .onboard-screens {
        width: 90%;
        max-width: none;
        margin: 0 auto;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .onboard-screens .inner-content {
    display: flex;
    align-items: start;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .onboard-screens .inner-content {
        display: block;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .onboard-screens .inner-content .resp-view {
        margin-bottom: 30px;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .onboard-screens .inner-content .common-div {
    width: 16.25%;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .onboard-screens .inner-content .common-div {
        display: none;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .onboard-screens .inner-content .common-div img {
    width: 247px;
    aspect-ratio: 0.494;
    height: auto;
    max-width: 100%;
    min-height: 100%;
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .onboard-screens .inner-content .middle-div {
    width: 67.5%;
    margin: 0 auto;
    text-align: center;
}
@media only screen and (min-width: 1200px) and (max-width: 1899px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .onboard-screens .inner-content .middle-div {
        margin: 0 20px auto;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .onboard-screens .inner-content .middle-div {
        width: 100%;
        text-align: center;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .onboard-screens .inner-content .middle-div .title {
    margin-bottom: 70px;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .onboard-screens .inner-content .middle-div .title {
        display: none;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .onboard-screens .inner-content .middle-div .detail-wrap {
        white-space: nowrap;
        flex-wrap: nowrap;
        width: 100%;
        overflow: hidden;
        overflow-x: scroll;
        margin: 30px 0 0;
        justify-content: start !important;
    }
}

@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .onboard-screens .inner-content .middle-div .detail-wrap::-webkit-scrollbar {
        height: 8px;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .onboard-screens .inner-content .middle-div .detail-wrap::-webkit-scrollbar-thumb {
        background-color: #ccc; /* Customize scrollbar color */
        border-radius: 4px;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .onboard-screens .inner-content .middle-div .detail-wrap::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Customize scrollbar track color */
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .onboard-screens .inner-content .middle-div .detail-wrap .left-mob {
    display: none;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .onboard-screens .inner-content .middle-div .detail-wrap .left-mob {
        display: block;
        min-width: 35%;
        margin-bottom: 10px;
        margin-right: 10px;
        width: 100%;
    }
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .onboard-screens .inner-content .middle-div .detail-wrap .left-mob {
        min-width: 50%;
    }
}
@media only screen and (max-width: 375px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .onboard-screens .inner-content .middle-div .detail-wrap .left-mob {
        width: 100%;
        min-width: 100%;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .onboard-screens .inner-content .middle-div .detail-wrap .left-mob img {
    width: 247px;
    aspect-ratio: 0.494;
    height: auto;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .onboard-screens .inner-content .middle-div .detail-wrap .left {
        min-width: 35%;
        margin-bottom: 10px;
        margin-right: 10px;
    }
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .onboard-screens .inner-content .middle-div .detail-wrap .left {
        min-width: 50%;
    }
}
@media only screen and (max-width: 375px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .onboard-screens .inner-content .middle-div .detail-wrap .left {
        width: 100%;
        min-width: 100%;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .onboard-screens .inner-content .middle-div .detail-wrap .left img {
    width: 250px;
    aspect-ratio: 0.4980079681;
    height: auto;
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .onboard-screens .inner-content .middle-div .detail-wrap .middle-one {
    max-width: 373px;
    margin: 0 20px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .onboard-screens .inner-content .middle-div .detail-wrap .middle-one {
        display: none;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .onboard-screens .inner-content .middle-div .detail-wrap .middle-one .border-up {
    width: 100%;
    height: 1px;
    background: -webkit-linear-gradient(to right, rgba(246, 226, 116, 0.30), rgba(0, 0, 0, 0.30));
    background: linear-gradient(to right, rgba(246, 226, 116, 0.30), rgba(0, 0, 0, 0.30));
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .onboard-screens .inner-content .middle-div .detail-wrap .middle-one .border-down {
    width: 100%;
    height: 1px;
    background: -webkit-linear-gradient(to left, rgba(246, 226, 116, 0.30), rgba(0, 0, 0, 0.30));
    background: linear-gradient(to left, rgba(246, 226, 116, 0.30), rgba(0, 0, 0, 0.30));
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .home-screen {
    position: relative;
}
@media only screen and (min-width: 1200px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .home-screen {
        width: 90.66%;
        max-width: none;
        margin: 0 auto;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .home-screen {
        text-align: center;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .home-screen .inner-content {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .home-screen .inner-content {
        display: block;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .home-screen .inner-content .common-div {
    width: 40.3%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding-top: 140px;
    position: relative;
    z-index: 2;
    max-width: 522px;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .home-screen .inner-content .common-div {
        width: 100%;
        max-width: none;
        padding: 0;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .home-screen .inner-content .common-div.left {
    text-align: right;
    padding-bottom: 50px;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .home-screen .inner-content .common-div.left {
        padding-bottom: 0;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .home-screen .inner-content .common-div.left .icon-wrap {
    text-align: left;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .home-screen .inner-content .common-div.left .icon-wrap {
        text-align: center;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .home-screen .inner-content .common-div.left .icon-wrap .book-icon {
        margin-top: 0;
        margin-bottom: 30px;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .home-screen .inner-content .middle-div {
    width: 19.39%;
    margin: 0 20px auto;
    text-align: center;
    position: relative;
    z-index: 2;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .home-screen .inner-content .middle-div {
        width: 100%;
        margin: 0 auto 30px;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .home-screen .inner-content .middle-div img {
    width: 297px;
    aspect-ratio: 0.4941763727;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .home-screen .inner-content .middle-div img {
        max-width: 80%;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .home-screen .inner-content:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 auto;
    background: url("../img/case-study-details/movie-ticket-booking-app/webp/home-screen-bg.webp") no-repeat;
    width: 100%;
    height: 101px;
    background-size: 100% 100%;
    z-index: 1;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .home-screen .inner-content:after {
        display: none;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .book-tickets {
    position: relative;
}
@media only screen and (min-width: 1200px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .book-tickets {
        width: 88.74%;
        max-width: none;
        margin: 0 auto;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .book-tickets .seats-outer {
    text-align: center;
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 auto;
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .book-tickets .inner-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 25px;
    position: relative;
    z-index: 2;
}
@media only screen and (max-width: 1365px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .book-tickets .inner-content {
        grid-template-columns: 1fr;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .book-tickets .inner-content .resp-view {
    display: none;
}
@media only screen and (max-width: 1365px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .book-tickets .inner-content .resp-view {
        display: block;
    }
}
@media only screen and (max-width: 1365px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .book-tickets .inner-content .common-div .img-wrap {
        text-align: center;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .book-tickets .inner-content .common-div .img-wrap img {
    width: 297px;
    aspect-ratio: 0.4941763727;
    height: auto;
    min-height: 100%;
    max-width: 100%;
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .book-tickets .inner-content .common-div.left .content-wrap {
    gap: 30px;
}
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .book-tickets .inner-content .common-div.left .content-wrap {
        justify-content: center !important;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .book-tickets .inner-content .common-div.left .content-wrap .title {
    margin: 60px 0 0 0;
}
@media only screen and (max-width: 1365px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .book-tickets .inner-content .common-div.left .content-wrap .title {
        display: none;
    }
}
@media only screen and (max-width: 1365px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .book-tickets .inner-content .common-div.left .content-wrap .img-wrap {
        display: none;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .book-tickets .inner-content .common-div.left .content-wrap .img-wrap.mob {
    display: none;
}
@media only screen and (max-width: 1365px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .book-tickets .inner-content .common-div.left .content-wrap .img-wrap.mob {
        display: flex !important;
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow: hidden;
        overflow-x: scroll;
        justify-content: space-around;
        text-align: center;
    }
}

@media only screen and (max-width: 1365px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .book-tickets .inner-content .common-div.left .content-wrap .img-wrap.mob::-webkit-scrollbar {
        height: 8px;
    }
}
@media only screen and (max-width: 1365px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .book-tickets .inner-content .common-div.left .content-wrap .img-wrap.mob::-webkit-scrollbar-thumb {
        background-color: #ccc; /* Customize scrollbar color */
        border-radius: 4px;
    }
}
@media only screen and (max-width: 1365px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .book-tickets .inner-content .common-div.left .content-wrap .img-wrap.mob::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Customize scrollbar track color */
    }
}
@media only screen and (max-width: 767px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .book-tickets .inner-content .common-div.left .content-wrap .img-wrap.mob {
        justify-content: start;
    }
}
@media only screen and (max-width: 1365px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .book-tickets .inner-content .common-div.left .content-wrap .img-wrap.mob img {
        margin: 0 10px 10px 0;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .book-tickets .inner-content .common-div.right .content-wrap {
    margin-top: 60px;
}
@media only screen and (max-width: 1365px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .book-tickets .inner-content .common-div.right .content-wrap {
        margin-top: 20px;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .book-tickets .inner-content .common-div.right .content-wrap {
        margin-top: 0;
    }
}
@media only screen and (max-width: 1365px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .book-tickets .inner-content .common-div.right .content-wrap .left-side .title {
        display: none;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .book-tickets .inner-content .common-div.right .content-wrap .left-side .ticket-wrap {
    display: flex;
    align-items: end;
    gap: 40px;
}
@media only screen and (min-width: 1366px) and (max-width: 1499px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .book-tickets .inner-content .common-div.right .content-wrap .left-side .ticket-wrap {
        gap: 20px;
    }
}
@media only screen and (max-width: 1365px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .book-tickets .inner-content .common-div.right .content-wrap .left-side .ticket-wrap {
        display: block;
        gap: 0;
        text-align: center;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .book-tickets .inner-content .common-div.right .content-wrap .left-side .ticket-wrap .img-wrap {
    flex: 0 0 auto;
}
@media only screen and (max-width: 1365px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .book-tickets .inner-content .common-div.right .content-wrap .left-side .ticket-wrap .img-wrap {
        display: none;
    }
}
@media only screen and (max-width: 1365px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .book-tickets .inner-content .common-div.right .content-wrap .left-side .ticket-wrap .short-info {
        margin: 30px 0 0;
    }
}
@media only screen and (min-width: 1200px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .payment-process {
        width: 94.34%;
        max-width: none;
        margin: 0 auto;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .payment-process .inner-content {
    display: flex;
    position: relative;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .payment-process .inner-content {
        display: block;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .payment-process .inner-content .common-div {
    width: 33.39%;
    position: relative;
    z-index: 2;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .payment-process .inner-content .common-div {
        width: 100%;
        text-align: center;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .payment-process .inner-content .common-div .img-wrap {
    margin-bottom: 30px;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .payment-process .inner-content .common-div .img-wrap {
        display: none;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .payment-process .inner-content .common-div .img-wrap img {
    width: 297px;
    aspect-ratio: 0.4941763727;
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .payment-process .inner-content .common-div .text-info {
    max-width: 550px;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .payment-process .inner-content .common-div .text-info {
        max-width: 100%;
        text-align: center;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .payment-process .inner-content .common-div.left {
    text-align: right;
    margin-left: auto;
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .payment-process .inner-content .common-div.left .text-info {
    margin-left: auto;
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .payment-process .inner-content .common-div.right {
    text-align: left;
    margin-right: auto;
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .payment-process .inner-content .common-div.right .text-info {
    margin-right: auto;
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .payment-process .inner-content .middle-content {
    text-align: center;
    width: 27.47%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .payment-process .inner-content .middle-content {
        display: none;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .payment-process .inner-content .middle-content .img-wrap {
        display: none;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .payment-process .inner-content .middle-content .img-wrap img {
    width: 297px;
    aspect-ratio: 0.4941763727;
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .payment-process .inner-content .mob-view {
    display: none;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .payment-process .inner-content .mob-view {
        display: flex !important;
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow: hidden;
        overflow-x: scroll;
        justify-content: start;
        margin: 30px 0;
    }
}

@media only screen and (max-width: 1365px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .payment-process .inner-content .mob-view::-webkit-scrollbar {
        height: 8px;
    }
}
@media only screen and (max-width: 1365px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .payment-process .inner-content .mob-view::-webkit-scrollbar-thumb {
        background-color: #ccc; /* Customize scrollbar color */
        border-radius: 4px;
    }
}
@media only screen and (max-width: 1365px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .payment-process .inner-content .mob-view::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Customize scrollbar track color */
    }
}

.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .payment-process .inner-content .mob-view .img-wrap {
    text-align: center;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .payment-process .inner-content .mob-view .img-wrap {
        margin: 0 10px 10px 0;
        width: 100%;
        min-width: 60%;
    }
}
@media only screen and (max-width: 375px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .payment-process .inner-content .mob-view .img-wrap {
        width: 100%;
        min-width: 100%;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .payment-process .inner-content .mob-view .img-wrap img {
    width: 297px;
    aspect-ratio: 0.4941763727;
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .payment-process .inner-content:after {
    content: '';
    position: absolute;
    background: url("../img/case-study-details/movie-ticket-booking-app/webp/payment-bg.webp") no-repeat center;
    background-size: 100% 100%;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 auto;
    width: 100%;
    height: 3px;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .payment-process .inner-content:after {
        display: none;
    }
}
@media only screen and (min-width: 1200px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .download-tickets {
        width: 84.066%;
        margin-left: 5.5%;
        max-width: none;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .download-tickets .inner-content {
    display: flex;
    align-items: center;
    justify-content: center;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .download-tickets .inner-content {
        display: block;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .download-tickets .inner-content .left {
    width: 41.11%;
    text-align: right;
}
@media only screen and (min-width: 1200px) and (max-width: 1899px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .download-tickets .inner-content .left {
        padding-right: 20px;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .download-tickets .inner-content .left {
        width: 100%;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .download-tickets .inner-content .left .img-wrap {
        text-align: center;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .download-tickets .inner-content .left .img-wrap {
        display: none;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .download-tickets .inner-content .left .img-wrap img {
    width: 629px;
    aspect-ratio: 4.0063694268;
    height: auto;
    min-height: auto;
    max-width: 100%;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .download-tickets .inner-content .left .img-wrap img {
        max-width: 60%;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .download-tickets .inner-content .middle {
    width: 23.3%;
    text-align: center;
    margin: 0 auto;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .download-tickets .inner-content .middle {
        width: 100%;
        margin: 30px 0;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .download-tickets .inner-content .middle .img-wrap img {
    width: 297px;
    aspect-ratio: 0.4941763727;
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .download-tickets .inner-content .last {
    width: 35.66%;
}
@media only screen and (min-width: 1200px) and (max-width: 1899px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .download-tickets .inner-content .last {
        padding-left: 20px;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .download-tickets .inner-content .last {
        width: 100%;
        text-align: center;
    }
}
@media only screen and (min-width: 1900px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .explore-theatre {
        width: 66.37%;
        max-width: none;
        margin: 0 auto;
    }
}
@media only screen and (min-width: 1800px) and (max-width: 1899px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .explore-theatre {
        max-width: none;
        margin: 0 auto;
        width: 75%;
    }
}
@media only screen and (min-width: 1500px) and (max-width: 1799px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .explore-theatre {
        max-width: none;
        margin: 0 auto;
        width: 80%;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .explore-theatre {
        max-width: none;
        margin: 0 auto;
        width: 90%;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .explore-theatre {
        padding-bottom: 0;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .explore-theatre .inner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .explore-theatre .inner-content {
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow: hidden;
        overflow-x: scroll;
        margin-bottom: 30px;
        justify-content: center;
    }
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .explore-theatre .inner-content {
        justify-content: start;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .explore-theatre .inner-content::-webkit-scrollbar {
        height: 8px;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .explore-theatre .inner-content::-webkit-scrollbar-thumb {
        background-color: #ccc; /* Customize scrollbar color */
        border-radius: 4px;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .explore-theatre .inner-content::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Customize scrollbar track color */
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .explore-theatre .inner-content .img-wrap {
        margin-bottom: 10px;
        margin-right: 10px;
    }
}
@media only screen and (max-width: 767px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .explore-theatre .inner-content .img-wrap {
        min-width: 60%;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .explore-theatre .inner-content .img-wrap img {
    width: 297px;
    aspect-ratio: 0.495;
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .explore-theatre .inner-content .middle-content h3.title span:nth-child(1) {
    padding-left: 70px;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .explore-theatre .inner-content .middle-content h3.title span:nth-child(1) {
        padding-left: 0;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .explore-theatre .inner-content .middle-content h3.title span:nth-child(2) {
    padding-left: 145px;
}
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .explore-theatre .inner-content .middle-content h3.title span:nth-child(2) {
        padding-left: 125px;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .explore-theatre .inner-content .middle-content h3.title span:nth-child(2) {
        padding-left: 0;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .explore-theatre .inner-content .middle-content .short-info {
    max-width: 515px;
    text-align: center;
    margin: 0 auto;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .explore-theatre .short-info {
        text-align: center;
    }
}
@media only screen and (min-width: 1500px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .notify-profile {
        width: 85.16%;
        max-width: none;
        margin: 0 auto;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .notify-profile {
        width: 90%;
        max-width: none;
        margin: 0 auto;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .notify-profile .inner-content {
    display: flex;
    gap: 100px;
}
@media only screen and (max-width: 1699px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .notify-profile .inner-content {
        gap: 70px;
    }
}
@media only screen and (max-width: 1365px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .notify-profile .inner-content {
        flex-wrap: wrap;
        display: block;
        gap: 0;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .notify-profile .inner-content .common-div {
    width: 50%;
}
@media only screen and (max-width: 1365px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .notify-profile .inner-content .common-div {
        width: 100%;
        text-align: center;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .notify-profile .inner-content .common-div .content-view {
    display: flex;
    gap: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1365px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .notify-profile .inner-content .common-div .content-view {
        align-items: center;
        margin-top: 0;
    }
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .notify-profile .inner-content .common-div .content-view {
        display: block;
        margin-top: 20px;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .notify-profile .inner-content .common-div .content-view {
        margin-top: 15px;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .notify-profile .inner-content .common-div .content-view .img-wrap {
    flex: 0 0 auto;
}
@media only screen and (min-width: 1366px) and (max-width: 1699px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .notify-profile .inner-content .common-div .content-view .img-wrap {
        max-width: 40%;
    }
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .notify-profile .inner-content .common-div .content-view .img-wrap {
        margin: 0 0 30px;
    }
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .notify-profile .inner-content .common-div .content-view .img-wrap img {
    width: 297px;
    aspect-ratio: 0.495;
}
.bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .notify-profile .inner-content .common-div .content-view .short-content {
    max-width: 390px;
}
@media only screen and (max-width: 1365px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer .notify-profile .inner-content .common-div .content-view .short-content {
        max-width: none;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer:before {
        content: '';
        position: absolute;
        border-radius: 30px;
        left: 1px;
        top: 1px;
        background-color: #000;
        width: calc(100% - 2px);
        height: calc(100% - 2px);
        z-index: -1;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer:before {
        border-radius: 20px;
    }
}
@media only screen and (max-width: 480px) {
    .bookmyticket-wrapper .book-app-screens .custom-container-common .app-content-outer:before {
        border-radius: 10px;
    }
}
.bookmyticket-wrapper .book-web-screens .custom-container-common {
    position: relative;
}
.bookmyticket-wrapper .book-web-screens .custom-container-common .web-title-outer {
    text-align: center;
    margin-bottom: 70px;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-web-screens .custom-container-common .web-title-outer {
        margin-bottom: 0;
    }
}
.bookmyticket-wrapper .book-web-screens .custom-container-common .web-content-outer {
    display: flex;
    gap: 30px;
    position: relative;
    z-index: 2;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-web-screens .custom-container-common .web-content-outer {
        display: block;
        gap: 0;
    }
}
.bookmyticket-wrapper .book-web-screens .custom-container-common .web-content-outer .resp-title-text {
    text-align: center;
}
.bookmyticket-wrapper .book-web-screens .custom-container-common .web-content-outer .common-div {
    padding-top: 160px;
    width: 22.52%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
@media only screen and (min-width: 1366px) and (max-width: 1699px) {
    .bookmyticket-wrapper .book-web-screens .custom-container-common .web-content-outer .common-div {
        padding-top: 130px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .bookmyticket-wrapper .book-web-screens .custom-container-common .web-content-outer .common-div {
        padding-top: 100px;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-web-screens .custom-container-common .web-content-outer .common-div {
        width: 100%;
        padding-top: 0;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-web-screens .custom-container-common .web-content-outer .common-div .short-info {
        text-align: center;
    }
}
.bookmyticket-wrapper .book-web-screens .custom-container-common .web-content-outer .common-div.left {
    text-align: right;
}
.bookmyticket-wrapper .book-web-screens .custom-container-common .web-content-outer .middle-div {
    width: 54.95%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-web-screens .custom-container-common .web-content-outer .middle-div {
        width: 100%;
        margin-bottom: 30px;
    }
}
.bookmyticket-wrapper .book-web-screens .custom-container-common .web-content-outer .middle-div img {
    width: 1004px;
    aspect-ratio: 0.6205191595;
    height: auto;
    min-height: auto;
    max-width: 100%;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.40);
    border-radius: 20px;
    border: 1px solid #222222;
}
.bookmyticket-wrapper .book-web-screens .custom-container-common .web-content-outer:after {
    content: '';
    position: absolute;
    background: url("../img/case-study-details/movie-ticket-booking-app/webp/homepage-bg.webp") no-repeat center bottom;
    background-size: 100% 100%;
    width: 100%;
    height: 110px;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    z-index: 1;
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .book-web-screens .custom-container-common .web-content-outer:after {
        display: none;
    }
}
.bookmyticket-wrapper .book-web-screens .custom-container-common .screen-wrapper {
    display: flex;
    gap: 100px;
    align-items: end;
    position: relative;
}
@media only screen and (min-width: 1500px) and (max-width: 1699px) {
    .bookmyticket-wrapper .book-web-screens .custom-container-common .screen-wrapper {
        gap: 70px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .bookmyticket-wrapper .book-web-screens .custom-container-common .screen-wrapper {
        gap: 50px;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-web-screens .custom-container-common .screen-wrapper {
        display: block;
        gap: 0;
    }
}
.bookmyticket-wrapper .book-web-screens .custom-container-common .screen-wrapper .seats-outer {
    position: absolute;
    left: 0;
    right: 0;
    top: 160px;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    z-index: 1;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-web-screens .custom-container-common .screen-wrapper .common-div {
        text-align: center;
    }
}
.bookmyticket-wrapper .book-web-screens .custom-container-common .screen-wrapper .common-div .img-wrap img {
    height: auto;
    max-width: 100%;
    min-height: auto;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.40);
    border-radius: 20px;
    border:1px solid #222222;
}
.bookmyticket-wrapper .book-web-screens .custom-container-common .screen-wrapper .common-div .short-info {
    max-width: 804px;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-web-screens .custom-container-common .screen-wrapper .common-div .short-info {
        max-width: 100%;
    }
}
.bookmyticket-wrapper .book-web-screens .custom-container-common .screen-wrapper .common-div.top .img-wrap img {
    width: 814px;
    aspect-ratio: 0.7109170306;
}
.bookmyticket-wrapper .book-web-screens .custom-container-common .screen-wrapper .common-div.bottom .img-wrap img {
    width: 814px;
    aspect-ratio: 1.7695652174;
}
.bookmyticket-wrapper .book-web-screens .custom-container-common .screen-wrapper .left-side {
    width: 50%;
    z-index: 2;
    position: relative;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-web-screens .custom-container-common .screen-wrapper .left-side {
        width: 100%;
    }
}
.bookmyticket-wrapper .book-web-screens .custom-container-common .screen-wrapper .right-side {
    width: 50%;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-web-screens .custom-container-common .screen-wrapper .right-side {
        width: 100%;
        margin-top: 35px;
    }
}
.bookmyticket-wrapper .book-web-screens .custom-container-common .screen-wrapper .right-side .common-div .img-wrap img {
    width: 814px;
    aspect-ratio: 1.1165980796;
    height: auto;
    max-width: 100%;
    min-height: auto;
}
.bookmyticket-wrapper .book-web-screens .custom-container-common .screen-wrapper .right-side .download-scan {
    padding: 200px 0;
    max-width: 629px;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-web-screens .custom-container-common .screen-wrapper .right-side .download-scan {
        padding: 90px 0 0;
    }
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .book-web-screens .custom-container-common .screen-wrapper .right-side .download-scan {
        padding: 70px 0 0;
    }
}
@media only screen and (max-width: 767px) {
    .bookmyticket-wrapper .book-web-screens .custom-container-common .screen-wrapper .right-side .download-scan {
        padding: 50px 0 0;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .book-web-screens .custom-container-common .screen-wrapper .right-side .download-scan {
        display: none;
    }
}
.bookmyticket-wrapper .book-web-screens .custom-container-common .screen-wrapper .right-side .download-scan .img-wrap img {
    width: 626px;
    aspect-ratio: 4.0128205128;
    height: auto;
    max-width: 100%;
    min-height: auto;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-web-screens .custom-container-common .screen-wrapper .right-side .download-scan .img-wrap img {
        max-width: 80%;
    }
}
.bookmyticket-wrapper .book-icon {
    position: relative;
    text-align: center;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-icon {
        margin: 30px auto 0;
        max-width: 30%;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .book-icon {
        max-width: 25%;
    }
}
@media only screen and (max-width: 480px) {
    .bookmyticket-wrapper .book-icon {
        max-width: 35%;
    }
}
.bookmyticket-wrapper .book-icon img {
    width: 190px;
    aspect-ratio: 1;
    height: auto;
    min-height: 100%;
}
.bookmyticket-wrapper .book-icon::before {
    content: '';
    background: url("./images/arrow-icon.svg") no-repeat;
    top: 50%;
    left: 50%;
    height: 50px;
    width: 50px;
    position: absolute;
    margin: 0;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-size: contain;
    z-index: 1;
}
.bookmyticket-wrapper .book-video-wrap .video-wrap {
    background-clip: padding-box;
    font-size: 0;
    line-height: 0;
    background: -webkit-linear-gradient(to bottom, rgba(246, 226, 116, 0.3), rgba(0, 0, 0, 0.3), rgba(246, 226, 116, 0.3), rgba(0, 0, 0, 0.3), rgba(246, 226, 116, 0.3));
    background: linear-gradient(to bottom, rgba(246, 226, 116, 0.3), rgba(0, 0, 0, 0.3), rgba(246, 226, 116, 0.3), rgba(0, 0, 0, 0.3), rgba(246, 226, 116, 0.3));
    position: relative;
    width: 100%;
    height: 100%;
}
.bookmyticket-wrapper .book-video-wrap .video-wrap .video-outer {
    content: "";
    position: relative;
    border-radius: 50px;
    left: 2px;
    top: 2px;
    background-color: #000;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    z-index: 2;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-video-wrap .video-wrap .video-outer {
        border-radius: 30px;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .book-video-wrap .video-wrap .video-outer {
        border-radius: 20px;
    }
}
@media only screen and (max-width: 480px) {
    .bookmyticket-wrapper .book-video-wrap .video-wrap .video-outer {
        border-radius: 10px;
    }
}
.bookmyticket-wrapper .book-video-wrap .video-wrap .video-outer video {
    border-radius: 50px;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-video-wrap .video-wrap .video-outer video {
        border-radius: 30px;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .book-video-wrap .video-wrap .video-outer video {
        border-radius: 20px;
    }
}
@media only screen and (max-width: 480px) {
    .bookmyticket-wrapper .book-video-wrap .video-wrap .video-outer video {
        border-radius: 10px;
    }
}
.bookmyticket-wrapper .book-typography .typo-wrap {
    background-clip: padding-box;
    background: -webkit-linear-gradient(to top, rgba(246, 226, 116, 0.3), rgba(0, 0, 0, 0.3), rgba(246, 226, 116, 0.3), rgba(0, 0, 0, 0.3));
    background: linear-gradient(to top, rgba(246, 226, 116, 0.3), rgba(0, 0, 0, 0.3), rgba(246, 226, 116, 0.3), rgba(0, 0, 0, 0.3));
}
.bookmyticket-wrapper .book-typography .typo-wrap .typo-outer {
    content: "";
    position: relative;
    border-radius: 50px;
    left: 2px;
    top: -2px;
    background-color: #000;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    z-index: 2;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer {
        border-radius: 30px;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer {
        border-radius: 20px;
    }
}
@media only screen and (max-width: 480px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer {
        border-radius: 10px;
    }
}
.bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap {
    padding: 80px 0;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap {
        padding: 50px 30px;
    }
}
@media only screen and (max-width: 767px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap {
        padding: 30px;
    }
}
@media only screen and (max-width: 480px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap {
        padding: 25px;
    }
}
@media only screen and (max-width: 375px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap {
        padding: 20px 15px;
    }
}
.bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items {
    width: 90.8%;
    margin: 0 auto;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items {
        width: 100%;
    }
}
.bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item {
    position: relative;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item .big-text-wrap {
        margin-bottom: 15px;
    }
}
.bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item .big-text-wrap span {
    color: #111;
}
.bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item .small-wrap {
    max-width: 388px;
    text-align: left;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item .small-wrap {
        max-width: 100%;
    }
}
.bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item .small-wrap .info-text .wrap-text {
    gap: 20px;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item .small-wrap .info-text .wrap-text {
        gap: 10px;
        text-align: center;
    }
}
.bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item .small-wrap .info-text .wrap-text .round {
    width: 25px;
    height: 25px;
    background: linear-gradient(180deg, #ffef9b 0%, #f3dd68 100%);
    background: -webkit-linear-gradient(180deg, #ffef9b 0%, #f3dd68 100%);
    border-radius: 100%;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item .small-wrap .info-text .wrap-text .round {
        width: 20px;
        height: 20px;
    }
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item .small-wrap .info-text .wrap-text .round {
        width: 10px;
        height: 10px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.top {
        margin-bottom: 70px;
    }
}
.bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.top .big-text-wrap {
    text-align: left;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.top .big-text-wrap {
        text-align: center;
    }
}
.bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.top .big-text-wrap span {
    font-size: 281px;
    line-height: 356px;
    letter-spacing: 2.811px;
    text-transform: uppercase;
}
@media only screen and (min-width: 1700px) and (max-width: 1899px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.top .big-text-wrap span {
        font-size: 230px;
        line-height: 250px;
    }
}
@media only screen and (min-width: 1500px) and (max-width: 1699px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.top .big-text-wrap span {
        font-size: 180px;
        line-height: 200px;
    }
}
@media only screen and (min-width: 1366px) and (max-width: 1499px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.top .big-text-wrap span {
        font-size: 200px;
        line-height: 220px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.top .big-text-wrap span {
        font-size: 120px;
        line-height: 130px;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.top .big-text-wrap span {
        font-size: 6.635vw;
        line-height: 7.635vw;
    }
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.top .big-text-wrap span {
        font-size: 8.635vw;
        line-height: 9.635vw;
    }
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.top .big-text-wrap span {
        font-size: 6.635vw;
        line-height: 7.635vw;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.top .big-text-wrap span {
        font-size: 7.635vw;
        line-height: 8.635vw;
    }
}
.bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.top .small-wrap {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 2;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.top .small-wrap {
        position: relative;
        transform: none;
    }
}
.bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.top .small-wrap .typo-list {
    list-style-type: none;
}
.bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.top .small-wrap .typo-list li {
    color: #999;
    margin: 0 15px 10px 0;
    font-size: 20px;
    line-height: 25px;
    opacity: 0.89;
    letter-spacing: 2px;
    font-family: 'Belgrano', Serif;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.top .small-wrap .typo-list li {
        text-align: center;
    }
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.top .small-wrap .typo-list li {
        margin: 0 10px 10px 0;
        font-size: 18px;
        line-height: 20px;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.top .small-wrap .typo-list li {
        font-size: 16px;
        line-height: 18px;
    }
}
.bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.bottom {
        display: block;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.bottom .left-side .book-icon {
        margin: 20px auto 30px;
    }
}
.bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.bottom .left-side .book-icon img {
    width: 180px;
    aspect-ratio: 1;
}
.bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.bottom .big-text-wrap {
    text-align: right;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.bottom .big-text-wrap {
        text-align: center;
    }
}
.bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.bottom .big-text-wrap span {
    font-size: 281px;
    line-height: 356px;
    letter-spacing: 2.811px;
    text-transform: uppercase;
}
@media only screen and (min-width: 1700px) and (max-width: 1899px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.bottom .big-text-wrap span {
        font-size: 230px;
        line-height: 250px;
    }
}
@media only screen and (min-width: 1366px) and (max-width: 1699px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.bottom .big-text-wrap span {
        font-size: 200px;
        line-height: 220px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.bottom .big-text-wrap span {
        font-size: 120px;
        line-height: 130px;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.bottom .big-text-wrap span {
        font-size: 6.635vw;
        line-height: 7.635vw;
    }
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.bottom .big-text-wrap span {
        font-size: 8.635vw;
        line-height: 9.635vw;
    }
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.bottom .big-text-wrap span {
        font-size: 6.635vw;
        line-height: 7.635vw;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.bottom .big-text-wrap span {
        font-size: 7.635vw;
        line-height: 8.635vw;
    }
}
.bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.bottom .small-wrap {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 2;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.bottom .small-wrap {
        position: relative;
        transform: none;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.bottom .small-wrap .wrap-text {
        flex-direction: row-reverse;
    }
}
.bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.bottom .small-wrap .typo-list {
    list-style-type: none;
}
.bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.bottom .small-wrap .typo-list li {
    color: #999;
    margin: 0 15px 10px 0;
    font-size: 20px;
    line-height: 20px;
    opacity: 0.89;
    letter-spacing: 2px;
    font-family: 'Akkurat';
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.bottom .small-wrap .typo-list li {
        margin: 0 10px 10px 0;
        font-size: 18px;
        line-height: 20px;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .book-typography .typo-wrap .typo-outer .content-wrap .typo-items .item.bottom .small-wrap .typo-list li {
        font-size: 16px;
        line-height: 18px;
    }
}
.bookmyticket-wrapper .book-colors {
    margin-top: 10px;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-colors {
        margin-top: 90px;
    }
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .book-colors {
        margin-top: 70px;
    }
}
@media only screen and (max-width: 767px) {
    .bookmyticket-wrapper .book-colors {
        margin-top: 50px;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .book-colors {
        margin-top: 35px;
    }
}
.bookmyticket-wrapper .book-colors .color-wrap {
    background-clip: padding-box;
    background: -webkit-linear-gradient(to bottom, rgba(246, 226, 116, 0.3), rgba(0, 0, 0, 0.3), rgba(246, 226, 116, 0.3), rgba(0, 0, 0, 0.3));
    background: linear-gradient(to bottom, rgba(246, 226, 116, 0.3), rgba(0, 0, 0, 0.3), rgba(246, 226, 116, 0.3), rgba(0, 0, 0, 0.3));
    height: 100%;
    width: 100%;
}
.bookmyticket-wrapper .book-colors .color-wrap .color-outer {
    content: "";
    position: relative;
    left: 2px;
    top: 2px;
    background-color: #000;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    z-index: 2;
}
.bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap {
    padding: 80px;
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap {
        padding: 50px;
    }
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap {
        padding: 50px 30px;
    }
}
@media only screen and (max-width: 767px) {
    .bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap {
        padding: 30px;
    }
}
@media only screen and (max-width: 480px) {
    .bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap {
        padding: 25px;
    }
}
.bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper {
    width: 87.69%;
    margin: 0 auto;
    padding: 220px 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper {
        padding: 50px 0 0;
        width: 100%;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper {
        width: 100%;
        padding: 0;
    }
}
.bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper .middle-text {
    text-align: center;
    position: relative;
}
.bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper .middle-text .big-text {
    font-size: 281px;
    line-height: 281px;
    letter-spacing: 2.811px;
    text-transform: uppercase;
    color: #151515;
    position: relative;
}
@media only screen and (min-width: 1700px) and (max-width: 1899px) {
    .bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper .middle-text .big-text {
        font-size: 230px;
        line-height: 250px;
    }
}
@media only screen and (min-width: 1366px) and (max-width: 1699px) {
    .bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper .middle-text .big-text {
        font-size: 200px;
        line-height: 210px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper .middle-text .big-text {
        font-size: 90px;
        line-height: 100px;
    }
}
@media only screen and (max-width: 1199px) {
    .bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper .middle-text .big-text {
        font-size: 70px;
        line-height: 80px;
    }
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper .middle-text .big-text {
        font-size: 60px;
        line-height: 70px;
    }
}
@media only screen and (max-width: 767px) {
    .bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper .middle-text .big-text {
        font-size: 50px;
        line-height: 60px;
    }
}
@media only screen and (max-width: 575px) {
    .bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper .middle-text .big-text {
        font-size: 40px;
        line-height: 50px;
    }
}
.bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper .middle-text .big-text .div-outer {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
    margin: 0 auto;
}
@media only screen and (max-width: 1365px) {
    .bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper .middle-text .big-text .div-outer {
        position: relative;
        display: flex;
        align-items: center;
        overflow: hidden;
        overflow-x: scroll;
    }
}
@media only screen and (max-width: 1365px) {
    .bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper .middle-text .big-text .div-outer::-webkit-scrollbar {
        height: 8px;
    }
}
@media only screen and (max-width: 1365px) {
    .bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper .middle-text .big-text .div-outer::-webkit-scrollbar-thumb {
        background-color: #ccc; /* Customize scrollbar color */
        border-radius: 4px;
    }
}
@media only screen and (max-width: 1365px) {
    .bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper .middle-text .big-text .div-outer::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Customize scrollbar track color */
    }
}

.bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper .middle-text .big-text .div-outer .common-div {
    position: absolute;
}
@media only screen and (min-width: 1700px) and (max-width: 1899px) {
    .bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper .middle-text .big-text .div-outer .common-div {
        max-width: 40%;
    }
}
@media only screen and (min-width: 1366px) and (max-width: 1699px) {
    .bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper .middle-text .big-text .div-outer .common-div {
        max-width: 45%;
    }
}
@media only screen and (max-width: 1365px) {
    .bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper .middle-text .big-text .div-outer .common-div {
        position: relative;
        margin: 0 5px;
        min-width: 25%;
    }
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper .middle-text .big-text .div-outer .common-div {
        min-width: 35%;
    }
}
@media only screen and (max-width: 480px) {
    .bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper .middle-text .big-text .div-outer .common-div {
        min-width: 50%;
    }
}
.bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper .middle-text .big-text .div-outer .div-one {
    left: -220px;
    top: -180px;
}
@media only screen and (min-width: 1700px) and (max-width: 1899px) {
    .bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper .middle-text .big-text .div-outer .div-one {
        left: -195px;
        top: -155px;
    }
}
@media only screen and (max-width: 1365px) {
    .bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper .middle-text .big-text .div-outer .div-one {
        left: 0;
        top: 0;
    }
}
.bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper .middle-text .big-text .div-outer .div-one img {
    width: 378px;
    aspect-ratio: 1.0677966102;
}
.bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper .middle-text .big-text .div-outer .div-two {
    right: 175px;
    top: -232px;
}
@media only screen and (max-width: 1365px) {
    .bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper .middle-text .big-text .div-outer .div-two {
        right: 0;
        top: 0;
    }
}
.bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper .middle-text .big-text .div-outer .div-two img {
    width: 329px;
    aspect-ratio: 1.2051282051;
}
.bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper .middle-text .big-text .div-outer .div-three {
    bottom: -180px;
    left: 113px;
}
@media only screen and (min-width: 1700px) and (max-width: 1899px) {
    .bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper .middle-text .big-text .div-outer .div-three {
        bottom: -152px;
        left: 80px;
    }
}
@media only screen and (min-width: 1366px) and (max-width: 1699px) {
    .bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper .middle-text .big-text .div-outer .div-three {
        bottom: -163px;
        left: 50px;
    }
}
@media only screen and (max-width: 1365px) {
    .bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper .middle-text .big-text .div-outer .div-three {
        bottom: 0;
        left: 0;
    }
}
.bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper .middle-text .big-text .div-outer .div-three img {
    width: 353px;
    aspect-ratio: 1.37890625;
}
.bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper .middle-text .big-text .div-outer .div-four {
    bottom: -135px;
    right: -220px;
}
@media only screen and (min-width: 1700px) and (max-width: 1899px) {
    .bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper .middle-text .big-text .div-outer .div-four {
        bottom: -120px;
        right: -210px;
    }
}
@media only screen and (max-width: 1365px) {
    .bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper .middle-text .big-text .div-outer .div-four {
        bottom: 0;
        right: 0;
    }
}
.bookmyticket-wrapper .book-colors .color-wrap .color-outer .content-wrap .colors-wrapper .middle-text .big-text .div-outer .div-four img {
    width: 347px;
    aspect-ratio: 1.2392857143;
}

.bookmyticket-wrapper .book-my-logo-wrap{
    background-color:#151515;
}
.bookmyticket-wrapper .book-my-logo-wrap .bg-img-wrap {
    position: relative;
    text-align: center;
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .book-my-logo-wrap .bg-img-wrap .img-wrap {
        display: none;
    }
}
.bookmyticket-wrapper .book-my-logo-wrap .bg-img-wrap .img-wrap img {
    width: 1920px;
    aspect-ratio: 16.2711864407;
}
.bookmyticket-wrapper .book-my-logo-wrap .bg-img-wrap .logo-wrap {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: auto;
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .book-my-logo-wrap .bg-img-wrap .logo-wrap {
        position: relative;
        transform: none;
    }
}
.bookmyticket-wrapper .book-my-logo-wrap .bg-img-wrap .logo-wrap img {
    width: 210px;
    aspect-ratio: 2.625;
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .book-my-logo-wrap .bg-img-wrap .logo-wrap img {
        max-width: 60%;
    }
}
@media only screen and (max-width: 767px) {
    .bookmyticket-wrapper .book-my-logo-wrap .bg-img-wrap .logo-wrap img {
        max-width: 50%;
    }
}
@media only screen and (max-width: 991px) {
    .bookmyticket-wrapper .seats-outer {
        display: none;
    }
}
.bookmyticket-wrapper .seats-outer img {
    width: 1617px;
    aspect-ratio: 2.9082733813;
    height: auto;
    min-height: 100%;
    max-width: 100%;
    opacity: 0.5;
}

/*Bookmyticket app css ends here*/


/*6pp app css starts here*/

@font-face {
    font-family: 'Binjay';
    src: url('../portfolio-fonts/ab-workout-app/Binjay.woff2') format('woff2'),
    url('../portfolio-fonts/ab-workout-app/Binjay.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../portfolio-fonts/ab-workout-app/Roboto-Regular.woff2') format('woff2'),
    url('../portfolio-fonts/ab-workout-app/Roboto-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../portfolio-fonts/ab-workout-app/Roboto-Medium.woff2') format('woff2'),
    url('../portfolio-fonts/ab-workout-app/Roboto-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../portfolio-fonts/ab-workout-app/Roboto-Bold.woff2') format('woff2'),
    url('../portfolio-fonts/ab-workout-app/Roboto-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Poppins";
    src: url('../portfolio-fonts/ab-workout-app/Poppins-Bold.woff2') format('woff2'),
    url('../portfolio-fonts/ab-workout-app/Poppins-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

.wrapper-6pp-success{
    background-color: #101010;
    font-family: 'Roboto';
    font-weight: 400;
    color:#ffffff;
}

@media only screen and (min-width: 1500px){
    .wrapper-6pp-success .abworkout-container{
        max-width: 1440px;
        padding: 0;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1499px) {
    .wrapper-6pp-success .abworkout-container{
        width: calc(100% - 80px);
        max-width: none;
    }

}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper-6pp-success .abworkout-container{
        width: calc(100% - 60px);
        max-width: none;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .wrapper-6pp-success .abworkout-container{
        width: calc(100% - 40px);
        max-width: none;
    }
}


.wrapper-6pp-success .abptb-150{
    padding: 150px 0;
}
@media only screen and (min-width:1200px) and (max-width: 1499px){
    .wrapper-6pp-success .abptb-150{
        padding: 110px 0;
    }
}
@media only screen and (max-width:1199px){
    .wrapper-6pp-success .abptb-150{
        padding: 90px 0;
    }
}
@media only screen and (max-width:991px){
    .wrapper-6pp-success .abptb-150{
        padding: 70px 0;
    }
}
@media only screen and (max-width:767px){
    .wrapper-6pp-success .abptb-150{
        padding: 50px 0;
    }
}
@media only screen and (max-width:575px){
    .wrapper-6pp-success .abptb-150{
        padding: 35px 0;
    }
}

.wrapper-6pp-success .abpt-150{
    padding-top: 150px;
}
@media only screen and (min-width:1200px) and (max-width: 1499px){
    .wrapper-6pp-success .abpt-150{
        padding-top: 110px;
    }
}
@media only screen and (max-width:1199px){
    .wrapper-6pp-success .abpt-150{
        padding-top: 90px;
    }
}
@media only screen and (max-width:991px){
    .wrapper-6pp-success .abpt-150{
        padding-top: 70px;
    }
}
@media only screen and (max-width:767px){
    .wrapper-6pp-success .abpt-150{
        padding-top: 50px;
    }
}
@media only screen and (max-width:575px){
    .wrapper-6pp-success .abpt-150{
        padding-top: 35px;
    }
}

.wrapper-6pp-success .abpb-150{
    padding-bottom: 150px;
}

@media only screen and (min-width:1200px) and (max-width: 1499px){
    .wrapper-6pp-success .abpb-150{
        padding-bottom: 110px;
    }
}
@media only screen and (max-width:1199px){
    .wrapper-6pp-success .abpb-150{
        padding-bottom: 90px;
    }
}
@media only screen and (max-width:991px){
    .wrapper-6pp-success .abpb-150{
        padding-bottom: 70px;
    }
}
@media only screen and (max-width:767px){
    .wrapper-6pp-success .abpb-150{
        padding-bottom: 50px;
    }
}
@media only screen and (max-width:575px){
    .wrapper-6pp-success .abpb-150{
        padding-bottom: 35px;
    }
}

.wrapper-6pp-success .abmb-150{
    margin-bottom: 150px;
}
@media only screen and (min-width:1200px) and (max-width: 1499px){
    .wrapper-6pp-success .abmb-150{
        margin-bottom: 110px;
    }
}
@media only screen and (max-width:1199px){
    .wrapper-6pp-success .abmb-150{
        margin-bottom: 90px;
    }
}
@media only screen and (max-width:991px){
    .wrapper-6pp-success .abmb-150{
        margin-bottom: 70px;
    }
}
@media only screen and (max-width:767px){
    .wrapper-6pp-success .abmb-150{
        margin-bottom: 50px;
    }
}
@media only screen and (max-width:575px){
    .wrapper-6pp-success .abmb-150{
        margin-bottom: 35px;
    }
}

.wrapper-6pp-success .abfont-binjoy{
    font-family: 'Binjay';
}
.wrapper-6pp-success .abroboto-medium{
    font-weight: 500;
}
.wrapper-6pp-success .abroboto-bold{
   font-weight: 700;
}

.wrapper-6pp-success .abfont-56{
    font-size: 56px;
    line-height:68px;
}
@media only screen and (max-width: 1499px){
    .wrapper-6pp-success .abfont-56{
        font-size: 50px;
        line-height:62px;
    }
}
@media only screen and (max-width: 1199px){
    .wrapper-6pp-success .abfont-56{
        font-size: 38px;
        line-height:48px;
    }
}


.wrapper-6pp-success .abfont-40{
    font-size: 40px;
    line-height:40px;
}

@media only screen and (max-width: 1199px){
    .wrapper-6pp-success .abfont-40{
        font-size: 32px;
        line-height:45px;
    }
}

@media only screen and (max-width: 991px){
    .wrapper-6pp-success .abfont-40{
        font-size: 28px;
        line-height:34px;
    }
}

@media only screen and (max-width: 575px){
    .wrapper-6pp-success .abfont-40{
        font-size: 24px;
        line-height:32px;
    }
}

.wrapper-6pp-success .abfont-22{
    font-size: 22px;
    line-height: 32px;
}

@media only screen and (max-width: 1199px){
    .wrapper-6pp-success .abfont-22{
        font-size: 18px;
        line-height:28px;
    }
}

.wrapper-6pp-success .abfont-18{
    font-size: 18px;
    line-height: 30px;
}
@media only screen and (max-width: 1199px){
    .wrapper-6pp-success .abfont-18{
        font-size: 16px;
        line-height:26px;
    }
}

.wrapper-6pp-success .abfont-orange{
    color: #ff5500;
}

.wrapper-6pp-success .abbr-24{
    border-radius: 24px;
}

@media only screen and (max-width: 991px){
    .wrapper-6pp-success .abfont-24{
        border-radius: 20px;
    }
}

.wrapper-6pp-success .ab-banner-section{
    position: relative;
    overflow: hidden;
}
.wrapper-6pp-success .ab-banner-section:before{
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 992px;
    height: 699px;
    background: url("../img/case-study-details/ab-workout-app/webp/banner-bg.webp") no-repeat;
    background-size:cover;
}

@media only screen and (max-width: 1199px){
    .wrapper-6pp-success .ab-banner-section:before{
        background-size: 80%;
        background-position: right top;
    }
}

@media only screen and (max-width: 575px){
    .wrapper-6pp-success .ab-banner-section:before{
        opacity: 0.30;
    }
}

.wrapper-6pp-success .ab-banner-section .banner-wrapper{
    position: relative;
    z-index: 2;
}

.wrapper-6pp-success .ab-banner-section .banner-wrapper .middle-img-wrap .mobtext{
    font-family: "Poppins";
    font-weight: 700;
    font-size: 16.875rem;
    line-height: 25.313rem;
    background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.10;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    transform: translateY(-50%);
}

@media only screen and (max-width:1699px){
    .wrapper-6pp-success .ab-banner-section .banner-wrapper .middle-img-wrap .mobtext{
        font-size: 12.875rem;
        line-height: 16.313rem;
    }
}

@media only screen and (max-width:1199px){
    .wrapper-6pp-success .ab-banner-section .banner-wrapper .middle-img-wrap .mobtext{
        font-size: 8.875rem;
        line-height: 12.313rem;
    }
}

@media only screen and (max-width:991px){
    .wrapper-6pp-success .ab-banner-section .banner-wrapper .middle-img-wrap .mobtext{
        font-size: 6.375rem;
        line-height: 8.313rem;
    }
}

@media only screen and (max-width:575px){
    .wrapper-6pp-success .ab-banner-section .banner-wrapper .middle-img-wrap .mobtext{
        position: relative;
        top: 0;
        transform: none;
        font-size: 3.375rem;
        line-height: 5.313rem;
        margin-top: 15px;
    }
}

.wrapper-6pp-success .ab-banner-section .banner-wrapper .middle-img-wrap .img-wrap{
    max-width: 387px;
    margin: 0 auto;
    position: relative;
}

@media only screen and (max-width:1199px){
    .wrapper-6pp-success .ab-banner-section .banner-wrapper .middle-img-wrap .img-wrap img{
        max-width: 80%;
    }
}

.wrapper-6pp-success .ab-banner-section .banner-wrapper .work-numb-outer{
    max-width: 610px;
    margin: 0 auto;
}

.wrapper-6pp-success .ab-banner-section .banner-wrapper .work-numbers{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 50px;
}

@media only screen and (max-width: 1199px){
    .wrapper-6pp-success .ab-banner-section .banner-wrapper .work-numbers{
        grid-gap: 30px;
    }
}

@media only screen and (max-width: 767px){
    .wrapper-6pp-success .ab-banner-section .banner-wrapper .work-numbers{
        grid-gap: 15px;
    }
}
.wrapper-6pp-success .ab-banner-section .banner-wrapper .work-numbers .item{
    border: 1px solid #ff5500;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
@media only screen and (max-width: 575px){
    .wrapper-6pp-success .ab-banner-section .banner-wrapper .work-numbers .item{
        padding: 15px 20px;
    }
}

/*6pp about section css starts here*/
.wrapper-6pp-success .ababout-section{
    position: relative;
}
.wrapper-6pp-success .ababout-section:before{
    content: '';
    position: absolute;
    background: url("../img/case-study-details/ab-workout-app/webp/about-bg.webp") no-repeat center;
    background-size: contain;
    width: 100%;
    height: 780px;
    top: 50%;
    transform: translateY(-50%);
}
@media only screen and (max-width: 767px){
    .wrapper-6pp-success .ababout-section:before{
        display: none;
    }
}
.wrapper-6pp-success .ababout-section .about-abworkout{
    background: linear-gradient(180deg, rgba(16, 16, 16, 1) 0%, rgba(40, 40, 40, 1) 100%);
}
.wrapper-6pp-success .ababout-section .abworkout-container{position: relative;z-index:2;}
.wrapper-6pp-success .ababout-section .about-abworkout .content-wrap{
    padding: 30px 40px 0;
}
@media only screen and (max-width: 575px){
    .wrapper-6pp-success .ababout-section .about-abworkout .content-wrap{
        padding: 15px 20px 0;
    }
}

.wrapper-6pp-success .ababout-section .about-abworkout .content-wrap .img-wrap{
    max-width: 418px;
    margin: 30px auto 0;
}
.wrapper-6pp-success .ababout-section .orange-box{
    padding: 78px;
    background-color: #FF5500;
}

@media only screen and (max-width: 1199px){
    .wrapper-6pp-success .ababout-section .orange-box{
        padding: 50px;
    }
}

@media only screen and (max-width: 991px){
    .wrapper-6pp-success .ababout-section .orange-box{
        padding: 35px;
    }
}

@media only screen and (max-width: 575px){
    .wrapper-6pp-success .ababout-section .orange-box{
        padding: 20px;
    }
}

/*6pp about section css ends here*/

/*6pp ab specifications section css starts here*/
.wrapper-6pp-success .ab-specifications .ab-specs-wrapper{
    display: flex;
    flex-direction: column;
    gap: 30px;
}
@media only screen and (max-width: 767px){
    .wrapper-6pp-success .ab-specifications .ab-specs-wrapper{
        gap: 15px;
    }
}
.wrapper-6pp-success .ab-specifications .ab-specs-wrapper .item-club{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 30px;
}

@media only screen and (max-width: 767px){
    .wrapper-6pp-success .ab-specifications .ab-specs-wrapper .item-club{
        grid-gap: 15px;
    }
}

@media only screen and (max-width: 575px){
    .wrapper-6pp-success .ab-specifications .ab-specs-wrapper .item-club{
        grid-template-columns: 1fr;
    }
}

.wrapper-6pp-success .ab-specifications .ab-specs-wrapper .item .inner-item{
    overflow: hidden;
    position: relative;
}
.wrapper-6pp-success .ab-specifications .ab-specs-wrapper .item .inner-item:before{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    background-color: #FF5500;
}
.wrapper-6pp-success .ab-specifications .ab-specs-wrapper .item .inner-item.clr-div{
    background-color: #202020;
    padding: 90px 40px;
}

@media only screen and (max-width:1199px){
    .wrapper-6pp-success .ab-specifications .ab-specs-wrapper .item .inner-item.clr-div{
        padding: 50px 30px 90px;
    }
}

@media only screen and (max-width:991px){
    .wrapper-6pp-success .ab-specifications .ab-specs-wrapper .item .inner-item.clr-div{
        padding:30px 30px 90px;
    }
}

@media only screen and (max-width:767px){
    .wrapper-6pp-success .ab-specifications .ab-specs-wrapper .item .inner-item.clr-div{
        padding:25px 20px 90px;
    }
}


@media only screen and (max-width:1199px){
    .wrapper-6pp-success .ab-specifications .ab-specs-wrapper .item .inner-item.clr-div.last{
        padding: 50px 30px;
    }
}

@media only screen and (max-width:991px){
    .wrapper-6pp-success .ab-specifications .ab-specs-wrapper .item .inner-item.clr-div.last{
        padding:30px;
    }
}

@media only screen and (max-width:767px){
    .wrapper-6pp-success .ab-specifications .ab-specs-wrapper .item .inner-item.clr-div.last{
        padding:25px 20px 35px;
    }
}


.wrapper-6pp-success .ab-specifications .ab-specs-wrapper .item .inner-item.clr-div .img-wrap{
    text-align: center;
}


/*final one*/


.wrapper-6pp-success .ab-specifications .ab-specs-wrapper .item .inner-item.clr-div{
    position: relative;
}

.wrapper-6pp-success .ab-specifications .ab-specs-wrapper .item .inner-item.clr-div .content {
    position :relative;
    z-index: 1;
    background-color: grey;
    overflow: hidden;
}

.wrapper-6pp-success .ab-specifications .ab-specs-wrapper .item .inner-item.clr-div .carte-button {
    bottom: 44px;
    right: 44px;
    position :absolute;
    z-index: 3;
}

@media only screen and (max-width: 1199px){
    .wrapper-6pp-success .ab-specifications .ab-specs-wrapper .item .inner-item.clr-div .carte-button {
        bottom: 35px;
        right: 35px;
    }
}

@media only screen and (max-width: 991px){
    .wrapper-6pp-success .ab-specifications .ab-specs-wrapper .item .inner-item.clr-div .carte-button {
        bottom: 25px;
        right: 25px;
    }
}
@media only screen and (max-width: 480px){
    .wrapper-6pp-success .ab-specifications .ab-specs-wrapper .item .inner-item.clr-div .carte-button {
        width: 35px;
        height: 35px;
    }
}

.wrapper-6pp-success .ab-specifications .ab-specs-wrapper .item .inner-item.clr-div .carte {
    position :absolute;
    bottom: 40px;
    padding: 20px;
    left: 0;
    right:60px;
    background-color: rgba(62,62,62,0.25);
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    border-radius: 24px;
    width: calc(100% - 155px);
    height: auto;
    margin: 0 auto;
    transition: all 0.3s linear;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    font-size: 18px;
    line-height: 30px;
}

@media only screen and (max-width: 991px){
    .wrapper-6pp-success .ab-specifications .ab-specs-wrapper .item .inner-item.clr-div .carte {
        right: 0;
        bottom: 76px;
        width: calc(100% - 80px);
        font-size: 16px;
        line-height: 26px;
    }
}

@media only screen and (max-width: 480px){
    .wrapper-6pp-success .ab-specifications .ab-specs-wrapper .item .inner-item.clr-div .carte {
        width: calc(100% - 50px);
        padding: 15px;
    }
}
.wrapper-6pp-success .ab-specifications .ab-specs-wrapper .item .inner-item.clr-div .carte-button:hover{
    opacity: 0.35;
    transition: all 0.3s ease-in-out;
}

.wrapper-6pp-success .ab-specifications .ab-specs-wrapper .item .inner-item.clr-div .carte-button:hover + .carte {
    border-top: none;
    bottom: 40px;
    height: auto;
    width: calc(100% - 155px);
    opacity: 1;
    visibility: visible;
}

@media only screen and (max-width: 991px){
    .wrapper-6pp-success .ab-specifications .ab-specs-wrapper .item .inner-item.clr-div .carte-button:hover + .carte {
        bottom: 76px;
        width: calc(100% - 80px);
    }
}

@media only screen and (max-width: 480px){
    .wrapper-6pp-success .ab-specifications .ab-specs-wrapper .item .inner-item.clr-div .carte-button:hover + .carte {
        width: calc(100% - 50px);
    }
}


/*6pp ab specifications section css ends here*/

/*6pp challenges section css starts here*/
.wrapper-6pp-success ul.lists li{
    position: relative;
    padding-left: 35px;
    margin: 0 0 30px;
}

@media only screen and (max-width: 1199px){
    .wrapper-6pp-success ul.lists li{
        margin: 0 0 15px;
    }
}
@media only screen and (max-width: 575px){
    .wrapper-6pp-success ul.lists li{
        margin: 0 0 10px;
    }
}
.wrapper-6pp-success ul.lists li:last-child{
    margin: 0;
}
.wrapper-6pp-success ul.lists li:before{
    content: '';
    position: absolute;
    background: url("../img/case-study-details/ab-workout-app/checkbox.svg") no-repeat;
    background-size: cover;
    width: 21px;
    height: 21px;
    top: 4px;
    left: 0;
}
@media only screen and (max-width: 480px){
    width: 16px;
    height: 16px;
}

.wrapper-6pp-success ul.lists-two li{
    position: relative;
    padding-left: 30px;
    margin: 0 0 15px;
}

@media only screen and (max-width: 991px){
    .wrapper-6pp-success ul.lists-two li{
        margin: 0 0 10px;
    }
}
@media only screen and (max-width: 575px){
    .wrapper-6pp-success ul.lists-two li{
        margin: 0 0 6px;
        padding-left: 25px;
    }
}

.wrapper-6pp-success ul.lists-two li:last-child{
    margin: 0;
}
.wrapper-6pp-success ul.lists-two li:before{
    content: '';
    position: absolute;
    border: 1px solid #FF5500;
    border-radius: 99em;
    width: 14px;
    height: 14px;
    top: 7px;
    left: 0;
}

.wrapper-6pp-success .abrightside{
   max-width: 891px;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

@media only screen and (max-width:1499px){
    .wrapper-6pp-success .abrightside{
        max-width: none;
    }
}

@media only screen and (max-width:1199px){
    .wrapper-6pp-success .abrightside{
        gap: 30px;
    }
}
@media only screen and (max-width:575px){
    .wrapper-6pp-success .abrightside{
        gap: 20px;
    }
}

/*6pp challenges section css ends here*/

/*6pp features section css starts here*/
.wrapper-6pp-success .ab-features-section {
    width: 100%;
    margin-bottom: 30px;
}

@media only screen and (max-width: 1499px){
    .wrapper-6pp-success .ab-features-section {
        margin-bottom: 50px;
    }
}

.wrapper-6pp-success .ab-features-section p {
    margin: 0;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .wrapper-6pp-success .ab-features-section {
        padding-top: 40px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .wrapper-6pp-success .ab-features-section {
        padding-top: 70px;
    }
}
@media only screen and (max-width: 575px) {
    .wrapper-6pp-success .ab-features-section .left-right-space {
        padding-top: 15px;
    }
}
.wrapper-6pp-success .ab-features-section .challenges-steps {
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin: 0 auto -70px;
}


.wrapper-6pp-success .ab-features-section .challenges-steps .challenges-cards {
    text-align: center;
    padding-top: 20px;
    margin-bottom: 20px;
    border-radius: 24px;
}
@media only screen and (max-width: 575px) {
    .wrapper-6pp-success .ab-features-section .challenges-steps .challenges-cards {
        border-radius: 9px;
    }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .wrapper-6pp-success .ab-features-section .challenges-steps .challenges-cards {
        border-radius: 16px;
    }
}
.wrapper-6pp-success .ab-features-section .challenges-steps .challenges-cards .moreover-media .media{
    display: flex;
    flex-direction: column;
}

.wrapper-6pp-success .ab-features-section .challenges-steps .challenges-cards .moreover-media .moreover-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background-color: #ffffff;
    border-radius: 99em;
    margin: 0 0 15px;
}
@media only screen and (max-width: 767px) {
    .wrapper-6pp-success .ab-features-section .challenges-steps .challenges-cards .moreover-media .moreover-box {
        width: 60px;
        height: 60px;
    }
}
@media only screen and (max-width: 575px) {
    .wrapper-6pp-success .ab-features-section .challenges-steps .challenges-cards .moreover-media .moreover-box {
        width: 50px;
        height: 50px;
    }
}

@media only screen and (max-width: 767px) {
    .wrapper-6pp-success .ab-features-section .challenges-steps .challenges-cards .moreover-media .moreover-box img{
        max-width: 60%;
    }
}
.wrapper-6pp-success .ab-features-section .challenges-steps .challenges-cards .moreover-media .moreover-text {
    text-align: left;
}

.wrapper-6pp-success .ab-features-section .challenges-steps .challenges-cards:nth-child(even) {
    background-color: #FF5500;
    padding: 35px;
}
@media only screen and (max-width: 767px) {
    .wrapper-6pp-success .ab-features-section .challenges-steps .challenges-cards:nth-child(even) {
        padding: 25px 20px;
    }
}
.wrapper-6pp-success .ab-features-section .challenges-steps .challenges-cards:nth-child(odd) {
    background-color: #202020;
    padding:35px;
}
@media only screen and (max-width: 767px) {
    .wrapper-6pp-success .ab-features-section .challenges-steps .challenges-cards:nth-child(odd) {
        padding: 25px 20px;
    }
}
.wrapper-6pp-success .ab-features-section .challenges-steps .challenges-cards:nth-child(1) {
    position: sticky;
    top: 80px;
}
.wrapper-6pp-success .ab-features-section .challenges-steps .challenges-cards:nth-child(2) {
    position: sticky;
    top: 100px;
}
.wrapper-6pp-success .ab-features-section .challenges-steps .challenges-cards:nth-child(3) {
    position: sticky;
    top: 120px;
}
.wrapper-6pp-success .ab-features-section .challenges-steps .challenges-cards:nth-child(4) {
    position: sticky;
    top: 140px;
}
.wrapper-6pp-success .ab-features-section .challenges-steps .challenges-cards:nth-child(5) {
    position: sticky;
    top: 160px;
}
/*6pp features section css ends here*/

/*6pp abproduct section css starts here*/
.wrapper-6pp-success .ab-product-section{
    overflow: hidden;
}

.wrapper-6pp-success .ab-product-section .bottomview{
    position: relative;
}
.wrapper-6pp-success .ab-product-section .bottomview:before{
    content: '';
    position: absolute;
    background: url("../img/case-study-details/ab-workout-app/webp/product-bg.webp") no-repeat;
    width: 100%;
    height: 800px;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0 auto;
    z-index: 2;
}

@media only screen and (max-width: 767px){
    .wrapper-6pp-success .ab-product-section .bottomview:before{
        display: none;
    }
}

.wrapper-6pp-success .ab-product-section .bottomview .product-wrapper{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

@media only screen and (max-width: 1199px){
    .wrapper-6pp-success .ab-product-section .bottomview .product-wrapper{
        gap: 30px;
    }
}

@media only screen and (max-width: 767px){
    .wrapper-6pp-success .ab-product-section .bottomview .product-wrapper{
        grid-template-columns: 1fr;
    }
}

.wrapper-6pp-success .ab-product-section .bottomview .product-wrapper .item{
    display: flex;
    flex-direction: column;
    gap: 150px;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px){
    .wrapper-6pp-success .ab-product-section .bottomview .product-wrapper .item{
        gap: 110px;
    }
}
@media only screen and (max-width: 1199px){
    .wrapper-6pp-success .ab-product-section .bottomview .product-wrapper .item{
        gap: 90px;
    }
}
@media only screen and (max-width: 991px){
    .wrapper-6pp-success .ab-product-section .bottomview .product-wrapper .item{
        gap: 70px;
    }
}
@media only screen and (max-width: 767px){
    .wrapper-6pp-success .ab-product-section .bottomview .product-wrapper .item{
        gap: 30px;
        display: flex;
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow: hidden;
        overflow-x: scroll;
        width: 100%;
        min-width: 100%;
        flex-direction: row;
    }
}

@media only screen and (max-width: 767px){
    .wrapper-6pp-success .ab-product-section .bottomview .product-wrapper .item::-webkit-scrollbar{
        height: 8px;
    }
}

@media only screen and (max-width: 767px){
    .wrapper-6pp-success .ab-product-section .bottomview .product-wrapper .item::-webkit-scrollbar-thumb{
        background-color: #ccc; /* Customize scrollbar color */
        border-radius: 4px;
    }
}
@media only screen and (max-width: 767px){
    .wrapper-6pp-success .ab-product-section .bottomview .product-wrapper .item::-webkit-scrollbar-track{
        background-color: #202020; /* Customize scrollbar track color */
    }
}


.wrapper-6pp-success .ab-product-section .bottomview .product-wrapper .item:nth-child(2){
    margin-top: 150px;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px){
    .wrapper-6pp-success .ab-product-section .bottomview .product-wrapper .item:nth-child(2){
        margin-top: 110px;
    }
}
@media only screen and (max-width: 1199px){
    .wrapper-6pp-success .ab-product-section .bottomview .product-wrapper .item:nth-child(2){
        margin-top: 90px;
    }
}
@media only screen and (max-width: 991px){
    .wrapper-6pp-success .ab-product-section .bottomview .product-wrapper .item:nth-child(2){
        margin-top: 70px;
    }
}
@media only screen and (max-width: 767px){
    .wrapper-6pp-success .ab-product-section .bottomview .product-wrapper .item:nth-child(2){
        margin-top: 0;
    }
}



.wrapper-6pp-success .ab-product-section .bottomview .product-wrapper .item .img-wrap{
    max-width: 330px;
    margin: 0 auto;
}
@media only screen and (max-width: 767px){
    .wrapper-6pp-success .ab-product-section .bottomview .product-wrapper .item .img-wrap{
        min-width: 40%;
        margin: 0 0 10px;
    }
}


/*6pp abproduct section css ends here*/

/*6pp ab-clientwords-section css starts here*/
@media only screen and (max-width: 767px){
    .wrapper-6pp-success .ab-clientwords-section .abrightside{
        text-align: center;
    }
}


.wrapper-6pp-success .ab-clientwords-section .logo-wrap{
    background-color: #202020;
    padding: 60px 30px;
    margin-right: 15px;
}

@media only screen and (max-width: 1199px){
    .wrapper-6pp-success .ab-clientwords-section .logo-wrap{
        padding: 45px 30px;
    }
}

@media only screen and (max-width: 991px){
    .wrapper-6pp-success .ab-clientwords-section .logo-wrap{
        padding: 35px 15px;
        margin-right: 0;
    }
}

@media only screen and (max-width: 767px){
    .wrapper-6pp-success .ab-clientwords-section .logo-wrap{
        max-width: 50%;
        margin: 0 auto 30px;
        padding: 20px 15px;
    }
}

.wrapper-6pp-success .ab-clientwords-section .logo-wrap:before{
    content: '';
    position: absolute;
    top:3px;
    right:-41px;
    background: url("../img/case-study-details/ab-workout-app/quote.svg") no-repeat;
    width: 82px;
    height: 71px;
}

@media only screen and (max-width:1499px){
    .wrapper-6pp-success .ab-clientwords-section .logo-wrap:before{
       background-size: 60%;
    }
}

@media only screen and (max-width:991px){
    .wrapper-6pp-success .ab-clientwords-section .logo-wrap:before{
        background-size: 35%;
        background-position: right top;
        right: -5px;
    }
}

@media only screen and (max-width:767px){
    .wrapper-6pp-success .ab-clientwords-section .logo-wrap:before{
        display: none;
    }
}
@media only screen and (max-width: 767px){
    .wrapper-6pp-success .ab-clientwords-section .logo-wrap .logo{
        text-align: center  ;
    }
}
@media only screen and (max-width: 767px){
    .wrapper-6pp-success .ab-clientwords-section .logo-wrap .logo img{
        max-width: 80%;
        margin: 0 auto;
    }
}

.wrapper-6pp-success .ab-clientwords-section .abrightside{
    gap: 15px;
}
@media only screen and (max-width:991px){
    .wrapper-6pp-success .ab-clientwords-section .abrightside{
        gap: 10px;
    }
}

.wrapper-6pp-success .ab-clientwords-section .abrightside p{
    font-size: 30px;
    line-height: 55px;
}

@media only screen and (max-width:1499px){
    .wrapper-6pp-success .ab-clientwords-section .abrightside p{
        font-size: 26px;
        line-height: 48px;
    }
}

@media only screen and (max-width:1199px){
    .wrapper-6pp-success .ab-clientwords-section .abrightside p{
        font-size: 22px;
        line-height: 38px;
    }
}

@media only screen and (max-width:991px){
    .wrapper-6pp-success .ab-clientwords-section .abrightside p{
        font-size: 18px;
        line-height: 28px;
    }
}

/*6pp ab-result-section css starts here*/
@media only screen and (max-width:991px){
    .wrapper-6pp-success .ab-result-section p{
        text-align: center;
    }
}

.wrapper-6pp-success .ab-result-section p .color-text{
    color: #FF5500;
}
.wrapper-6pp-success .ab-result-section p .color-text sup{
    color: #ffffff;
}
/*6pp ab-result-section css ends here*/

/*6pp ab-imgs-section css starts here*/

@media only screen and (max-width: 767px){
    .wrapper-6pp-success .ab-imgs-section{
        margin-top: 50px;
    }
}

@media only screen and (max-width: 575px){
    .wrapper-6pp-success .ab-imgs-section{
        margin-top: 35px;
    }
}

.wrapper-6pp-success .ab-imgs-section .img-wrapper{
    display: flex;
    flex-direction: column;
    gap: 50px;
}

@media only screen and (max-width: 1199px){
    .wrapper-6pp-success .ab-imgs-section .img-wrapper{
        gap: 30px;
    }
}

@media only screen and (max-width: 767px){
    .wrapper-6pp-success .ab-imgs-section .img-wrapper{
        gap: 15px;
    }
}

/*6pp ab-imgs-section css ends here*/

/*6pp ab-techstack-section css starts here*/
.wrapper-6pp-success .ab-techstack-section .techstack-main ul{
    justify-content: space-between;
}
@media only screen and (max-width: 480px){
    .wrapper-6pp-success .ab-techstack-section .techstack-main ul{
        gap: 15px;
        flex-wrap: nowrap !important;
        white-space: nowrap;
        overflow: hidden;
        overflow-x: scroll;
    }
}
@media only screen and (max-width: 767px){
    .wrapper-6pp-success .ab-techstack-section .techstack-main ul::-webkit-scrollbar{
        height: 8px;
    }
}

@media only screen and (max-width: 767px){
    .wrapper-6pp-success .ab-techstack-section .techstack-main ul::-webkit-scrollbar-thumb{
        background-color: #ccc; /* Customize scrollbar color */
        border-radius: 4px;
    }
}
@media only screen and (max-width: 767px){
    .wrapper-6pp-success .ab-techstack-section .techstack-main ul::-webkit-scrollbar-track{
        background-color: #202020; /* Customize scrollbar track color */
    }
}

.wrapper-6pp-success .ab-techstack-section .techstack-main ul li{
    width: calc(33.33% - 30px);
}
@media only screen and (max-width: 1199px){
    .wrapper-6pp-success .ab-techstack-section .techstack-main ul li{
        width: calc(33.33% - 15px);
    }
}

@media only screen and (max-width: 480px){
    .wrapper-6pp-success .ab-techstack-section .techstack-main ul li{
        width: 100%;
        min-width: 45%;
        margin: 0 0 10px;
    }
}

.wrapper-6pp-success .ab-techstack-section .techstack-main ul li .tech-box{
    background-color: #242424;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 27px 18px;
}
@media only screen and (max-width: 767px){
    .wrapper-6pp-success .ab-techstack-section .techstack-main ul li .tech-box{
        padding: 15px;
        gap: 15px;
    }
}

@media only screen and (max-width: 575px){
    .wrapper-6pp-success .ab-techstack-section .techstack-main ul li .tech-box{
        gap: 10px;
    }
}

.wrapper-6pp-success .ab-techstack-section .techstack-main ul li .tech-box .img-box{
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media only screen and (max-width: 767px){
    .wrapper-6pp-success .ab-techstack-section .techstack-main ul li .tech-box .img-box{
        height: 80px;
    }
}

@media only screen and (max-width: 575px){
    .wrapper-6pp-success .ab-techstack-section .techstack-main ul li .tech-box .img-box img{
        max-width: 80%;
    }
}
.wrapper-6pp-success .ab-techstack-section .techstack-main ul li .tech-name{
    opacity: 0.70;
}
/*6pp ab-techstack-section css ends here*/

/*6pp app css ends here*/


/*school management system css starts here*/

@font-face {
    font-family: "Satoshi-Light";
    src: url("../portfolio-fonts/school-management-system/Satoshi-Light.woff2") format("woff2"),
    url("../portfolio-fonts/school-management-system/Satoshi-Light.woff") format("woff");
    font-weight: 300;
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: "Satoshi-Regular";
    src: url("../portfolio-fonts/school-management-system/Satoshi-Regular.woff2") format("woff2"),
    url("../portfolio-fonts/school-management-system/Satoshi-Regular.woff") format("woff");
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: "Satoshi-Medium";
    src: url("../portfolio-fonts/school-management-system/Satoshi-Medium.woff2") format("woff2"),
    url("../portfolio-fonts/school-management-system/Satoshi-Medium.woff") format("woff");
    font-weight: 500;
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: "Satoshi-Bold";
    src: url("../portfolio-fonts/school-management-system/Satoshi-Bold.woff2") format("woff2"),
    url("../portfolio-fonts/school-management-system/Satoshi-Bold.woff") format("woff");
    font-weight: 700;
    font-display: swap;
    font-style: normal;
}
@font-face {
    font-family: "Satoshi-Black";
    src: url("../portfolio-fonts/school-management-system/Satoshi-Black.woff2") format("woff2"),
    url("../portfolio-fonts/school-management-system/Satoshi-Black.woff") format("woff");
    font-weight: 900;
    font-display: swap;
    font-style: normal;
}


.schoolportfolio-outer {
    background: #f2f2f2;
    overflow: hidden;
    font-family: "Satoshi";
}
.schoolportfolio-outer .slick-prev,
.schoolportfolio-outer .slick-next {
    font-size: 0;
    display: none;
    height: 0;
    width: 0;
}
@media only screen and (min-width: 1600px) {
    .schoolportfolio-outer .school-custom-container {
        max-width: 1440px;
        margin: 0 auto;
        padding: 0;
    }
}
.schoolportfolio-outer .smfont-300 {
    font-weight: 300;
    font-family: "Satoshi-Light";
}
.schoolportfolio-outer .smfont-400 {
    font-weight: 400;
    font-family: "Satoshi-Regular";
}
.schoolportfolio-outer .smfont-500 {
    font-weight: 500;
    font-family: "Satoshi-Medium";
}
.schoolportfolio-outer .smfont-700 {
    font-weight: 700;
    font-family: "Satoshi-Bold";
}
.schoolportfolio-outer .smfont-900 {
    font-weight: 900;
    font-family: "Satoshi-Black";
}
.schoolportfolio-outer .smfont-lightorange {
    color: #f7b696;
}
.schoolportfolio-outer .smfont-black {
    color: #111;
}
.schoolportfolio-outer .smfont-30 {
    font-size: 30px;
    line-height: 41px;
}
@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .smfont-30 {
        font-size: 25px;
        line-height: 35px;
    }
}
@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .smfont-30 {
        font-size: 20px;
        line-height: 30px;
    }
}
.schoolportfolio-outer .smfont-6045 {
    font-size: 60px;
    line-height: 45px;
}
@media only screen and (max-width: 1799px) {
    .schoolportfolio-outer .smfont-6045 {
        font-size: 55px;
        line-height: 70px;
    }
}
@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .smfont-6045 {
        font-size: 50px;
        line-height: 60px;
    }
}
@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .smfont-6045 {
        font-size: 40px;
        line-height: 50px;
    }
}
.schoolportfolio-outer .smfont-60 {
    font-size: 60px;
    line-height: 90px;
}
@media only screen and (max-width: 1799px) {
    .schoolportfolio-outer .smfont-60 {
        font-size: 55px;
        line-height: 70px;
    }
}
@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .smfont-60 {
        font-size: 50px;
        line-height: 60px;
    }
}
@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .smfont-60 {
        font-size: 40px;
        line-height: 50px;
    }
}
.schoolportfolio-outer .smfont-90 {
    font-size: 90px;
    line-height: 120px;
}
@media only screen and (max-width: 1799px) {
    .schoolportfolio-outer .smfont-90 {
        font-size: 60px;
        line-height: 80px;
    }
}
@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .smfont-90 {
        font-size: 50px;
        line-height: 60px;
    }
}
@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .smfont-90 {
        font-size: 44px;
        line-height: 54px;
    }
}
@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .smfont-90 {
        font-size: 38px;
        line-height: 48px;
    }
}
@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .smfont-90 {
        font-size: 32px;
        line-height: 42px;
    }
}
@media only screen and (max-width: 575px) {
    .schoolportfolio-outer .smfont-90 {
        font-size: 27px;
        line-height: 37px;
    }
}
.schoolportfolio-outer .smfont-24 {
    font-size: 24px;
    line-height: 38px;
}
@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .smfont-24 {
        font-size: 20px;
        line-height: 30px;
    }
}
@media only screen and (max-width: 575px) {
    .schoolportfolio-outer .smfont-24 {
        font-size: 16px;
        line-height: 26px;
    }
}
.schoolportfolio-outer .smfont-2444 {
    font-size: 24px;
    line-height: 44px;
}
@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .smfont-2444 {
        font-size: 20px;
        line-height: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .smfont-2444 {
        font-size: 18px;
        line-height: 28px;
    }
}
@media only screen and (max-width: 575px) {
    .schoolportfolio-outer .smfont-2444 {
        font-size: 16px;
        line-height: 26px;
    }
}
.schoolportfolio-outer .smfont-2450 {
    font-size: 24px;
    line-height: 50px;
}
@media only screen and (max-width: 1799px) {
    .schoolportfolio-outer .smfont-2450 {
        font-size: 22px;
        line-height: 42px;
    }
}
@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .smfont-2450 {
        font-size: 20px;
        line-height: 40px;
    }
}
@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .smfont-2450 {
        font-size: 18px;
        line-height: 30px;
    }
}
@media only screen and (max-width: 575px) {
    .schoolportfolio-outer .smfont-2450 {
        font-size: 16px;
        line-height: 26px;
    }
}
.schoolportfolio-outer .smfont-50 {
    font-size: 50px;
    line-height: 97px;
}
@media only screen and (max-width: 1599px) {
    .schoolportfolio-outer .smfont-50 {
        font-size: 50px;
        line-height: 60px;
    }
}
@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .smfont-50 {
        font-size: 44px;
        line-height: 54px;
    }
}
@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .smfont-50 {
        font-size: 38px;
        line-height: 48px;
    }
}
@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .smfont-50 {
        font-size: 32px;
        line-height: 42px;
    }
}
@media only screen and (max-width: 575px) {
    .schoolportfolio-outer .smfont-50 {
        font-size: 27px;
        line-height: 37px;
    }
}
.schoolportfolio-outer .smfont-28 {
    font-size: 28px;
    line-height: 44px;
}
@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .smfont-28 {
        font-size: 24px;
        line-height: 34px;
    }
}
@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .smfont-28 {
        font-size: 22px;
        line-height: 32px;
    }
}
@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .smfont-28 {
        font-size: 20px;
        line-height: 30px;
    }
}
@media only screen and (max-width: 575px) {
    .schoolportfolio-outer .smfont-28 {
        font-size: 16px;
        line-height: 26px;
    }
}
.schoolportfolio-outer .smfont-5068 {
    font-size: 50px;
    line-height: 68px;
}
@media only screen and (max-width: 1799px) {
    .schoolportfolio-outer .smfont-5068 {
        font-size: 40px;
        line-height: 60px;
    }
}
@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .smfont-5068 {
        font-size: 40px;
        line-height: 50px;
    }
}
@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .smfont-5068 {
        font-size: 32px;
        line-height: 42px;
    }
}
.schoolportfolio-outer .smfont-121 {
    font-size: 115px;
    line-height: 164px;
}
@media only screen and (max-width: 1599px) {
    .schoolportfolio-outer .smfont-121 {
        font-size: 85px;
        line-height: 95px;
    }
}
@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .smfont-121 {
        font-size: 60px;
        line-height: 70px;
    }
}
@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .smfont-121 {
        font-size: 50px;
        line-height: 60px;
    }
}
@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .smfont-121 {
        font-size: 40px;
        line-height: 50px;
    }
}
.schoolportfolio-outer .smfont-145 {
    font-size: 139.79px;
    line-height: 197px;
}
@media only screen and (max-width: 1599px) {
    .schoolportfolio-outer .smfont-145 {
        font-size: 85px;
        line-height: 95px;
    }
}
@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .smfont-145 {
        font-size: 72px;
        line-height: 82px;
    }
}
@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .smfont-145 {
        font-size: 50px;
        line-height: 60px;
    }
}
@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .smfont-145 {
        font-size: 40px;
        line-height: 50px;
    }
}
.schoolportfolio-outer .smfont-15 {
    font-size: 15.1366px;
    line-height: 20px;
}
@media only screen and (max-width: 370px) {
    .schoolportfolio-outer .smfont-15 {
        font-size: 12.1366px;
        line-height: 20px;
    }
}
.schoolportfolio-outer .smfont-28dec {
    font-size: 28.1108px;
    line-height: 38px;
}
@media only screen and (max-width: 370px) {
    .schoolportfolio-outer .smfont-28dec {
        font-size: 14.1108px;
        line-height: 20px;
    }
}
.schoolportfolio-outer .smfont-42 {
    font-size: 42.8014px;
    line-height: 58px;
}
@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .smfont-42 {
        font-size: 35px;
        line-height: 50px;
    }
}
@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .smfont-42 {
        font-size: 32px;
        line-height: 45px;
    }
}
@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .smfont-42 {
        font-size: 27px;
        line-height: 37px;
    }
}
@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .smfont-42 {
        font-size: 24px;
        line-height: 34px;
    }
}
@media only screen and (max-width: 575px) {
    .schoolportfolio-outer .smfont-42 {
        font-size: 19px;
        line-height: 29px;
    }
}
.schoolportfolio-outer .smfont-17 {
    font-size: 17.5097px;
    line-height: 31px;
}
@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .smfont-17 {
        font-size: 17px;
        line-height: 27px;
    }
}
.schoolportfolio-outer .smfont-1714 {
    font-size: 17.5097px;
    line-height: 14px;
}
.schoolportfolio-outer .smfont-54 {
    font-size: 54px;
    line-height: 73px;
}
@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .smfont-54 {
        font-size: 38px;
        line-height: 50px;
    }
}
@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .smfont-54 {
        font-size: 30px;
        line-height: 40px;
    }
}
@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .smfont-54 {
        font-size: 28px;
        line-height: 38px;
    }
}
@media only screen and (max-width: 575px) {
    .schoolportfolio-outer .smfont-54 {
        font-size: 22px;
        line-height: 32px;
    }
}

/*school management system school-hero-section css starts here*/
.schoolportfolio-outer .school-hero-section {
    background: #efede9 url("../img/case-study-details/school-management-system/school-bannerbg.svg") no-repeat;
    background-size: cover;
    padding-bottom: 445px;
    overflow: hidden;
}
@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-hero-section {
        padding-bottom: 0;
    }
}
@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-hero-section {
        padding-bottom: 525px;
    }
}
@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-hero-section {
        padding-bottom: 0px;
    }
}
.schoolportfolio-outer .school-hero-section .school-title {
    padding-top: 90px;
    max-width: 1130px;
}
@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-hero-section .school-title {
        padding-top: 80px;
    }
}
@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-hero-section .school-title {
        padding-top: 70px;
    }
}
@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-hero-section .school-title {
        padding-top: 60px;
    }
}
.schoolportfolio-outer .school-hero-section .school-title h1 {
    max-width: 1000px;
    margin: 0 auto;
}
@media only screen and (max-width: 1799px) {
    .schoolportfolio-outer .school-hero-section .school-title h1 {
        max-width: 600px;
    }
}
@media only screen and (max-width: 1599px) {
    .schoolportfolio-outer .school-hero-section .school-title h1 {
        max-width: 560px;
    }
}
@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .school-hero-section .school-title h1 {
        max-width: 490px;
    }
}
@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-hero-section .school-title h1 {
        max-width: 400px;
    }
}
@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-hero-section .school-title h1 {
        max-width: 300px;
    }
}
@media only screen and (max-width: 575px) {
    .schoolportfolio-outer .school-hero-section .school-title h1 {
        max-width: 280px;
    }
}
.schoolportfolio-outer .school-hero-section .school-title p {
    max-width: 891px;
    padding-top: 30px;
}
@media only screen and (max-width: 1799px) {
    .schoolportfolio-outer .school-hero-section .school-title p {
        max-width: 845px;
        margin: 0 auto;
    }
}
@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .school-hero-section .school-title p {
        max-width: 840px;
    }
}
@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-hero-section .school-title p {
        padding-top: 20px;
        max-width: 735px;
    }
}
@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-hero-section .school-title p {
        padding-top: 15px;
        max-width: 630px;
    }
}
@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-hero-section .school-title p {
        padding-top: 10px;
        max-width: 465px;
    }
}
.schoolportfolio-outer .school-hero-section .school-title .hero-dash-img {
    padding-top: 94px;
}
@media only screen and (max-width: 1799px) {
    .schoolportfolio-outer .school-hero-section .school-title .hero-dash-img {
        padding-top: 70px;
    }
}
@media only screen and (max-width: 1499px) {
    .schoolportfolio-outer .school-hero-section .school-title .hero-dash-img {
        padding-top: 60px;
    }
}
@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .school-hero-section .school-title .hero-dash-img {
        padding-top: 50px;
    }
}
@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-hero-section .school-title .hero-dash-img {
        padding-top: 40px;
    }
}
@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-hero-section .school-title .hero-dash-img {
        padding-top: 30px;
    }
}
.schoolportfolio-outer .school-hero-section .school-title .hero-dash-img img {
    width: 1200px;
    aspect-ratio: auto 1.4527845036;
    max-width: 100%;
    height: auto;
    min-height: 100%;
}

/*school management system school-hero-section css ends here*/

/*school management system school about section css starts here*/

.schoolportfolio-outer .school-about-section {
    background: #111 url("../img/case-study-details/school-management-system/school-bannerbg.svg") no-repeat;
    background-size: cover;
    margin-top: -925px;
    border-top-right-radius: 800px;
    border-top-left-radius: 800px;
    padding-bottom: 450px;
    overflow: hidden;
}
@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-about-section {
        padding-bottom: 280px;
        margin-top: -530px;
    }
}
@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-about-section {
        padding-bottom: 200px;
        margin-top: -925px;
    }
}
@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-about-section {
        margin-top: -230px;
        border-top-right-radius: 315px;
        border-top-left-radius: 315px;
    }
}
@media only screen and (max-width: 575px) {
    .schoolportfolio-outer .school-about-section {
        margin-top: -170px;
        border-top-right-radius: 200px;
        border-top-left-radius: 200px;
    }
}
@media only screen and (max-width: 480px) {
    .schoolportfolio-outer .school-about-section {
        border-top-right-radius: 700px;
        border-top-left-radius: 700px;
    }
}
@media only screen and (max-width: 380px) {
    .schoolportfolio-outer .school-about-section {
        margin-top: -175px;
    }
}
.schoolportfolio-outer .school-about-section .schoolabout-title {
    padding-top: 610px;
}
@media only screen and (max-width: 1599px) {
    .schoolportfolio-outer .school-about-section .schoolabout-title {
        padding-top: 545px;
    }
}
@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-about-section .schoolabout-title {
        padding-top: 575px;
    }
}
@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-about-section .schoolabout-title {
        padding-top: 430px;
    }
}
@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-about-section .schoolabout-title {
        padding-top: 250px;
    }
}
@media only screen and (max-width: 575px) {
    .schoolportfolio-outer .school-about-section .schoolabout-title {
        padding-top: 200px;
    }
}
.schoolportfolio-outer .school-about-section .schoolabout-title p {
    max-width: 846px;
    padding-top: 30px;
}
@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-about-section .schoolabout-title p {
        padding-top: 15px;
    }
}
@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-about-section .schoolabout-title p {
        padding-top: 10px;
    }
}
.schoolportfolio-outer .school-about-section .aboutpro-details {
    padding: 120px 0;
}
@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details {
        padding: 60px 0 80px 0;
    }
}
@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details {
        padding: 40px 0 0 0;
    }
}
@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details {
        padding: 20px 0 40px 0;
    }
}
@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details {
        padding: 0;
    }
}
.schoolportfolio-outer .school-about-section .aboutpro-details .admin-title {
    float: right;
    margin-top: 6.5vw;
}
@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details .admin-title {
        margin-top: 5.5vw;
    }
}
@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details .admin-title {
        float: none;
        text-align: left;
        margin-top: 0;
    }
}
@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details .admin-title {
        text-align: center;
    }
}
.schoolportfolio-outer .school-about-section .aboutpro-details .admin-title span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgba(255, 255, 255, 1);
    opacity: 0.2;
}
@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details .admin-title span {
        writing-mode: initial;
        transform: rotate(0deg);
        opacity: 0.4;
    }
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details .admin-title span {
        display: block;
        margin: 0 0 15px;
    }
}
.schoolportfolio-outer .school-about-section .aboutpro-details .about-details {
    display: flex;
}
@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details .about-details {
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow: hidden;
        overflow-x: scroll;
        gap: 15px;
        margin-top: 30px;
    }
}

@media only screen and (max-width: 767px){
    .schoolportfolio-outer .school-about-section .aboutpro-details .about-details::-webkit-scrollbar{
        height: 8px;
    }
}

@media only screen and (max-width: 767px){
    .schoolportfolio-outer .school-about-section .aboutpro-details .about-details::-webkit-scrollbar-thumb{
        background-color: #ccc; /* Customize scrollbar color */
        border-radius: 4px;
    }
}
@media only screen and (max-width: 767px){
    .schoolportfolio-outer .school-about-section .aboutpro-details .about-details::-webkit-scrollbar-track{
        background-color: #202020; /* Customize scrollbar track color */
    }
}

.schoolportfolio-outer .school-about-section .aboutpro-details .about-details .about-item:nth-child(2) {
    margin: 15px 10px 0 0;
}
@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details .about-details .about-item:nth-child(2) {
        margin-top: 0;
        margin-right: 0;
    }
}
.schoolportfolio-outer .school-about-section .aboutpro-details .about-details .about-item:nth-child(3) {
    margin: 105px 0 0 10px;
}
@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details .about-details .about-item:nth-child(3) {
        margin: 75px 0 0 0;
    }
}
@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details .about-details .about-item:nth-child(3) {
        margin: 65px 0 0 0;
    }
}
@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details .about-details .about-item:nth-child(3) {
        margin: 0;
    }
}
@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details .about-details .about-item:nth-child(4) {
        margin-top: -75px;
    }
}
@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details .about-details .about-item:nth-child(4) {
        margin-top: -60px;
    }
}
@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details .about-details .about-item:nth-child(4) {
        margin-top: 0;
        margin-right: 0;
    }
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details .about-details .about-item{
        width: 100%;
        min-width: 45%;
        margin-bottom: 10px;
        height: 100%;
    }
}

@media only screen and (max-width: 480px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details .about-details .about-item{
        min-width: 55%;
    }
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details .about-details .about-item span{
        font-size: 28px;
        line-height: 36px;
    }
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details .about-details .about-item .about-img {
        text-align: center;
    }
}
.schoolportfolio-outer .school-about-section .aboutpro-details .about-details .about-item .about-img img {
    width: 292px;
    aspect-ratio: auto 0.9931972789;
    max-width: 100%;
    height: auto;
    min-height: 100%;
}
.schoolportfolio-outer .school-about-section .aboutpro-details .about-details .about-item .teacher-title {
    text-align: right;
}
@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details .about-details .about-item .teacher-title {
        text-align: center;
    }
}
.schoolportfolio-outer .school-about-section .aboutpro-details .about-details .about-item .teacher-title span {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgba(255, 255, 255, 1);
    opacity: 0.2;
}
@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details .about-details .about-item .teacher-title span {
        opacity: 0.4;
    }
}
@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details .about-details .about-item .teacher-title span {
        display: block;
        margin: 0 0 15px;
    }
}
@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details .about-details .about-item .parent-title {
        display: none;
    }
}
.schoolportfolio-outer .school-about-section .aboutpro-details .about-details .about-item .parent-title span {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgba(255, 255, 255, 1);
    opacity: 0.2;
}
@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details .about-details .about-item .parent-title span {
        opacity: 0.4;
    }
}
@media only screen and (min-width: 768px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details .about-details .about-item .parent-title-mob {
        display: none;
    }
}
@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details .about-details .about-item .parent-title-mob {
        text-align: center;
    }
}
.schoolportfolio-outer .school-about-section .aboutpro-details .about-details .about-item .parent-title-mob span {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgba(255, 255, 255, 1);
    opacity: 0.2;
}
@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details .about-details .about-item .parent-title-mob span {
        opacity: 0.4;
    }
}
@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details .about-details .about-item .parent-title-mob span {
        display: block;
        margin: 0 0 15px;
    }
}
@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details .student-title {
        display: none;
    }
}
.schoolportfolio-outer .school-about-section .aboutpro-details .student-title span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgba(255, 255, 255, 1);
    opacity: 0.2;
}
@media only screen and (min-width: 1200px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details .student-title-mob {
        display: none;
    }
}
@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details .student-title-mob {
        text-align: center;
        padding-top: 15px;
    }
}
@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details .student-title-mob {
        padding-top: 0;
    }
}
.schoolportfolio-outer .school-about-section .aboutpro-details .student-title-mob span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgba(255, 255, 255, 1);
    opacity: 0.2;
}
@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details .student-title-mob span {
        writing-mode: initial;
        transform: rotate(0deg);
    }
}
@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details .student-title-mob span {
        display: block;
        margin: 0 0 15px;
    }
}
@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-about-section .aboutpro-details .student-title-mob span {
        opacity: 0.4;
    }
}

/*school management system school about section css ends here*/

/*school management system prob sol section section css starts here*/

.schoolportfolio-outer .school-prob-sol-section {
    margin-top: -450px;
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-prob-sol-section {
        margin-top: -200px;
    }
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-prob-sol-section {
        margin-top: -300px;
    }
}

.schoolportfolio-outer .school-prob-sol-section .prob-sol-main {
    display: flex;
    justify-content: center;
}

@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-prob-sol-section .prob-sol-main {
        display: block;
    }
}

.schoolportfolio-outer .school-prob-sol-section .prob-sol-main .problem {
    max-width: 50%;
    position: relative;
    transform: rotate(-4deg);
    margin-top: 190px;
}

@media only screen and (max-width: 1599px) {
    .schoolportfolio-outer .school-prob-sol-section .prob-sol-main .problem {
        margin-top: 140px;
    }
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-prob-sol-section .prob-sol-main .problem {
        margin-top: 115px;
    }
}

@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-prob-sol-section .prob-sol-main .problem {
        max-width: 100%;
        transform: rotate(0deg);
        margin-top: 0px;
        text-align: center;
    }
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-prob-sol-section .prob-sol-main .problem {
        margin-top: 150px;
    }
}

.schoolportfolio-outer .school-prob-sol-section .prob-sol-main .problem .problem-details {
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0px 14px 34px rgba(0, 0, 0, 0.08);
}

.schoolportfolio-outer .school-prob-sol-section .prob-sol-main .problem .problem-details h3 {
    padding: 50px 0 40px 50px;
}

@media only screen and (max-width: 1499px) {
    .schoolportfolio-outer .school-prob-sol-section .prob-sol-main .problem .problem-details h3 {
        padding: 40px 0 10px 20px;
    }
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-prob-sol-section .prob-sol-main .problem .problem-details h3 {
        padding: 30px 0 10px 20px;
        margin: 0;
    }
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-prob-sol-section .prob-sol-main .problem .problem-details h3 {
        padding: 30px 0 10px 15px;
        margin: 0;
    }
}

.schoolportfolio-outer .school-prob-sol-section .prob-sol-main .problem .problem-details p {
    padding: 0 70px 50px 50px;
}

@media only screen and (max-width: 1499px) {
    .schoolportfolio-outer .school-prob-sol-section .prob-sol-main .problem .problem-details p {
        padding: 0 30px 40px 30px;
    }
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-prob-sol-section .prob-sol-main .problem .problem-details p {
        padding: 0 30px 40px 20px;
    }
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-prob-sol-section .prob-sol-main .problem .problem-details p {
        padding: 0 15px 40px 15px;
    }
}

.schoolportfolio-outer .school-prob-sol-section .prob-sol-main .problem .problem-details .l-orangeimg {
    position: absolute;
    top: -30px;
    left: -44px;
}

@media only screen and (max-width: 1499px) {
    .schoolportfolio-outer .school-prob-sol-section .prob-sol-main .problem .problem-details .l-orangeimg {
        top: -30px;
        left: -75px;
    }
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-prob-sol-section .prob-sol-main .problem .problem-details .l-orangeimg {
        display: none;
    }
}

.schoolportfolio-outer .school-prob-sol-section .prob-sol-main .solution {
    max-width: 50%;
    position: relative;
    transform: rotate(6deg);
}

@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-prob-sol-section .prob-sol-main .solution {
        max-width: 100%;
        transform: rotate(0deg);
        margin-top: 30px;
        text-align: center;
    }
}

.schoolportfolio-outer .school-prob-sol-section .prob-sol-main .solution .solution-details {
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0px 14px 34px rgba(0, 0, 0, 0.08);
}

.schoolportfolio-outer .school-prob-sol-section .prob-sol-main .solution .solution-details h3 {
    padding: 50px 0 40px 50px;
}

@media only screen and (max-width: 1499px) {
    .schoolportfolio-outer .school-prob-sol-section .prob-sol-main .solution .solution-details h3 {
        padding: 40px 0 10px 20px;
    }
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-prob-sol-section .prob-sol-main .solution .solution-details h3 {
        padding: 30px 0 10px 20px;
        margin: 0;
    }
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-prob-sol-section .prob-sol-main .solution .solution-details h3 {
        padding: 30px 0 10px 15px;
        margin: 0;
    }
}

.schoolportfolio-outer .school-prob-sol-section .prob-sol-main .solution .solution-details p {
    padding: 0 50px 50px 50px;
}

@media only screen and (max-width: 1499px) {
    .schoolportfolio-outer .school-prob-sol-section .prob-sol-main .solution .solution-details p {
        padding: 0 30px 40px 30px;
    }
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-prob-sol-section .prob-sol-main .solution .solution-details p {
        padding: 0 30px 40px 20px;
    }
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-prob-sol-section .prob-sol-main .solution .solution-details p {
        padding: 0 15px 40px 15px;
    }
}

.schoolportfolio-outer .school-prob-sol-section .prob-sol-main .solution .solution-details .violet-img {
    position: absolute;
    top: -30px;
    right: -40px;
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-prob-sol-section .prob-sol-main .solution .solution-details .violet-img {
        display: none;
    }
}

.schoolportfolio-outer .school-prob-sol-section .admin-portal {
    background: #f7b696;
    margin: 120px 0 314px 0;
    height: 1157px;
}

@media only screen and (max-width: 1799px) {
    .schoolportfolio-outer .school-prob-sol-section .admin-portal {
        margin: 90px 0 225px 0;
        height: 1150px;
    }
}

@media only screen and (max-width: 1599px) {
    .schoolportfolio-outer .school-prob-sol-section .admin-portal {
        margin: 90px 0 225px 0;
        height: 1030px;
    }
}

@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .school-prob-sol-section .admin-portal {
        margin: 80px 0 200px 0;
        height: 960px;
    }
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-prob-sol-section .admin-portal {
        margin: 60px 0 170px 0;
        height: 790px;
    }
}

@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-prob-sol-section .admin-portal {
        margin: 40px 0 125px 0;
        height: 650px;
    }
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-prob-sol-section .admin-portal {
        margin: 30px -15px 145px -15px;
        height: 1365px;
    }
}

@media only screen and (max-width: 575px) {
    .schoolportfolio-outer .school-prob-sol-section .admin-portal {
        margin: 30px -15px 0px -15px;
        height: auto;
    }
}


@media only screen and (max-width: 340px) {
    .schoolportfolio-outer .school-prob-sol-section .admin-portal {
        margin: 30px -15px 110px -15px;
    }
}

.schoolportfolio-outer .school-prob-sol-section .admin-portal .admin-port-partone {
    background: #576086;
    height: 10px;
}

.schoolportfolio-outer .school-prob-sol-section .admin-portal .admin-portal-title {
    padding-top: 70px;
}

@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .school-prob-sol-section .admin-portal .admin-portal-title {
        padding-top: 40px;
    }
}

@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-prob-sol-section .admin-portal .admin-portal-title {
        padding-top: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-prob-sol-section .admin-portal .admin-portal-title {
        padding: 30px 15px 0 15px;
    }
}

@media only screen and (max-width: 575px) {
    .schoolportfolio-outer .school-prob-sol-section .admin-portal .admin-portal-title {
        padding: 30px 15px 30px 15px;
    }
}

.schoolportfolio-outer .school-prob-sol-section .admin-portal .admin-portal-title p {
    max-width: 1009px;
    padding-top: 30px;
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-prob-sol-section .admin-portal .admin-portal-title p {
        padding: 0px 15px;
    }
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-prob-sol-section .admin-portal .admin-portal-title p {
        padding-top: 10px;
    }
}

.schoolportfolio-outer .school-prob-sol-section .admin-portal .admin-portal-title .admin-port-img {
    display: flex;
    max-width: 1338px;
    gap: 50px;
    padding-top: 80px;
}

@media only screen and (max-width: 1799px) {
    .schoolportfolio-outer .school-prob-sol-section .admin-portal .admin-portal-title .admin-port-img {
        gap: 20px;
        padding: 50px 20px 0 20px;
    }
}

@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .school-prob-sol-section .admin-portal .admin-portal-title .admin-port-img {
        gap: 20px;
        padding: 40px 30px 0 30px;
    }
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-prob-sol-section .admin-portal .admin-portal-title .admin-port-img {
        gap: 15px;
        padding: 30px 25px 0 25px;
    }
}

@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-prob-sol-section .admin-portal .admin-portal-title .admin-port-img {
        padding: 20px 15px 0 15px;
        gap: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-prob-sol-section .admin-portal .admin-portal-title .admin-port-img {
        display: block;
        max-width: 100%;
        padding: 20px 0 0 0;
    }
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-prob-sol-section .admin-portal .admin-portal-title .admin-port-img .admin-port-item:nth-child(2) {
        padding-top: 20px;
    }
}

.schoolportfolio-outer .school-prob-sol-section .admin-portal .admin-portal-title .admin-port-img .admin-port-item img {
    width: 656px;
    aspect-ratio: auto 1.4774774775;
    max-width: 100%;
    height: auto;
    min-height: 100%;
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-prob-sol-section .admin-portal .admin-portal-title .admin-port-img .admin-port-item img {
        max-width: 80%;
    }
}

@media only screen and (max-width: 380px) {
    .schoolportfolio-outer .school-prob-sol-section .admin-portal .admin-portal-title .admin-port-img .admin-port-item img {
        max-width: 100%;
    }
}

.schoolportfolio-outer .school-prob-sol-section .admin-portal .admin-portal-title .admin-port-img-two {
    display: flex;
    max-width: 1338px;
    gap: 50px;
    padding-top: 35px;
}

@media only screen and (max-width: 1799px) {
    .schoolportfolio-outer .school-prob-sol-section .admin-portal .admin-portal-title .admin-port-img-two {
        gap: 20px;
        padding: 50px 20px 0 20px;
    }
}

@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .school-prob-sol-section .admin-portal .admin-portal-title .admin-port-img-two {
        gap: 20px;
        padding: 40px 30px 0 30px;
    }
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-prob-sol-section .admin-portal .admin-portal-title .admin-port-img-two {
        gap: 15px;
        padding: 30px 25px 0 25px;
    }
}

@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-prob-sol-section .admin-portal .admin-portal-title .admin-port-img-two {
        gap: 10px;
        padding: 20px 15px 0 15px;
    }
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-prob-sol-section .admin-portal .admin-portal-title .admin-port-img-two {
        display: block;
        max-width: 100%;
        padding: 20px 0 0 0;
    }
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-prob-sol-section .admin-portal .admin-portal-title .admin-port-img-two .admin-port-item:nth-child(2) {
        padding-top: 20px;
    }
}

.schoolportfolio-outer .school-prob-sol-section .admin-portal .admin-portal-title .admin-port-img-two .admin-port-item img {
    width: 656px;
    aspect-ratio: auto 1.4774774775;
    max-width: 100%;
    height: auto;
    min-height: 100%;
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-prob-sol-section .admin-portal .admin-portal-title .admin-port-img-two .admin-port-item img {
        max-width: 80%;
    }
}

@media only screen and (max-width: 380px) {
    .schoolportfolio-outer .school-prob-sol-section .admin-portal .admin-portal-title .admin-port-img-two .admin-port-item img {
        max-width: 100%;
    }
}

/*school management system prob sol section section css ends here*/

/*school management system stu-parent-sections section css starts here*/

.schoolportfolio-outer .school-stu-parent-sections {
    background: #111 url("../img/case-study-details/school-management-system/stu-parbg.svg") no-repeat;
    background-size: cover;
    overflow: hidden;
}

@media only screen and (max-width: 575px) {
    .schoolportfolio-outer .school-stu-parent-sections {
        margin-top: 0;
    }
}


.schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper {
    margin: 120px 0;
    overflow: hidden;
}

@media only screen and (max-width: 1799px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper {
        margin: 90px 0;
    }
}

@media only screen and (max-width: 1599px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper {
        margin: 80px 0;
    }
}

@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper {
        margin: 70px 0;
    }
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper {
        margin: 60px 0;
    }
}

@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper {
        margin: 50px 0;
    }
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper {
        margin: 40px 0 70px 0;
    }
}

@media only screen and (max-width: 575px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper {
        margin: 40px 0 50px 0;
    }
}

@media only screen and (max-width: 480px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper {
        margin: 30px 0 50px 0;
    }
}

@media only screen and (max-width: 380px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper {
        margin: 30px 0 40px 0;
    }
}

.schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    position: relative;
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer {
        display: block;
        height: auto;
    }
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer {
        margin-top: 0;
    }
}

@media only screen and (max-width: 575px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer {
        margin-top: 0;
    }
}

.schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer .image.multiple {
    height: 688px;
    width: 1000px;
    z-index: 1;
    position: relative;
    overflow: hidden;
}

@media only screen and (max-width: 1599px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer .image.multiple {
        width: 780px;
        height: auto;
    }
}

@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer .image.multiple {
        width: 885px;
        height: auto;
    }
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer .image.multiple {
        width: 100%;
        height: auto;
    }
}

@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer .image.multiple {
        margin-top: 20px;
    }
}

.schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer .image.multiple .slide-two {
    /* width: 1000px; */
    z-index: 1;
    position: relative;
}

@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer .image.multiple .slide-two {
        width: 100% !important;
        height: auto !important;
    }
}

.schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer .image.multiple .slide-two img {
    width: 1000px;
    aspect-ratio: auto 1.4534883721;
    max-width: 100%;
    height: auto;
    min-height: 100%;
}

.schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer .image.multiple .slick-prev {
    display: none !important;
}

.schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer .image.multiple .slick-next {
    display: none !important;
}

.schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer .stu-parent-title {
    max-width: 455px;
    position: relative;
    z-index: 0;
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer .stu-parent-title {
        max-width: 100%;
        text-align: center;
        margin: 0 0 20px 0;
    }
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer .stu-parent-title {
        margin: 0px 0 0 0;
    }
}

.schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer .stu-parent-title ul {
    margin: 0;
    padding: 0;
}

.schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer .stu-parent-title ul li:nth-child(1) span {
    opacity: 0.1;
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer .stu-parent-title ul li:nth-child(1) span {
        opacity: 0.4;
    }
}

.schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer .stu-parent-title ul li:nth-child(2) span {
    opacity: 0.06;
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer .stu-parent-title ul li:nth-child(2) span {
        opacity: 0.3;
    }
}

.schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer .stu-parent-title ul li:nth-child(3) span {
    opacity: 0.03;
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer .stu-parent-title ul li:nth-child(3) span {
        opacity: 0.2;
    }
}

.schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer .stu-parent-title ul li span {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: white;
}

.schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer .stu-parent-title ul li+li {
    margin-top: -60px;
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer .stu-parent-title ul li+li {
        display: none;
    }
}

@media only screen and (max-width: 1599px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer .stu-parent-title ul li+li {
        margin-top: -25px;
    }
}

@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer .stu-parent-title ul li+li {
        margin-top: -15px;
    }
}

.schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer-two {
    display: flex;
    align-items: center;
    position: relative;
    margin-top: 80px;
}

@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer-two {
        margin-top: 60px;
    }
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer-two {
        display: block;
        margin-top: 50px;
    }
}

@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer-two {
        margin-top: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer-two {
        margin-top: 30px;
    }
}

@media only screen and (max-width: 575px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer-two {
        margin-top: 25px;
    }
}

.schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer-two .image.multiple {
    width: 1000px;
    z-index: 1;
    position: relative;
    overflow: hidden;
}

@media only screen and (max-width: 1599px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer-two .image.multiple {
        width: 843px;
        height: auto;
    }
}

@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer-two .image.multiple {
        width: 885px;
        height: auto;
    }
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer-two .image.multiple {
        width: 100%;
        height: auto;
    }
}

@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer-two .image.multiple {
        margin-top: 20px;
    }
}

.schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer-two .image.multiple .slide-two {
    /* width: 1000px; */
    background-position: center;
    background-size: cover;
    z-index: 1;
    position: relative;
}

@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer-two .image.multiple .slide-two {
        width: 100% !important;
        height: auto !important;
    }
}

.schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer-two .image.multiple .slide-two img {
    /* width: 1000px; */
    aspect-ratio: auto 1.4534883721;
    max-width: 100%;
    height: auto;
    min-height: 100%;
}

.schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer-two .image.multiple .slick-prev {
    display: none !important;
}

.schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer-two .image.multiple .slick-next {
    display: none !important;
}

.schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer-two .stu-parent-title {
    max-width: 455px;
    position: relative;
    z-index: 0;
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer-two .stu-parent-title {
        max-width: 100%;
        text-align: center;
        margin: 0 0 20px 0;
    }
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer-two .stu-parent-title {
        margin: 0px 0 0 0;
    }
}

.schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer-two .stu-parent-title ul {
    margin: 0;
    padding: 0;
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer-two .stu-parent-title ul {
        text-align: center;
    }
}

.schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer-two .stu-parent-title ul li:nth-child(1) span {
    opacity: 0.1;
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer-two .stu-parent-title ul li:nth-child(1) span {
        opacity: 0.4;
    }
}

.schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer-two .stu-parent-title ul li:nth-child(2) span {
    opacity: 0.06;
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer-two .stu-parent-title ul li:nth-child(2) span {
        opacity: 0.3;
    }
}

.schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer-two .stu-parent-title ul li:nth-child(3) span {
    opacity: 0.03;
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer-two .stu-parent-title ul li:nth-child(3) span {
        opacity: 0.2;
    }
}

.schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer-two .stu-parent-title ul li span {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: white;
}

.schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer-two .stu-parent-title ul li+li {
    margin-top: -60px;
}

@media only screen and (max-width: 1599px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer-two .stu-parent-title ul li+li {
        margin-top: -25px;
    }
}

@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer-two .stu-parent-title ul li+li {
        margin-top: -15px;
    }
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-stu-parent-sections .stu-parent-wrapper .stu-parent-outer-two .stu-parent-title ul li+li {
        display: none;
    }
}

/*school management system stu-parent-sections section css ends here*/

/*school management system dashboard detail section css starts here*/

.schoolportfolio-outer .school-dashboard-details-section {
    margin: 120px 0;
    overflow: hidden;
}

@media only screen and (max-width: 1599px) {
    .schoolportfolio-outer .school-dashboard-details-section {
        margin: 80px 0;
    }
}

@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .school-dashboard-details-section {
        margin: 70px 0;
    }
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-dashboard-details-section {
        margin: 60px 0;
    }
}

@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-dashboard-details-section {
        margin: 50px 0;
    }
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-dashboard-details-section {
        margin: 40px 0;
    }
}

.schoolportfolio-outer .school-dashboard-details-section .admin-dash-details {
    background: #f7b696;
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-dashboard-details-section .admin-dash-details {
        text-align: center;
    }
}

.schoolportfolio-outer .school-dashboard-details-section .admin-dash-details .admin-dash-description {
    padding: 40px 40px 0 40px;
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-dashboard-details-section .admin-dash-details .admin-dash-description {
        padding: 30px 15px 0 15px;
    }
}

.schoolportfolio-outer .school-dashboard-details-section .admin-dash-details .admin-dash-description p {
    padding-top: 23px;
    max-width: 586px;
    margin: 0;
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-dashboard-details-section .admin-dash-details .admin-dash-description p {
        max-width: 100%;
    }
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-dashboard-details-section .admin-dash-details .admin-dash-description p {
        padding-top: 10px;
    }
}

.schoolportfolio-outer .school-dashboard-details-section .admin-dash-details .admin-dash-description .dashboard-admin-img {
    padding-top: 100px;
}

@media only screen and (max-width: 1599px) {
    .schoolportfolio-outer .school-dashboard-details-section .admin-dash-details .admin-dash-description .dashboard-admin-img {
        padding-top: 34px;
    }
}

@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .school-dashboard-details-section .admin-dash-details .admin-dash-description .dashboard-admin-img {
        padding-top: 33px;
    }
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-dashboard-details-section .admin-dash-details .admin-dash-description .dashboard-admin-img {
        padding-top: 40px;
        text-align: center;
    }
}

@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-dashboard-details-section .admin-dash-details .admin-dash-description .dashboard-admin-img {
        padding-top: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-dashboard-details-section .admin-dash-details .admin-dash-description .dashboard-admin-img {
        padding-top: 20px;
    }
}

.schoolportfolio-outer .school-dashboard-details-section .admin-dash-details .admin-dash-description .dashboard-admin-img img {
    width: 648px;
    aspect-ratio: auto 1.6831168831;
    max-width: 100%;
    height: auto;
    min-height: 100%;
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-dashboard-details-section .student-parent-dashboard {
        text-align: center;
    }
}

.schoolportfolio-outer .school-dashboard-details-section .student-parent-dashboard .dashboard-student-details {
    background: #576086;
    padding: 40px 0 52px 40px;
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-dashboard-details-section .student-parent-dashboard .dashboard-student-details {
        padding: 30px 15px;
    }
}

.schoolportfolio-outer .school-dashboard-details-section .student-parent-dashboard .dashboard-student-details h3 {
    color: #fff;
}

.schoolportfolio-outer .school-dashboard-details-section .student-parent-dashboard .dashboard-student-details .dashboard-student-img {
    padding-top: 50px;
    text-align: center;
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-dashboard-details-section .student-parent-dashboard .dashboard-student-details .dashboard-student-img {
        padding-top: 40px;
        text-align: center;
    }
}

@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-dashboard-details-section .student-parent-dashboard .dashboard-student-details .dashboard-student-img {
        padding-top: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-dashboard-details-section .student-parent-dashboard .dashboard-student-details .dashboard-student-img {
        padding-top: 20px;
    }
}

@media only screen and (max-width: 575px) {
    .schoolportfolio-outer .school-dashboard-details-section .student-parent-dashboard .dashboard-student-details .dashboard-student-img {
        padding-top: 10px;
    }
}

.schoolportfolio-outer .school-dashboard-details-section .student-parent-dashboard .dashboard-student-details .dashboard-student-img img {
    width: 480px;
    aspect-ratio: auto 1.4545454545;
    max-width: 100%;
    height: auto;
    min-height: 100%;
}

.schoolportfolio-outer .school-dashboard-details-section .student-parent-dashboard .dashboard-parent-details {
    background: #1b1b1b;
    padding: 40px 0 0 40px;
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-dashboard-details-section .student-parent-dashboard .dashboard-parent-details {
        padding: 30px 15px 0 15px;
    }
}

.schoolportfolio-outer .school-dashboard-details-section .student-parent-dashboard .dashboard-parent-details h3 {
    color: #fff;
}

.schoolportfolio-outer .school-dashboard-details-section .student-parent-dashboard .dashboard-parent-details .dashboard-parent-img {
    padding-top: 23px;
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-dashboard-details-section .student-parent-dashboard .dashboard-parent-details .dashboard-parent-img {
        text-align: center;
    }
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-dashboard-details-section .student-parent-dashboard .dashboard-parent-details .dashboard-parent-img {
        padding-top: 20px;
    }
}

@media only screen and (max-width: 575px) {
    .schoolportfolio-outer .school-dashboard-details-section .student-parent-dashboard .dashboard-parent-details .dashboard-parent-img {
        padding-top: 10px;
    }
}

.schoolportfolio-outer .school-dashboard-details-section .student-parent-dashboard .dashboard-parent-details .dashboard-parent-img img {
    width: 637px;
    aspect-ratio: auto 1.6208651399;
    max-width: 100%;
    height: auto;
    min-height: 100%;
}
/*school management system dashboard detail section css ends here*/

/*school management system school-section-slider-main-new section css starts here*/
.schoolportfolio-outer .school-section-slider-main-new {
    width: 100%;
    padding: 90px 0 80px 0;
    overflow: hidden;
    z-index: 1;
    background: #1b1b1b;
}
@media only screen and (max-width: 1599px) {
    .schoolportfolio-outer .school-section-slider-main-new {
        padding: 70px 0 40px 0;
    }
}
@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-section-slider-main-new {
        padding: 50px 0 25px 0;
    }
}
@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-section-slider-main-new {
        padding: 40px 0 10px 0;
    }
}
@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-section-slider-main-new {
        padding: 50px 15px 50px 15px;
    }
}
@media only screen and (max-width: 575px) {
    .schoolportfolio-outer .school-section-slider-main-new {
        padding: 40px 15px 40px 15px;
    }
}
.schoolportfolio-outer .school-section-slider-main-new .slick-prev {
    display: none !important;
}
.schoolportfolio-outer .school-section-slider-main-new .slick-next {
    display: none !important;
}
.schoolportfolio-outer .school-section-slider-main-new .ipad-frame-box {
    width: 63.75vw;
    height: 43.052vw;
    display: flex;
    align-items: center;
    flex-direction: row;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-section-slider-main-new .ipad-frame-box {
        display: none !important;
    }
}
.schoolportfolio-outer .school-section-slider-main-new .ipad-frame-box .ipad-frame-main {
    position: relative;
    background-color: #fff;
    border-radius: 48px;
    -webkit-transition: ease-in-out all 0.3s;
    transition: ease-in-out all 0.3s;
}
.schoolportfolio-outer .school-section-slider-main-new .ipad-frame-box .ipad-frame-main img {
    position: relative;
    z-index: 2;
    width: 63.75vw;
}
.schoolportfolio-outer .school-section-slider-main-new .ipad-frame-box .video-frame {
    width: 64vw;
    position: absolute;
    top: 0;
    align-items: center;
}
@media only screen and (min-width: 768px) {
    .schoolportfolio-outer .school-section-slider-main-new .ipad-frame-box-mob {
        display: none;
    }
}
.schoolportfolio-outer .school-section-slider-main-new .ipad-frame-box-mob ul {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    list-style-type: none;
}
.schoolportfolio-outer .school-section-slider-main-new .ipad-frame-box-mob ul li:nth-child(6) {
    margin-right: 0;
}
@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-section-slider-main-new .ipad-frame-box-mob ul li {
        width: 100%;
        min-width: 80%;
        margin-right: 25px;
        margin-bottom: 25px;
    }
}
.schoolportfolio-outer .school-section-slider-main-new .ipad-frame-box-mob ul li .slide-one-item {
    text-align: center;
}
.schoolportfolio-outer .school-section-slider-main-new .ipad-frame-box-mob ul li .slide-one-item img {
    width: 1200px;
    aspect-ratio: auto 1.4527845036;
    max-width: 100%;
    height: auto;
    min-height: 100%;
}
@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-section-slider-main-new .ipad-frame-box-mob ul li .slide-one-item img {
        width: 100%;
        margin-right: 0;
        margin-bottom: 0;
    }
}
.schoolportfolio-outer .school-section-slider-main-new .slide-one {
    text-align: center;
    position: relative;
    transform: scale(0.9);
    transition: all 0.6s ease;
    margin-top: 15px;
    transform-origin: bottom;
}
.schoolportfolio-outer .school-section-slider-main-new .slide-one img {
    width: 1200px;
    aspect-ratio: auto 1.4527845036;
    max-width: 100%;
    height: auto;
}
.schoolportfolio-outer .school-section-slider-main-new .slick-list {
    overflow: inherit;
}

.schoolportfolio-outer .school-section-slider-main-new .slick-list .slick-slide.slick-current {
    transform: scale(1);
    transition: all 0.6s ease;
}

.schoolportfolio-outer .school-section-slider-main-new .slick-next,
.schoolportfolio-outer .school-section-slider-main-new .slick-prev {
    z-index: 5;
    display: none !important;
}
.schoolportfolio-outer .school-section-slider-main-new .slick-next:before,
.schoolportfolio-outer .school-section-slider-main-new .slick-prev:before {
    color: #000;
    font-size: 0;
    background: transparent;
}

/*school management system school-section-slider-main-new section css ends here*/

/*school management system school-community-section section css starts here*/

.schoolportfolio-outer .school-community-section {
    background: #f2f2f2;
    padding: 120px 0 0 0;
    position: relative;
    overflow: hidden;
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-community-section {
        padding: 60px 0 0 0;
    }
}

@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-community-section {
        padding: 50px 0 0 0;
    }
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-community-section {
        padding: 40px 0 0 0;
    }
}

@media only screen and (max-width: 575px) {
    .schoolportfolio-outer .school-community-section {
        padding: 40px 0 0 0;
    }
}

@media only screen and (max-width: 340px) {
    .schoolportfolio-outer .school-community-section {
        padding: 30px 0 0 0;
    }
}

.schoolportfolio-outer .school-community-section::before {
    content: "";
    position: absolute;
    background: url("../img/case-study-details/school-management-system/ellipse-one.svg") no-repeat;
    background-size: cover;
    width: 143px;
    height: 155px;
    left: 12vw;
    opacity: 0.5;
}

@media only screen and (max-width: 1799px) {
    .schoolportfolio-outer .school-community-section::before {
        left: 5vw;
    }
}

@media only screen and (max-width: 1599px) {
    .schoolportfolio-outer .school-community-section::before {
        left: 11vw;
    }
}

@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .school-community-section::before {
        left: 9vw;
    }
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-community-section::before {
        left: 3vw;
    }
}

@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-community-section::before {
        display: none;
    }
}

.schoolportfolio-outer .school-community-section::after {
    content: "";
    position: absolute;
    background: url("../img/case-study-details/school-management-system/ellipse-two.svg") no-repeat;
    background-size: cover;
    width: 130px;
    height: 256px;
    right: 12vw;
    top: 12vw;
    opacity: 0.5;
}

@media only screen and (max-width: 1799px) {
    .schoolportfolio-outer .school-community-section::after {
        right: 5vw;
    }
}

@media only screen and (max-width: 1599px) {
    .schoolportfolio-outer .school-community-section::after {
        right: 11vw;
    }
}

@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .school-community-section::after {
        right: 8vw;
    }
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-community-section::after {
        right: 3vw;
    }
}

@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-community-section::after {
        display: none;
    }
}

.schoolportfolio-outer .school-community-section .scommunity-main {
    background: #374163;
}

.schoolportfolio-outer .school-community-section .scommunity-main .community-one {
    display: flex;
    gap: 55px;
    padding: 130px 0;
}

@media only screen and (max-width: 1599px) {
    .schoolportfolio-outer .school-community-section .scommunity-main .community-one {
        padding: 90px 0;
    }
}

@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .school-community-section .scommunity-main .community-one {
        padding: 70px 0;
    }
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-community-section .scommunity-main .community-one {
        gap: 15px;
        padding: 50px 20px;
    }
}

@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-community-section .scommunity-main .community-one {
        gap: 10px;
        padding: 40px 0;
    }
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-community-section .scommunity-main .community-one {
        display: block;
        padding: 30px 0;
    }
}

.schoolportfolio-outer .school-community-section .scommunity-main .community-one .com-part-one img {
    width: 582px;
    aspect-ratio: auto 0.7071688943;
    max-width: 100%;
    height: auto;
    min-height: 100%;
}

.schoolportfolio-outer .school-community-section .scommunity-main .community-one .com-part-two img {
    width: 582px;
    aspect-ratio: auto 0.7071688943;
    max-width: 100%;
    height: auto;
    min-height: 100%;
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-community-section .scommunity-main .community-one .com-part-two {
        padding-top: 20px;
    }
}

.schoolportfolio-outer .school-community-section .scommunity-main .community-two .com-expertimg {
    position: relative;
}

.schoolportfolio-outer .school-community-section .scommunity-main .community-two .com-expertimg img {
    width: 1290px;
    aspect-ratio: auto 2;
    max-width: 100%;
    height: auto;
    min-height: 100%;
}

.schoolportfolio-outer .school-community-section .scommunity-main .community-two .com-expertimg .com-expert-inner {
    position: absolute;
    top: 166px;
    left: 100px;
}

.schoolportfolio-outer .school-community-section .scommunity-main .community-two .com-expertimg .com-expert-inner .expert-details {
    max-width: 553px;
}

.schoolportfolio-outer .school-community-section .scommunity-main .community-two .com-expertimg .com-expert-inner .expert-details p {
    padding: 22px 0 38px 0;
}

.schoolportfolio-outer .school-community-section .scommunity-main .community-two .com-expertimg .com-expert-inner .expert-details .slearnmore-btn {
    background-color: #fff;
    border-radius: 13.6186px;
    color: #222;
    text-align: center;
    padding: 22.18px 32.82px;
    cursor: pointer;
}

.schoolportfolio-outer .school-community-section .scommunity-main .community-two .com-expertimg .com-expert-inner-two {
    position: absolute;
    top: -25px;
    right: 50px;
    max-width: 456px;
}

.schoolportfolio-outer .school-community-section .com-expert-main {
    background: #374163;
}

.schoolportfolio-outer .school-community-section .com-expert-main::before {
    content: "";
    position: absolute;
    background: url("../img/case-study-details/school-management-system/ellipse-four.svg") no-repeat;
    background-size: cover;
    width: 200px;
    height: 256px;
    top: 76vw;
    opacity: 0.5;
}

@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-community-section .com-expert-main::before {
        display: none;
    }
}

.schoolportfolio-outer .school-community-section .com-expert-main .com-expert {
    display: flex;
    background: #f7b696;
    border-radius: 63px;
    padding: 51px 50px 70px 90px;
    position: relative;
}

@media only screen and (max-width: 1599px) {
    .schoolportfolio-outer .school-community-section .com-expert-main .com-expert {
        padding: 40px 40px 60px 40px;
        border-radius: 35px;
    }
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-community-section .com-expert-main .com-expert {
        margin: 0 20px;
    }
}

@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-community-section .com-expert-main .com-expert {
        padding: 40px 20px 60px 20px;
        border-radius: 20px;
        margin: 0;
    }
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-community-section .com-expert-main .com-expert {
        display: block;
        padding: 30px 10px;
        text-align: center;
    }
}

.schoolportfolio-outer .school-community-section .com-expert-main .com-expert::before {
    content: "";
    position: absolute;
    background: url("../img/case-study-details/school-management-system/ellipse-three.svg") no-repeat;
    background-size: cover;
    width: 265px;
    height: 216px;
    top: -5vw;
    opacity: 0.5;
}

@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-community-section .com-expert-main .com-expert::before {
        display: none;
    }
}

.schoolportfolio-outer .school-community-section .com-expert-main .com-expert::after {
    content: "";
    position: absolute;
    background: url("../img/case-study-details/school-management-system/comm-vectthree.svg") no-repeat;
    background-size: cover;
    width: 574px;
    height: 190px;
    top: 0;
    left: 10vw;
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-community-section .com-expert-main .com-expert::after {
        display: none;
    }
}

.schoolportfolio-outer .school-community-section .com-expert-main .com-expert .com-expert-detail img {
    width: 147px;
    aspect-ratio: auto 3.1956521739;
    max-width: 100%;
    height: auto;
}

.schoolportfolio-outer .school-community-section .com-expert-main .com-expert .com-expert-detail .expert-desc {
    max-width: 553px;
    padding-top: 52px;
}

@media only screen and (max-width: 1599px) {
    .schoolportfolio-outer .school-community-section .com-expert-main .com-expert .com-expert-detail .expert-desc {
        padding-top: 10px;
        max-width: 100%;
    }
}

.schoolportfolio-outer .school-community-section .com-expert-main .com-expert .com-expert-detail .expert-desc p {
    padding-top: 20px;
}

@media only screen and (max-width: 1599px) {
    .schoolportfolio-outer .school-community-section .com-expert-main .com-expert .com-expert-detail .expert-desc p {
        padding-top: 5px;
    }
}

@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-community-section .com-expert-main .com-expert .com-expert-detail .expert-desc p {
        padding-top: 10px;
    }
}

.schoolportfolio-outer .school-community-section .com-expert-main .com-expert .com-expert-detail .slearn-more {
    margin-top: 50px;
}

@media only screen and (max-width: 1599px) {
    .schoolportfolio-outer .school-community-section .com-expert-main .com-expert .com-expert-detail .slearn-more {
        margin-top: 40px;
    }
}

@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-community-section .com-expert-main .com-expert .com-expert-detail .slearn-more {
        margin-top: 35px;
    }
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-community-section .com-expert-main .com-expert .com-expert-detail .slearn-more {
        margin-top: 25px;
    }
}

.schoolportfolio-outer .school-community-section .com-expert-main .com-expert .com-expert-detail .slearn-more span {
    background: #fff;
    border-radius: 13.6186px;
    padding: 22px 32px;
}

@media only screen and (max-width: 1599px) {
    .schoolportfolio-outer .school-community-section .com-expert-main .com-expert .com-expert-detail .slearn-more span {
        padding: 10px 20px 12px 20px;
    }
}

@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .school-community-section .com-expert-main .com-expert .com-expert-detail .slearn-more span {
        padding: 15px;
    }
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-community-section .com-expert-main .com-expert .com-expert-detail .slearn-more span {
        padding: 10px 20px;
    }
}

.schoolportfolio-outer .school-community-section .com-expert-main .com-expert .com-expert-img {
    margin-top: -90px;
    position: relative;
    margin-left: 25px;
    z-index: 1;
}

@media only screen and (max-width: 1599px) {
    .schoolportfolio-outer .school-community-section .com-expert-main .com-expert .com-expert-img {
        margin: -60px 0 0 10px;
    }
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-community-section .com-expert-main .com-expert .com-expert-img {
        margin: 0 0 0 10px;
    }
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-community-section .com-expert-main .com-expert .com-expert-img {
        margin: 30px 0 0 0;
        text-align: center;
    }
}

.schoolportfolio-outer .school-community-section .com-expert-main .com-expert .com-expert-img .expert-clientimg img {
    width: 458px;
    aspect-ratio: auto 0.8893203883;
    max-width: 100%;
    height: auto;
}

@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .school-community-section .com-expert-main .com-expert .com-expert-img .expert-clientimg img {
        max-width: 100%;
    }
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-community-section .com-expert-main .com-expert .com-expert-img .expert-clientimg img {
        max-width: 75%;
    }
}

.schoolportfolio-outer .school-community-section .com-expert-main .com-expert .expert-backg .com-expert-backgro {
    position: absolute;
    bottom: 4vw;
    right: 0.7vw;
    text-align: center;
    transform: rotate(3deg);
}

@media only screen and (max-width: 1599px) {
    .schoolportfolio-outer .school-community-section .com-expert-main .com-expert .expert-backg .com-expert-backgro {
        bottom: 8vw;
        right: 0.4vw;
        text-align: center;
        transform: rotate(25deg);
    }
}

@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .school-community-section .com-expert-main .com-expert .expert-backg .com-expert-backgro {
        right: -3.5vw;
        top: 0;
        transform: rotate(7deg);
        bottom: 4vw;
    }
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-community-section .com-expert-main .com-expert .expert-backg .com-expert-backgro {
        display: none;
    }
}

.schoolportfolio-outer .school-community-section .com-expert-main .com-expert .expert-backg .com-expert-backgro img {
    width: 288px;
    aspect-ratio: auto 0.6088794926;
    max-width: 100%;
    height: auto;
}

@media only screen and (max-width: 1599px) {
    .schoolportfolio-outer .school-community-section .com-expert-main .com-expert .expert-backg .com-expert-backgro img {
        max-width: 70%;
    }
}

@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .school-community-section .com-expert-main .com-expert .expert-backg .com-expert-backgro img {
        max-width: 60%;
    }
}

.schoolportfolio-outer .school-community-section .com-expert-main .com-expert .expert-backg .com-expert-backgrot {
    position: absolute;
    bottom: 0;
    right: 9.5vw;
}

@media only screen and (max-width: 1599px) {
    .schoolportfolio-outer .school-community-section .com-expert-main .com-expert .expert-backg .com-expert-backgrot {
        right: -4.5vw;
        transform: rotate(317deg);
        bottom: 5.4vw;
    }
}

@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .school-community-section .com-expert-main .com-expert .expert-backg .com-expert-backgrot {
        right: -6.5vw;
        transform: rotate(339deg);
        bottom: 60px;
    }
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-community-section .com-expert-main .com-expert .expert-backg .com-expert-backgrot {
        display: none;
    }
}

.schoolportfolio-outer .school-community-section .com-expert-main .com-expert .expert-backg .com-expert-backgrot img {
    width: 529px;
    aspect-ratio: auto 1.3126550868;
    max-width: 100%;
    height: auto;
}

@media only screen and (max-width: 1599px) {
    .schoolportfolio-outer .school-community-section .com-expert-main .com-expert .expert-backg .com-expert-backgrot img {
        max-width: 70%;
    }
}

@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .school-community-section .com-expert-main .com-expert .expert-backg .com-expert-backgrot img {
        max-width: 60%;
    }
}

.schoolportfolio-outer .school-community-section .scommunity-main-two {
    background: #374163;
    padding-top: 47px;
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-community-section .scommunity-main-two {
        padding-top: 20px;
    }
}

.schoolportfolio-outer .school-community-section .scommunity-main-two::before {
    content: "";
    position: absolute;
    background: url("../img/case-study-details/school-management-system/ellipse-five.svg") no-repeat;
    background-size: cover;
    width: 228px;
    height: 185px;
    opacity: 0.5;
    left: 28vw;
    bottom: 23vw;
}

@media only screen and (max-width: 1799px) {
    .schoolportfolio-outer .school-community-section .scommunity-main-two::before {
        bottom: 30vw;
    }
}

@media only screen and (max-width: 1599px) {
    .schoolportfolio-outer .school-community-section .scommunity-main-two::before {
        bottom: 20vw;
    }
}

@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .school-community-section .scommunity-main-two::before {
        bottom: 22vw;
    }
}

.schoolportfolio-outer .school-community-section .scommunity-main-two::after {
    content: "";
    position: absolute;
    background: url("../img/case-study-details/school-management-system/ellipse-six.svg") no-repeat;
    background-size: cover;
    width: 149px;
    height: 185px;
    right: 0;
    opacity: 0.5;
}

@media only screen and (max-width: 1799px) {
    .schoolportfolio-outer .school-community-section .scommunity-main-two::after {
        right: 5vw;
    }
}

@media only screen and (max-width: 1599px) {
    .schoolportfolio-outer .school-community-section .scommunity-main-two::after {
        right: 9vw;
    }
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-community-section .scommunity-main-two::after {
        right: 0;
        width: 100px;
        bottom: 35vw;
    }
}

@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-community-section .scommunity-main-two::after {
        display: none;
    }
}

.schoolportfolio-outer .school-community-section .scommunity-main-two .committed-part .commit-title {
    max-width: 805px;
}

@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-community-section .scommunity-main-two .committed-part .commit-title {
        max-width: 580px;
    }
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-community-section .scommunity-main-two .committed-part .commit-title {
        max-width: 400px;
    }
}

@media only screen and (max-width: 575px) {
    .schoolportfolio-outer .school-community-section .scommunity-main-two .committed-part .commit-title {
        max-width: 330px;
    }
}

.schoolportfolio-outer .school-community-section .scommunity-main-two .committed-part .commit-title span {
    color: #f5f4f2;
}

.schoolportfolio-outer .school-community-section .scommunity-main-two .committed-part .committed-img {
    padding: 60px 57px 0 57px;
}

@media only screen and (max-width: 1366px) {
    .schoolportfolio-outer .school-community-section .scommunity-main-two .committed-part .committed-img {
        padding: 40px 30px 0 30px;
    }
}

@media only screen and (max-width: 1199px) {
    .schoolportfolio-outer .school-community-section .scommunity-main-two .committed-part .committed-img {
        padding: 30px 15px 0 15px;
    }
}

@media only screen and (max-width: 991px) {
    .schoolportfolio-outer .school-community-section .scommunity-main-two .committed-part .committed-img {
        padding: 30px 0 0 0;
    }
}

@media only screen and (max-width: 767px) {
    .schoolportfolio-outer .school-community-section .scommunity-main-two .committed-part .committed-img {
        padding: 10px 0 0 0;
    }
}

.schoolportfolio-outer .school-community-section .scommunity-main-two .committed-part .committed-img img {
    width: 3888px;
    aspect-ratio: auto 2.4529968454;
    max-width: 100%;
    height: auto;
    min-height: 100%;
}

/*school management system school-community-section section css ends here*/

/*school management system css ends here*/

/*ai based matrimony css starts here*/

@font-face {
    font-family: 'TT Norms Pro';
    src: url('../portfolio-fonts/ai-based-matrimony-app/TTNormsPro-Regular.woff2') format('woff2'),
    url('../portfolio-fonts/ai-based-matrimony-app/TTNormsPro-Regular.woff') format('woff'),url('../portfolio-fonts/ai-based-matrimony-app/TTNormsPro-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Norms Pro';
    src: url('../portfolio-fonts/ai-based-matrimony-app/TTNormsPro-Bold.woff2') format('woff2'),
    url('../portfolio-fonts/ai-based-matrimony-app/TTNormsPro-Bold.woff') format('woff'),url('../portfolio-fonts/ai-based-matrimony-app/TTNormsPro-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('../portfolio-fonts/ai-based-matrimony-app/Ubuntu-Regular.woff2') format('woff2'),
    url('../portfolio-fonts/ai-based-matrimony-app/Ubuntu-Regular.woff') format('woff'),
    url('../portfolio-fonts/ai-based-matrimony-app/Ubuntu-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Ubuntu';
    src: url('../portfolio-fonts/ai-based-matrimony-app/Ubuntu-Medium.woff2') format('woff2'),
    url('../portfolio-fonts/ai-based-matrimony-app/Ubuntu-Medium.woff') format('woff'),
    url('../portfolio-fonts/ai-based-matrimony-app/Ubuntu-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ubunturegular';
    src: url('../portfolio-fonts/ai-based-matrimony-app/ubuntu.regular-webfont.woff2') format('woff2'),
    url('../portfolio-fonts/ai-based-matrimony-app/ubuntu.regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Ubuntu';
    src: url('../portfolio-fonts/ai-based-matrimony-app/Ubuntu-BoldItalic.woff2') format('woff2'),
    url('../portfolio-fonts/ai-based-matrimony-app/Ubuntu-BoldItalic.woff') format('woff'),url('../portfolio-fonts/ai-based-matrimony-app/Ubuntu-BoldItalic.ttf') format('truetype');;
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

.wrapper-better-half {
    width: 100%;
    font-family: "ubunturegular";
    background-color: #fff;
}

.wrapper-better-half .contemporary {
    font-family: "Ubuntu";
    font-style: italic;
    font-weight: 700;
    font-size: 60px;
    line-height: 69px;
    text-transform: uppercase;
    color: #000;
}

@media only screen and (min-width: 1367px) and (max-width: 1599px) {
    .wrapper-better-half .contemporary {
        font-size: 46px;
        line-height: 70px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1366px) {
    .wrapper-better-half .contemporary {
        font-size: 36px;
        line-height: 70px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .wrapper-better-half .contemporary {
        font-size: 36px;
        line-height: 50px;
        margin-bottom: 34px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper-better-half .contemporary {
        font-size: 36px;
        line-height: 46px;
    }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .wrapper-better-half .contemporary {
        font-size: 30px;
        line-height: 40px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .contemporary {
        text-align: center;
    }
}
@media only screen and (max-width: 575px) {
    .wrapper-better-half .contemporary {
        font-size: 24px;
        line-height: 32px;
    }
}

.wrapper-better-half .contemporary span {
    color: #8567ff;
    position: relative;
    text-shadow: -4px 0px 0px #ff5b91;
}

@media only screen and (max-width: 767px) {
    .wrapper-better-half .contemporary span {
        letter-spacing: 2px;
    }
}


@media only screen and (max-width: 575px) {
    .wrapper-better-half .contemporary span {
        font-size: 24px;
        line-height: 36px;
        letter-spacing: 2px;
    }
}
@media only screen and (min-width: 300px) and (max-width: 575px) {
    .wrapper-better-half .contemporary span {
        letter-spacing: 2px;
        text-shadow: -2px 0px 0px #ff5b91;
    }
}

.wrapper-better-half .contemporary .when-color {
    color: #ff5b91;
    text-shadow: -4px 0px 0px #8567ff;
}

@media only screen and (max-width: 575px) {
    .wrapper-better-half .contemporary .when-color {
        text-shadow: -2px 0px 0px #8567ff;
    }
}

.wrapper-better-half .contemporary .when-color-two {
    color: #ff5b91;
    text-shadow: -4px 0px 0px #8567ff;
    display: block;
}

@media only screen and (max-width: 575px) {
    .wrapper-better-half .contemporary .when-color-two {
        text-shadow: -2px 0px 0px #8567ff;
    }
}

.wrapper-better-half .contemporary .dispay-block {
    display: block;
    color: #000;
    text-shadow: none;
}

.wrapper-better-half .contemporary .better {
    display: block;
}

@media only screen and (min-width:1366px){
    .wrapper-better-half .better-half-container {
        max-width: 1250px;
        padding: 0;
    }
}


.wrapper-better-half p {
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 38px;
    color: #333;
    margin-bottom: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .wrapper-better-half p {
        font-size: 18px;
        line-height: 26px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper-better-half p {
        font-size: 16px;
        line-height: 26px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half p {
        font-size: 16px;
        line-height: 24px;
    }
}

.wrapper-better-half .p-two {
    font-style: normal;
    font-weight: 400;
    font-size: 33px;
    line-height: 47px;
    color: #fff;
    text-transform: capitalize;
    margin-bottom: 0;
}

@media only screen and (min-width: 992px) and (max-width: 1365px) {
    .wrapper-better-half .p-two {
        font-size: 30px;
        line-height: 42px;
        padding-top: 10px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper-better-half .p-two {
        font-size: 22px;
        line-height: 30px;
        padding-top: 10px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .p-two {
        font-size: 18px;
        line-height: 24px;
    }
}

.wrapper-better-half .banner-bg {
    width: 100%;
    background: #ffffff url("../img/case-study-details/ai-based-matrimony-app/webp/banner-bg.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding-top: 120px;
    position: relative;
}
@media only screen and (max-width: 1199px) {
    .wrapper-better-half .banner-bg {
        padding-top:90px;
    }
}
@media only screen and (max-width: 991px) {
    .wrapper-better-half .banner-bg {
        padding-top:70px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .banner-bg {
        padding: 50px 0;
        position: static;
    }
}

@media only screen and (max-width: 575px) {
    .wrapper-better-half .banner-bg {
        padding: 35px 0;
    }
}

.wrapper-better-half .banner-bg:after {
    width: 100%;
    content: "";
    position: absolute;
    background: #fff;
    bottom: 0;
    height: 170px;
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .banner-bg:after {
        display: none;
    }
}

.wrapper-better-half .banner-bg .banner-title {
    font-family: "TT Norms Pro";
    font-style: normal;
    font-weight: 700;
    font-size: 70px;
    line-height: 116px;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 15px;
    display: inline-flex;
}

@media only screen and (min-width: 992px) and (max-width: 1365px) {
    .wrapper-better-half .banner-bg .banner-title {
        font-size: 56px;
        line-height: 66px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper-better-half .banner-bg .banner-title {
        font-size: 46px;
        line-height: 42px;
        display: inline-block;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .banner-bg .banner-title {
        font-size: 36px;
        line-height: 42px;
        display: inline-block;
    }
}

.wrapper-better-half .banner-bg .banner-title span {
    color: #ff5b91;
    position: relative;
    background-image: url("../img/case-study-details/ai-based-matrimony-app/heartvectorsingle.svg");
    background-repeat: no-repeat;
    display: block;
    background-position: top center;
    margin-top: 22px;
    padding-top: 12px;
    padding-left: 5px;
}

@media only screen and (min-width: 992px) and (max-width: 1365px) {
    .wrapper-better-half .banner-bg .banner-title span {
        margin-top: 2px;
        padding-top: 30px;
        padding-left: 5px;
    }
}
@media only screen and (max-width: 991px) {
    .wrapper-better-half .banner-bg .banner-title span {
        background-image: none;
        color: #ff5b91;
        padding-left: 5px;
        padding-right: 2px;
        margin-top: 0;
        padding-top: 0;
        display: inline-block;
    }
}

.wrapper-better-half .banner-bg .banner-title .match-color {
    color: #8467f9;
    background: url("../img/case-study-details/ai-based-matrimony-app/heart.svg");
    background-repeat: no-repeat;
    background-position: top center;
    display: block;
    margin-top: 18px;
    padding-top: 17px;
}

@media only screen and (min-width: 992px) and (max-width: 1365px) {
    .wrapper-better-half .banner-bg .banner-title .match-color {
        margin-top: 0;
        padding-top: 35px;
    }
}
@media only screen and (max-width: 991px) {
    .wrapper-better-half .banner-bg .banner-title .match-color {
        background-image: none;
        color: #ff5b91;
        padding-left: 5px;
        padding-right: 2px;
        margin-top: 0;
        padding-top: 0;
        display: inline-block;
    }
}

.wrapper-better-half .banner-bg .banner-main {
    width: 100%;
    z-index: 1;
    position: relative;
    text-align: center;
}

@media only screen and (max-width: 767px){
    .wrapper-better-half .banner-bg .banner-main {
        margin: 50px 0 0;
    }
}

.wrapper-better-half .banner-bg .banner-main img {
    width: 1498px;
    aspect-ratio: auto 1.4557823129;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 9;
}

.wrapper-better-half .section-better-half-bg {
    width: 100%;
    background: #fff;
    padding-bottom: 80px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .wrapper-better-half .section-better-half-bg {
        padding-bottom: 90px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper-better-half .section-better-half-bg {
        padding: 35px 0 70px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-better-half-bg {
        padding: 50px 0;
    }
}
@media only screen and (max-width: 575px) {
    .wrapper-better-half .section-better-half-bg {
        padding: 35px 0;
    }
}

.wrapper-better-half .section-better-half-bg .half-logo {
    margin-top: 1px;
    margin-bottom: 20px;
}

.wrapper-better-half .section-better-half-bg .half-logo img {
    width: 384px;
    aspect-ratio: auto 6.6206896552;
    height: auto;
    max-width: 80%;
}

@media only screen and (max-width: 575px) {
    .wrapper-better-half .section-better-half-bg .half-logo img {
        width: 220px !important;
    }
}

.wrapper-better-half .section-better-half-bg .half-border-left img {
    width: 459px;
    aspect-ratio: auto 229.5;
    height: auto;
    max-width: 100%;
}

.wrapper-better-half .section-better-half-bg .half-border-right img {
    width: 467px;
    aspect-ratio: auto 233.5;
    height: auto;
    max-width: 100%;
}

@media only screen and (min-width: 860px) and (max-width: 1199px) {
    .wrapper-better-half .section-better-half-bg .matrimony-space {
        padding-right: 0;
    }
}

@media only screen and (min-width: 860px) and (max-width: 1199px) {
    .wrapper-better-half .section-better-half-bg .matrimony-space-right {
        padding-left: 0;
    }
}

@media only screen and (min-width: 300px) and (max-width: 767px) {
    .wrapper-better-half .section-better-half-bg .border-left-right {
        display: none;
    }
}

.wrapper-better-half .section-better-half-bg .matrimony-text {
    font-style: italic;
    font-weight: 400;
    font-size: 26px;
    line-height: 30px;
    text-align: center;
    color: #ff4a86;
    font-family: "TT Norms Pro";
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .wrapper-better-half .section-better-half-bg .matrimony-text {
        font-size: 21px;
    }
}
@media only screen and (min-width: 801px) and (max-width: 991px) {
    .wrapper-better-half .section-better-half-bg .matrimony-text {
        font-size: 24px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 800px) {
    .wrapper-better-half .section-better-half-bg .matrimony-text {
        font-size: 22px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-better-half-bg .matrimony-text {
        border-bottom: solid 1px #dddadb;
        padding-bottom: 25px;
    }
}
@media only screen and (max-width: 575px) {
    .wrapper-better-half .section-better-half-bg .matrimony-text {
        font-size: 23px;
    }
}

.wrapper-better-half .section-better-half-bg .india-now-text {
    font-style: italic;
    font-weight: 400;
    font-size: 28px;
    line-height: 42px;
    text-align: center;
    color: #000;
    opacity: 0.6;
    margin-top: 25px;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .wrapper-better-half .section-better-half-bg .india-now-text {
        font-size: 24px;
        line-height: 36px;
        margin-top: 20px;
    }
}
@media only screen and (min-width: 991px) and (max-width: 1199px) {
    .wrapper-better-half .section-better-half-bg .india-now-text {
        font-size: 22px;
        line-height: 36px;
        margin-top: 20px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper-better-half .section-better-half-bg .india-now-text {
        font-size: 21px;
        line-height: 36px;
        margin-top: 20px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-better-half-bg .india-now-text {
        margin-top: 30px;
        font-size: 18px;
        line-height: 30px;
    }
}
@media only screen and (max-width: 575px) {
    .wrapper-better-half .section-better-half-bg .india-now-text {
        margin-top: 25px;
    }
}

.wrapper-better-half .section-better-half-bg .portfolio-screens-big .video-container video{
    filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.10));
}

.wrapper-better-half .section-better-half-bg .overview {
    margin-top: 120px;
    margin-bottom: 70px;
}

@media only screen and (min-width: 992px) and (max-width: 1499px) {
    .wrapper-better-half .section-better-half-bg .overview {
        margin-top: 45px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper-better-half .section-better-half-bg .overview {
        margin: 50px 0 70px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-better-half-bg .overview {
       margin: 30px 0;
    }
}

.wrapper-better-half .section-better-half-bg .overview img {
    width: 1289px;
    aspect-ratio: auto 1.9068047337;
    height: auto;
    max-width: 100%;
}

.wrapper-better-half .section-better-half-bg .overview-content {
    gap: 50px;
    margin-top: 50px;
    padding-bottom: 30px;
}

@media only screen and (min-width: 992px) and (max-width: 1499px) {
    .wrapper-better-half .section-better-half-bg .overview-content {
        margin-top: 20px;
        padding-bottom: 0;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper-better-half .section-better-half-bg .overview-content {
        padding-bottom:0;
        margin-top: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-better-half-bg .overview-content {
        margin-top: 15px;
        padding-bottom: 0;
        gap: 0;
        text-align: center;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-better-half-bg .overview-content img{
        display: none;
    }
}
.wrapper-better-half .section-better-half-bg .overview-content .span-text-red {
    color: #ff5b91;
    font-weight: 600;
    margin-left: 4px;
}

.wrapper-better-half .section-better-half-bg .overview-content .pt-desctop {
    margin-top: 18px;
}

@media only screen and (max-width: 1199px) {
    .wrapper-better-half .section-better-half-bg .overview-content .pt-desctop {
        margin-top: 0px;
    }
}

.wrapper-better-half .section-better-half-bg .arrow-view {
    margin-right: 70px;
    margin-top: 5px;
}

@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-better-half-bg .arrow-view {
        display: none;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .wrapper-better-half .section-better-half-bg .arrow-view {
        margin-right: 30px;
    }
}

.wrapper-better-half .section-better-half-bg .arrow-view img {
    width: 190px;
    aspect-ratio: auto 7.9166666667;
    height: auto;
    max-width: 100%;
}

.wrapper-better-half .section-touch-bg {
    width: 100%;
    background: url("../img/case-study-details/ai-based-matrimony-app/webp/chat-section.webp") repeat no-repeat;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: top center;
    padding-top: 150px;
    padding-bottom: 400px;
}

@media only screen and (min-width: 1800px) and (max-width: 1920px) {
    .wrapper-better-half .section-touch-bg {
        padding-top: 130px;
        padding-bottom: 250px;
    }
}
@media only screen and (max-width: 1799px) {
    .wrapper-better-half .section-touch-bg {
        padding-top: 110px;
        padding-bottom: 150px;
    }
}


@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .wrapper-better-half .section-touch-bg {
        background-size: 110%;
        padding: 110px 0;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .wrapper-better-half .section-touch-bg {
        padding: 90px 0 115px;
        background-image: none;
        background-color: #fec9db;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper-better-half .section-touch-bg {
        padding: 70px 0 95px;
        background-image: none;
        background-color: #fec9db;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-touch-bg {
        padding: 50px 0 55px;
        background-image: none;
        background-color: #fec9db;
    }
}
@media only screen and (max-width: 575px) {
    .wrapper-better-half .section-touch-bg {
        padding: 35px 0 40px;
    }
}

.wrapper-better-half .section-touch-bg .bottom-space {
    margin-top: 20px;
    margin-bottom: 90px;
}

@media only screen and (min-width: 1367px) and (max-width: 1599px) {
    .wrapper-better-half .section-touch-bg .bottom-space {
        margin-top: 0;
        margin-bottom: 50px;
        line-height: 60px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1366px) {
    .wrapper-better-half .section-touch-bg .bottom-space {
        margin-top: 0;
        margin-bottom: 40px;
        line-height: 52px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .wrapper-better-half .section-touch-bg .bottom-space {
        margin-top: 0px;
        margin-bottom: 60px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper-better-half .section-touch-bg .bottom-space {
        margin-top: 0px;
        margin-bottom: 40px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-touch-bg .bottom-space {
        margin-top: 0px;
        margin-bottom: 25px;
    }
}

.wrapper-better-half .section-touch-bg .contemporary-box {
    max-width: 1150px;
    margin: 0 auto;
}

.wrapper-better-half .section-touch-bg .contemporary-box .essence {
    display: block;
}

.wrapper-better-half .section-touch-bg .main-box-bg-left-new-box {
    max-width: 1120px;
    margin: 0 auto;
}

.wrapper-better-half .section-touch-bg .main-box-bg-left {
    max-width: 865px;
    margin-top: 0px;
}


@media only screen and (min-width: 1200px) and (max-width: 1599px) {
    .wrapper-better-half .section-touch-bg .main-box-bg-left {
        margin: 0 auto;
    }
}
@media only screen and (max-width: 1199px) {
    .wrapper-better-half .section-touch-bg .main-box-bg-left {
        max-width: 870px;
        margin: 0 auto;
    }
}

.wrapper-better-half .section-touch-bg .main-box-bg-left .chat-left-top {
    background: linear-gradient(180deg, #7d5cff 0%, #aa95ff 106%);
    backdrop-filter: blur(10px);
    box-shadow: 0 9px 0 #000;
    border-radius: 80px;
    padding: 32px 60px 32px 70px;
    display: flex;
    align-items: center;
    position: relative;
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .wrapper-better-half .section-touch-bg .main-box-bg-left .chat-left-top {
        border-radius: 20px;
        padding: 25px 20px 25px 20px;
        box-shadow: 0 5px 0 #000;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-touch-bg .main-box-bg-left .chat-left-top {
        border-radius: 20px;
        padding: 25px 20px 25px 20px;
        box-shadow: 0 3px 0 #000;
    }
}

.wrapper-better-half .section-touch-bg .main-box-bg-left .chat-left-top:after {
    content: "";
    position: absolute;
    left: -12px;
    bottom: -21px;
    background: url("../img/case-study-details/ai-based-matrimony-app/blue-left-design.svg");
    background-repeat: no-repeat;
    width: 74px;
    height: 51px;
}

@media only screen and (max-width: 1199px) {
    .wrapper-better-half .section-touch-bg .main-box-bg-left .chat-left-top:after {
        display: none;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper-better-half .section-touch-bg .main-box-bg-left .chat-left-top:after {
        left: -7px;
    }
}

.wrapper-better-half .section-touch-bg .main-box-bg-left .chat-left-top:before {
    content: "";
    position: absolute;
    right: 70px;
    bottom: -30px;
    background: url("../img/case-study-details/ai-based-matrimony-app/oh.svg");
    background-repeat: no-repeat;
    width: 63px;
    height: 57px;
}

@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-touch-bg .main-box-bg-left .chat-left-top:before {
        display: none;
    }
}

.wrapper-better-half .section-touch-bg .main-box-bg-left .chat-left-top span {
    width: 98px;
    height: 95px;
    position: absolute;
    right: 0;
    bottom: 0;
}

.wrapper-better-half .section-touch-bg .main-box-bg-left .chat-left-top .chat-left-top-text {
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 31px;
    align-items: center;
    color: #fff;
}

@media only screen and (min-width: 1200px) and (max-width: 1660px) {
    .wrapper-better-half .section-touch-bg .main-box-bg-left .chat-left-top .chat-left-top-text {
        font-size: 18px;
        line-height: 28px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .wrapper-better-half .section-touch-bg .main-box-bg-left .chat-left-top .chat-left-top-text {
        font-size: 16px;
        line-height: 26px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-touch-bg .main-box-bg-left .chat-left-top .chat-left-top-text {
        font-size: 16px;
        line-height: 28px;
    }
}

.wrapper-better-half .section-touch-bg .main-box-bg-left-space {
    padding-left: 0px;
}

@media only screen and (max-width: 1365px) {
    .wrapper-better-half .section-touch-bg .main-box-bg-left-space {
        padding-left: 15px;
    }
}

.wrapper-better-half .section-touch-bg .main-box-bg-right {
    max-width: 845px;
    float: right;
    margin-top: 61px;
    margin-right: 22px;
    position: relative;
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
    .wrapper-better-half .section-touch-bg .main-box-bg-right {
        float: none;
        max-width: 835px;
        margin: 0 auto;
        margin-top: 61px;
    }
}
@media only screen and (max-width: 1199px) {
    .wrapper-better-half .section-touch-bg .main-box-bg-right {
        max-width: 870px;
        margin: 0 auto;
        float: none;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .wrapper-better-half .section-touch-bg .main-box-bg-right {
        padding-top: 50px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-touch-bg .main-box-bg-right {
        padding-top: 30px;
    }
}

.wrapper-better-half .section-touch-bg .main-box-bg-right:after {
    content: "";
    position: absolute;
    right: -20px;
    bottom: -22px;
    background: url("../img/case-study-details/ai-based-matrimony-app/red-right-design.svg");
    background-repeat: no-repeat;
    width: 77px;
    height: 59px;
}





@media only screen and (min-width: 1200px) and (max-width: 1600px) {
    .wrapper-better-half .section-touch-bg .main-box-bg-right:after {
        right: 70px;
        bottom: -25px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1660px) {
    .wrapper-better-half .section-touch-bg .main-box-bg-right:after {
        right: 0px;
        bottom: -26px;
    }
}
@media only screen and (max-width: 1199px) {
    .wrapper-better-half .section-touch-bg .main-box-bg-right:after {
        display: none;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper-better-half .section-touch-bg .main-box-bg-right:after {
        right: 7px;
        bottom: -26px;
    }
}

.wrapper-better-half .section-touch-bg .main-box-bg-right .chat-right-top {
    box-shadow: 0 9px 0 #000;
    background: linear-gradient(180deg, #ff548d 0%, #ff7aa6 100%);
    border-radius: 80px;
    padding: 32px 62px 32px 40px;
    display: flex;
    align-items: center;
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .wrapper-better-half .section-touch-bg .main-box-bg-right .chat-right-top {
        border-radius: 20px;
        padding: 25px 20px 25px 20px;
        box-shadow: 0 5px 0 #000;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-touch-bg .main-box-bg-right .chat-right-top {
        border-radius: 20px;
        padding: 25px 20px 25px 20px;
        box-shadow: 0 3px 0 #000;
    }
}

.wrapper-better-half .section-touch-bg .main-box-bg-right .chat-right-top span {
    width: 131px;
    height: 133px;
    position: absolute;
    left: 0;
    bottom: 0;
}

.wrapper-better-half .section-touch-bg .main-box-bg-right .chat-right-top .chat-right-top-text {
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 31px;
    text-align: right;
    color: #fff;
    letter-spacing: 0.2px;
}

@media only screen and (min-width: 1200px) and (max-width: 1660px) {
    .wrapper-better-half .section-touch-bg .main-box-bg-right .chat-right-top .chat-right-top-text {
        font-size: 18px;
        line-height: 28px;
        letter-spacing: normal;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .wrapper-better-half .section-touch-bg .main-box-bg-right .chat-right-top .chat-right-top-text {
        font-size: 16px;
        line-height: 26px;
        letter-spacing: normal;
        text-align: left;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-touch-bg .main-box-bg-right .chat-right-top .chat-right-top-text {
        font-size: 16px;
        line-height: 28px;
        letter-spacing: normal;
        text-align: left;
    }
}

.wrapper-better-half .section-touch-bg .main-box-bg-left-two {
    max-width: 835px;
    padding-top: 60px;
}



@media only screen and (min-width: 1200px) and (max-width: 1599px) {
    .wrapper-better-half .section-touch-bg .main-box-bg-left-two {
        margin: 0 auto;
    }
}
@media only screen and (max-width: 1199px) {
    .wrapper-better-half .section-touch-bg .main-box-bg-left-two {
        max-width: 870px;
        margin: 0 auto;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .wrapper-better-half .section-touch-bg .main-box-bg-left-two {
        padding-top: 50px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-touch-bg .main-box-bg-left-two {
        padding-top: 30px;
    }
}

.wrapper-better-half .section-touch-bg .main-box-bg-left-two .chat-left-top-two {
    background: linear-gradient(180deg, #7d5cff 0%, #aa95ff 106%);
    backdrop-filter: blur(10px);
    box-shadow: 0 9px 0 #000;
    border-radius: 80px;
    padding: 32px 50px 32px 60px;
    display: flex;
    align-items: center;
    position: relative;
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .wrapper-better-half .section-touch-bg .main-box-bg-left-two .chat-left-top-two {
        border-radius: 20px;
        padding: 25px 20px 25px 20px;
        box-shadow: 0 5px 0 #000;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-touch-bg .main-box-bg-left-two .chat-left-top-two {
        border-radius: 20px;
        padding: 25px 20px 25px 20px;
        box-shadow: 0 3px 0 #000;
    }
}

.wrapper-better-half .section-touch-bg .main-box-bg-left-two .chat-left-top-two:after {
    content: "";
    position: absolute;
    left: -12px;
    bottom: -23px;
    background: url("../img/case-study-details/ai-based-matrimony-app/blue-left-design.svg");
    background-repeat: no-repeat;
    width: 74px;
    height: 51px;
}

@media only screen and (max-width: 1199px) {
    .wrapper-better-half .section-touch-bg .main-box-bg-left-two .chat-left-top-two:after {
        display: none;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper-better-half .section-touch-bg .main-box-bg-left-two .chat-left-top-two:after {
        left: -7px;
    }
}

.wrapper-better-half .section-touch-bg .main-box-bg-left-two .chat-left-top-two:before {
    content: "";
    position: absolute;
    right: 70px;
    bottom: -32px;
    background-image: url("../img/case-study-details/ai-based-matrimony-app/star-smily.svg");
    background-repeat: no-repeat;
    width: 113px;
    height: 57px;
}

@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-touch-bg .main-box-bg-left-two .chat-left-top-two:before {
        display: none;
    }
}

.wrapper-better-half .section-touch-bg .main-box-bg-left-two .chat-left-top-two span {
    width: 98px;
    height: 95px;
    position: absolute;
    right: 0;
    bottom: 0;
}

.wrapper-better-half .section-touch-bg .main-box-bg-left-two .chat-left-top-two .chat-left-top-text-two {
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 31px;
    align-items: center;
    color: #fff;
}

@media only screen and (min-width: 1200px) and (max-width: 1660px) {
    .wrapper-better-half .section-touch-bg .main-box-bg-left-two .chat-left-top-two .chat-left-top-text-two {
        font-size: 18px;
        line-height: 28px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .wrapper-better-half .section-touch-bg .main-box-bg-left-two .chat-left-top-two .chat-left-top-text-two {
        font-size: 16px;
        line-height: 26px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-touch-bg .main-box-bg-left-two .chat-left-top-two .chat-left-top-text-two {
        font-size: 16px;
        line-height: 28px;
    }
}

.wrapper-better-half .section-emergence-bg {
    width: 100%;
    background: #fff;
    padding: 100px 0 80px 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .wrapper-better-half .section-emergence-bg {
       padding: 90px 0;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper-better-half .section-emergence-bg {
        padding-top: 70px;
        padding-bottom: 35px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-emergence-bg {
        padding: 50px 0 15px;
    }
}
@media only screen and (max-width:575px) {
    .wrapper-better-half .section-emergence-bg {
        padding: 35px 0 15px;
    }
}

.wrapper-better-half .section-emergence-bg .infinite {
    margin-top: 60px;
}

@media only screen and (max-width: 991px) {
    .wrapper-better-half .section-emergence-bg .infinite {
        margin-top: 50px;
    }
}

@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-emergence-bg .infinite {
        margin-top: 30px;
    }
}

.wrapper-better-half .section-emergence-bg .infinite img {
    width: 481px;
    aspect-ratio: auto 2.4416243655;
    height: auto;
    max-width: 100%;
}

@media only screen and (min-width: 992px) and (max-width: 1499px) {
    .wrapper-better-half .section-emergence-bg .infinite img {
        width: 300px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper-better-half .section-emergence-bg .infinite img {
        width: 280px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-emergence-bg .infinite img {
        width: 224px;
    }
}

.wrapper-better-half .section-emergence-bg .emergence-text {
    max-width: 1074px;
    margin: 50px auto 0;
    text-align: center;
}

@media only screen and (max-width: 991px) {
    .wrapper-better-half .section-emergence-bg .emergence-text {
        margin-top: 30px;
    }
}

.wrapper-better-half .two-section {
    width: 100%;
    position: relative;
}

@media only screen and (min-width: 1366px) and (max-width: 7000px) {
    .wrapper-better-half .two-section::after {
        content: "";
        position: absolute;
        background: url("../img/case-study-details/ai-based-matrimony-app/webp/infinite-border.webp");
        background-repeat: no-repeat;
        background-position: top center;
        top: 250px;
        height: 100vw;
        left: 0;
        right: 0;
    }
}

.wrapper-better-half .section-couple-bg {
    width: 100%;
    background: url("../img/case-study-details/ai-based-matrimony-app/webp/couple-bg.webp");
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 120px;
}

@media only screen and (max-width: 575px){
    .wrapper-better-half .section-couple-bg {
        padding-top: 80px;
    }
}

.wrapper-better-half .section-couple-bg .couple {
    padding-top: 20px;
    position: relative;
    right: -165px;
}

@media only screen and (max-width: 1365px) {
    .wrapper-better-half .section-couple-bg .couple {
        right: 0px;
    }
}

.wrapper-better-half .section-couple-bg .couple img {
    width: 1005px;
    aspect-ratio: auto 1.1809635723;
    height: auto;
    max-width: 100%;
}

.wrapper-better-half .section-responsibility {
    width: 100%;
    overflow: hidden;
    background: linear-gradient(180deg, #1b0916 0%, #15012f 100%);
    height: 100%;
    position: relative;
    color: #fff;
}
@media only screen and (max-width: 1199px){
    .wrapper-better-half .section-responsibility{
        padding: 90px 0 0;
    }
}
@media only screen and (max-width: 991px){
    .wrapper-better-half .section-responsibility{
        padding: 70px 0 0;
    }
}

@media only screen and (max-width: 767px){
    .wrapper-better-half .section-responsibility{
        padding: 50px 0;
    }
}
@media only screen and (max-width: 575px){
    .wrapper-better-half .section-responsibility{
        padding: 35px 0;
    }
}
.wrapper-better-half .section-responsibility:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    background: url("../img/case-study-details/ai-based-matrimony-app/webp/doted.webp");
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}
.wrapper-better-half .section-responsibility .container{position: relative;z-index: 9;}

.wrapper-better-half .section-responsibility .wedding-process-top {
    margin-top: 120px;
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
    .wrapper-better-half .section-responsibility .wedding-process-top {
        margin-top: 30px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .wrapper-better-half .section-responsibility .wedding-process-top {
        margin-top: 20px;
    }
}
@media only screen and (min-width:576px) and (max-width: 767px) {
    .wrapper-better-half .section-responsibility .wedding-process-top {
        max-width: 540px;
        margin: 20px auto 0;
    }
}
@media only screen and (max-width: 575px) {
    .wrapper-better-half .section-responsibility .wedding-process-top {
        margin-top: 15px;
    }
}

.wrapper-better-half .section-responsibility .when-title {
    color: #fff;
    padding-top: 80px;
    position: relative;
    z-index: 2;
}

@media only screen and (min-width: 1366px) and (max-width: 1599px) {
    .wrapper-better-half .section-responsibility .when-title {
        padding-top: 90px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .wrapper-better-half .section-responsibility .when-title {
        padding-top: 60px;
    }
}
@media only screen and (max-width: 1199px) {
    .wrapper-better-half .section-responsibility .when-title {
        padding-top: 0;
    }
}

.wrapper-better-half .section-responsibility .when {
    display: block;
    text-shadow: none;
    color: #fff;
}

.wrapper-better-half .section-responsibility .infinite-half {
    margin-top: 80px;
}

@media only screen and (min-width: 992px) and (max-width: 1499px) {
    .wrapper-better-half .section-responsibility .infinite-half {
        margin-top: 55px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper-better-half .section-responsibility .infinite-half {
        margin-top: 50px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-responsibility .infinite-half {
        margin-top: 0px;
        margin-bottom:30px;
    }
}

.wrapper-better-half .section-responsibility .infinite-half img {
    width: 329px;
    aspect-ratio: auto 2.4552238806;
    height: auto;
    max-width: 100%;
}

@media only screen and (min-width: 1366px) and (max-width: 7000px) {
    .wrapper-better-half .section-responsibility .infinite-half img {
        display: none;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper-better-half .section-responsibility .infinite-half img {
        width: 280px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-responsibility .infinite-half img {
        width: 224px;
        text-align: center;
        display: inline-block;
        margin-top: 30px;
    }
}

.wrapper-better-half .section-responsibility .development {
    max-width: 1185px;
    color: #fff;
    font-family: "Ubuntu";
    font-style: normal;
    font-weight: 500;
    font-size: 30px;
    line-height: 40px;
    text-align: left;
    margin-top: 80px;
    margin-bottom: 50px;
    z-index: 1;
    position: relative;
}
@media only screen and (min-width: 1366px) and (max-width: 7000px) {
    .wrapper-better-half .section-responsibility .development {
        margin-top: 230px;
    }
}

@media only screen and (min-width: 1366px) and (max-width: 1800px) {
    .wrapper-better-half .section-responsibility .development {
        margin-top: 200px;
    }
}

@media only screen and (min-width: 1801px) {
    .wrapper-better-half .section-responsibility .development {
        margin-top: 230px;
    }
}


@media only screen and (min-width: 992px) and (max-width: 1365px) {
    .wrapper-better-half .section-responsibility .development {
        font-size: 26px;
        line-height: 36px;
        margin-top: 50px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper-better-half .section-responsibility .development {
        font-size: 20px;
        line-height: 30px;
        margin-top: 50px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-responsibility .development {
        font-size: 20px;
        line-height: 30px;
        text-align: center;
        margin: 0 0 15px;
    }
}
.wrapper-better-half .section-responsibility .development-gray {
    color: #b6b6b6;
    text-align: left;
}
@media only screen and (max-width: 767px){
    .wrapper-better-half .section-responsibility .development-gray {
        text-align: center;
    }
}

.wrapper-better-half .section-responsibility .implementation {
    padding-bottom: 28px;
    position: relative;
    z-index: 1;
    display: flex;
}

@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-responsibility .implementation {
        margin: 0 0 15px;
        padding: 0;
    }
}

.wrapper-better-half .section-responsibility .arrow-view {
    margin-right: 50px;
    margin-top: 5px;
    flex: 0 0 auto;
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .wrapper-better-half .section-responsibility .arrow-view {
        margin-right: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-responsibility .arrow-view {
        display: none;
    }
}

.wrapper-better-half .section-responsibility .arrow-view img {
    width: 190px;
    aspect-ratio: auto 7.9166666667;
    height: auto;
    max-width: 100%;
}


.wrapper-better-half .section-responsibility .wedding-process {
    padding-left: 0;
    position: relative;
}

@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-responsibility .wedding-process {
        padding-left: 15px;
        margin-top: 0px;
    }
}

.wrapper-better-half .section-responsibility .wedding-process .round-shadow{
    width: 477px;
    height: 477px;
    position: absolute;
    right: -100px;
    top: -100px;
    border-radius: 99em;
    background-color: #FF00B8;
    filter: blur(800px);
}

@media only screen and (max-width: 991px){
    .wrapper-better-half .section-responsibility .wedding-process .round-shadow{
       top: 50%;
        transform: translateY(-50%);
        left: 0;
        right: 0;
        margin: 0 auto;
    }
}

.wrapper-better-half .section-responsibility .the-process {
    width: 100%;
    position: relative;
    max-height: 1000px;
}

.wrapper-better-half .section-responsibility .the-process .bedding-set {
    margin-top: 1px;
    position: relative;
    z-index: 99;
}

.wrapper-better-half .section-responsibility .the-process .bedding-set img {
    width: 726px;
    aspect-ratio: auto 0.7231075697;
    height: auto;
    max-width: 100%;
}

.wrapper-better-half .section-responsibility .bgwite {
    background: #fff;
}

@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-responsibility .bgwite {
        display: none;
    }
}

.wrapper-better-half .section-responsibility .design-bottom {
    padding-top: 0px;
    margin-top: -110px;
    background: #fff;
    width: 100%;
    position: relative;
}

@media only screen and (max-width: 575px) {
    .wrapper-better-half .section-responsibility .design-bottom {
        background: none;
    }
}

@media only screen and (min-width: 300px) and (max-width: 1365px) {
    .wrapper-better-half .section-responsibility .design-bottom {
        margin-top: -4px;
    }
}

.wrapper-better-half .section-responsibility .design-bottom:before{
    content: '';
    position: absolute;
    background: url("../img/case-study-details/ai-based-matrimony-app/webp/design-new.webp") no-repeat;
    width: 1920px;
    height: 92px;
    right: 0;
    top: -92px;
    background-size: cover;
}

@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-responsibility .design-bottom:before{
        display: none;
    }
}
.wrapper-better-half .section-responsibility .design-bottom img {
    width:1920px;
    aspect-ratio: auto 13.42;
    height: auto;
    max-width: 100%;
}

.wrapper-better-half .section-responsibility .the-process-seck {
    max-width: 740px;
    margin-top: 60px;
    margin-left: 80px;
    position: relative;
    z-index: 2;
    padding-bottom: 90px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper-better-half .section-responsibility .the-process-seck {
        margin-left: 15px;
        margin-top: 35px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-responsibility .the-process-seck {
        margin-top: 0;
        margin-left: 0;
        padding: 35px 0 0;
    }
}

@media only screen and (max-width: 575px) {
    .wrapper-better-half .section-responsibility .the-process-seck {
        padding: 35px 0 0;
    }
}

.wrapper-better-half .section-responsibility .the-process-seck .the-process-text {
    font-family: "Ubuntu";
    font-style: normal;
    font-weight: 600;
    font-size: 38px;
    line-height: 55px;
    text-transform: uppercase;
    color: #fff;
}


@media only screen and (min-width: 1600px) and (max-width: 1840px) {
    .wrapper-better-half .section-responsibility .the-process-seck .the-process-text {
        padding-left: 0;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1599px) {
    .wrapper-better-half .section-responsibility .the-process-seck .the-process-text {
        font-size: 28px;
        line-height: 42px;
        padding-left: 0;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .wrapper-better-half .section-responsibility .the-process-seck .the-process-text {
        font-size: 26px;
        line-height: 40px;
        padding-left: 0;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper-better-half .section-responsibility .the-process-seck .the-process-text {
        font-size: 17px;
        line-height: 32px;
        padding-left: 0;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-responsibility .the-process-seck .the-process-text {
        font-size: 16px;
        line-height: 30px;
        text-align: center;
    }
}

.wrapper-better-half .section-responsibility .the-process-seck .the-process-text span {
    color: #ff5b91;
    font-style: italic;
}

.wrapper-better-half .section-responsibility .partner {
    margin-top: 70px;
}

@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-responsibility .partner {
        display: none;
    }
}

.wrapper-better-half .section-responsibility .partner img {
    width: 783px;
    aspect-ratio: auto 2.8267148014;
    height: auto;
    max-width: 100%;
}

@media only screen and (min-width: 1600px) and (max-width: 6000px) {
    .wrapper-better-half .section-responsibility .partner img {
        margin-left: -10px;
    }
}

.wrapper-better-half .section-responsibility .custom-div {
    width: calc((100vw + 1140px) / 2);
    margin-right: auto;
}

@media only screen and (min-width: 1600px) {
    .wrapper-better-half .section-responsibility .custom-div {
        width: calc((100vw + 1240px) / 2);
        margin-right: auto;
    }
}
@media only screen and (min-width: 1200px) {
    .wrapper-better-half .section-responsibility .custom-div {
        width: calc((100vw + 1250px) / 2);
        margin-right: auto;
    }
}
@media only screen and (min-width: 960px) {
    .wrapper-better-half .section-responsibility .custom-div {
        width: calc((100vw + 100%) / 2);
        margin-right: auto;
    }
}

@media only screen and (min-width: 768px) {
    .wrapper-better-half .section-responsibility .custom-div {
        width: calc((100vw + 100%) / 2);
        margin-right: auto;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-responsibility .custom-div {
        width: initial;
        margin-left: -15px;
        margin-right: -15px;
    }
}
.wrapper-better-half .section-after-getting {
    width: 100%;
    background: #fff;
    margin-top: -90px;
    padding-top: 10px;
    padding-bottom: 20px;
    position: relative;
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
    .wrapper-better-half .section-after-getting {
        padding-bottom: 50px;
    }
}
@media only screen and (max-width:1199px) {
    .wrapper-better-half .section-after-getting {
        padding: 90px 0;
        margin-top: 0;
    }
}
@media only screen and (max-width:991px) {
    .wrapper-better-half .section-after-getting {
        padding: 70px 0;
    }
}

@media only screen and (max-width:767px) {
    .wrapper-better-half .section-after-getting {
        padding: 50px 0;
    }
}

@media only screen and (max-width: 575px) {
    .wrapper-better-half .section-after-getting {
        padding: 35px 0;
    }
}

.wrapper-better-half .section-after-getting .text-images {
    align-items: center;
}

@media only screen and (min-width: 1366px) and (max-width: 6000px) {
    .wrapper-better-half .section-after-getting .text-images {
        align-items: normal;
    }
}

.wrapper-better-half .section-after-getting .mockup-mobile {
    margin-top: 10px;
    position: relative;
    z-index: 999;
}

@media only screen and (min-width: 1366px) and (max-width: 6000px) {
    .wrapper-better-half .section-after-getting .mockup-mobile {
        position: absolute;
        top: -35%;
        left: 28%;
    }
}

@media only screen and (min-width: 1600px) and (max-width: 1699px) {
    .wrapper-better-half .section-after-getting .mockup-mobile {
        top: -32%;
    }
}
@media only screen and (min-width: 1366px) and (max-width: 1499px) {
    .wrapper-better-half .section-after-getting .mockup-mobile {
        top: -32%;
    }
}

@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-after-getting .mockup-mobile {
        text-align: center;
        margin-top: 0;
        margin-bottom: 20px;
    }
}

.wrapper-better-half .section-after-getting .mockup-mobile img {
    width: 400px;
    aspect-ratio: auto 0.5813953488;
    height: auto;
    max-width: 100%;
}
@media only screen and (min-width: 1500px) and (max-width: 1799px) {
    .wrapper-better-half .section-after-getting .mockup-mobile img {
        max-width: 90%;
    }
}
@media only screen and (min-width: 1366px) and (max-width: 1499px) {
    .wrapper-better-half .section-after-getting .mockup-mobile img {
        max-width: 80%;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .wrapper-better-half .section-after-getting .mockup-mobile img {
        max-width: 40%;
    }
}
@media only screen and (max-width: 575px) {
    .wrapper-better-half .section-after-getting .mockup-mobile img {
        max-width: 60%;
    }
}

.wrapper-better-half .section-after-getting .mockup-mobile:after {
    width: 440px;
    height: 220px;
    position: absolute;
    content: "";
    background-image: url("../img/case-study-details/ai-based-matrimony-app/mobile-shadow.svg");
    background-repeat: no-repeat;
    z-index: 1;
    left: -271px;
    bottom: 0;
}

@media only screen and (max-width: 1599px) {
    .wrapper-better-half .section-after-getting .mockup-mobile:after {
        display: none;
    }
}

.wrapper-better-half .section-after-getting .after-getting-text {
    max-width: 600px;
    text-align: right;
    padding-right: 33px;
    position: relative;
    letter-spacing: -0.4px;
    height: 100%;
    margin-left: auto;
}

@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-after-getting .after-getting-text {
        max-width: 100%;
        text-align: center;
        padding: 0;
    }
}

.wrapper-better-half .section-after-getting .after-getting-text:after {
    content: "";
    background: linear-gradient(180deg, #ff5b91 50%, #8467f9 50%);
    right: 0;
    top: 0;
    height: 100%;
    width: 7px;
    position: absolute;
}

@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-after-getting .after-getting-text:after {
        display: none;
    }
}

.wrapper-better-half .section-after-getting .top-space {
    padding-top: 210px;
}

@media only screen and (min-width: 1366px) and (max-width: 1499px) {
    .wrapper-better-half .section-after-getting .top-space {
        padding-top: 110px;
    }
}
@media only screen and (min-width: 1201px) and (max-width: 1365px) {
    .wrapper-better-half .section-after-getting .top-space {
        padding-top: 36px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .wrapper-better-half .section-after-getting .top-space {
        padding-top: 35px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper-better-half .section-after-getting .top-space {
        padding-top: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-after-getting .top-space {
        padding-top: 0;
    }
}

.wrapper-better-half .section-after-getting .personal-loan-text-box {
    width: 100%;
    margin-top: 30px;
}

@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-after-getting .personal-loan-text-box {
        margin-top: 21px;
    }
}

.wrapper-better-half .section-after-getting .personal-loan-text-box .personal-loan-text {
    max-width: 490px;
    position: relative;
    height: 100%;
    line-height: 36px;
    margin-bottom: 25px;
    padding: 10px 0px 10px 34px;
}

@media only screen and (min-width: 1600px) and (max-width: 1800px) {
    .wrapper-better-half .section-after-getting .personal-loan-text-box .personal-loan-text {
        line-height: 32px;
        margin-bottom: 0px;
        padding: 0px 0px 0px 34px;
    }
}
@media only screen and (min-width: 1367px) and (max-width: 1599px) {
    .wrapper-better-half .section-after-getting .personal-loan-text-box .personal-loan-text {
        line-height: 32px;
        margin-bottom: 0px;
        padding: 0px 0px 0px 34px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1366px) {
    .wrapper-better-half .section-after-getting .personal-loan-text-box .personal-loan-text {
        line-height: 32px;
        margin-bottom: 0px;
        padding: 0px 0px 0px 34px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .wrapper-better-half .section-after-getting .personal-loan-text-box .personal-loan-text {
        line-height: 28px;
        margin-bottom: 0px;
        padding: 0px 0px 0px 34px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper-better-half .section-after-getting .personal-loan-text-box .personal-loan-text {
        line-height: 26px;
        margin-bottom: 0px;
        padding: 0px 0px 0px 34px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-after-getting .personal-loan-text-box .personal-loan-text {
        max-width: 100%;
        text-align: center;
        margin-bottom: 10px;
        margin-top: 0;
        line-height: 25px;
        padding: 0;
    }
}

.wrapper-better-half .section-after-getting .personal-loan-text-box .personal-loan-text:after {
    content: "";
    background: linear-gradient(180deg, #ff5b91 50%, #8467f9 50%);
    left: 0;
    top: 0;
    height: 100%;
    width: 7px;
    position: absolute;
}

@media only screen and (min-width: 1600px) and (max-width: 6000px) {
    .wrapper-better-half .section-after-getting .personal-loan-text-box .personal-loan-text:after {
        margin-right: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-after-getting .personal-loan-text-box .personal-loan-text:after {
        display: none;
        padding-right: 0;
    }
}

.wrapper-better-half .section-after-getting .personal-loan-images {
    margin-top: 48px;
}

@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-after-getting .personal-loan-images {
        text-align: center;
        margin-top: 20px;
    }
}

.wrapper-better-half .section-after-getting .personal-loan-images img {
    width: 529px;
    aspect-ratio: auto 0.834384858;
    height: auto;
    max-width: 100%;
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-after-getting .personal-loan-images img {
        width: 100%;
    }
}

.wrapper-better-half .section-after-getting .personal-loan-chat {
    margin-top: 20px;
    text-align: right;
}

@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-after-getting .personal-loan-chat {
        text-align: center;
        border-bottom: solid 1px #ddd;
        padding-bottom: 30px;
        margin-top: 30px;
    }
}

.wrapper-better-half .section-after-getting .personal-loan-chat img {
    width: 671px;
    aspect-ratio: auto 0.8113663845;
    height: auto;
    max-width: 100%;
}

.wrapper-better-half .section-when-better-gb {
    width: 100%;
    margin-top: 150px;
    height: 100%;
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
    .wrapper-better-half .section-when-better-gb {
        margin-top: 5px;
    }
}
@media only screen and (max-width: 1199px) {
    .wrapper-better-half .section-when-better-gb {
        margin-top: 0;
    }
}

.wrapper-better-half .section-when-better-gb .when-better-in {
    width: 100%;
    background: url("../img/case-study-details/ai-based-matrimony-app/webp/imagwbg.webp") no-repeat;
    background-size: cover;
    padding-top: 50px;
    height: 112%;
    position: relative;
}

@media only screen and (max-width: 1199px) {
    .wrapper-better-half .section-when-better-gb .when-better-in {
        background-size: cover;
        background-position: top center;
        height: 619px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper-better-half .section-when-better-gb .when-better-in {
        height: 430px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-when-better-gb .when-better-in {
        background-size: cover;
        height: 300px;
    }
}
@media only screen and (max-width: 575px) {
    .wrapper-better-half .section-when-better-gb .when-better-in {
        height: 330px;
        padding-top: 22px;
        padding-bottom: 0;
        display: flex;
        align-items: center;
    }
}

@media only screen and (max-width: 480px) {
    .wrapper-better-half .section-when-better-gb .when-better-in {
        background-position: center center;
    }
}


.wrapper-better-half .section-when-better-gb .when-better-in::after {
    width: 87px;
    content: "";
    position: absolute;
    background: url("../img/case-study-details/ai-based-matrimony-app/webp/arrowwithcurve.webp") no-repeat;
    background-repeat: no-repeat;
    left: 30px;
    top: 218px;
    height: 451px;
    max-height: 100%;
    z-index: 4;
}

@media only screen and (max-width: 1199px) {
    .wrapper-better-half .section-when-better-gb .when-better-in::after {
        display: none;
    }
}

.wrapper-better-half .section-when-better-gb .when-better-in .content-box {
    margin-top: 65px;
    margin-left: 60px;
}

@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-when-better-gb .when-better-in .content-box {
        margin-top: 0px;
        margin-left: 15px;
    }
}

@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-when-better-gb .when-better-in .content-box .contemporary{
        text-align: left;
    }
}

.wrapper-better-half .section-when-better-gb .white-bg-box {
    max-width: 1045px;
    background: #fff;
    border-radius: 0 30px 30px 0;
    padding: 40px 40px 30px 153px;
    position: relative;
    z-index: 3;
}
@media only screen and (min-width: 1200px) and (max-width: 6000px) {
    .wrapper-better-half .section-when-better-gb .white-bg-box {
        padding: 40px 20px 30px 153px;
        border-radius: 0 50px 30px 0;
        margin-top: -140px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .wrapper-better-half .section-when-better-gb .white-bg-box {
        padding: 40px 1px 15px 1px;
        border-radius: 0;
    }
}
@media only screen and (max-width:767px) {
    .wrapper-better-half .section-when-better-gb .white-bg-box {
        padding:35px 0 0;
    }
}
@media only screen and (max-width:575px) {
    .wrapper-better-half .section-when-better-gb .white-bg-box {
        padding: 25px 0 0 0;
        border-radius: 0;
        text-align: center;
    }
}

.wrapper-better-half .section-when-better-gb .first-things {
    margin: 30px 0;
}
@media only screen and (max-width: 991px) {
    .wrapper-better-half .section-when-better-gb .first-things {
        margin: 15px 0;
    }
}

.wrapper-better-half .mobile-screen-outer{
    position: relative;
}

.wrapper-better-half .section-female-users {
    width: 100%;
    margin-top: 380px;
    background: #fff;
    overflow: hidden;
    padding: 50px 0 250px;
    position: relative;
    z-index: 999;
}
@media only screen and (min-width: 2501px) {
    .wrapper-better-half .section-female-users {
        padding: 50px 0 630px;
    }
}
@media only screen and (min-width: 2301px) and (max-width: 2500px) {
    .wrapper-better-half .section-female-users {
        padding: 50px 0 450px;
    }
}
@media only screen and (min-width: 1921px) and (max-width: 2300px) {
    .wrapper-better-half .section-female-users {
        padding: 50px 0 350px;
    }
}
@media only screen and (min-width: 1600px) and (max-width: 1699px) {
    .wrapper-better-half .section-female-users {
        padding: 50px 0 150px;
    }
}
@media only screen and (min-width: 1366px) and (max-width: 1599px) {
    .wrapper-better-half .section-female-users {
        margin-top: 365px;
        padding: 50px 0 150px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .wrapper-better-half .section-female-users {
        margin-top: 360px;
        padding-bottom: 20px;
    }
}
@media only screen and (max-width: 1199px) {
    .wrapper-better-half .section-female-users {
        margin-top: 0;
        padding:90px 0;
    }
}

@media only screen and (max-width: 991px) {
    .wrapper-better-half .section-female-users {
        padding:70px 0;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-female-users {
        padding:50px 0;
    }
}

@media only screen and (max-width: 575px) {
    .wrapper-better-half .section-female-users {
        padding:35px 0;
    }
}


.wrapper-better-half .section-female-users .desktop-big {
    padding-right: 0px;
}

@media only screen and (min-width: 300px) and (max-width: 1365px) {
    .wrapper-better-half .section-female-users .desktop-big {
        padding-right: 15px;
    }
}

.wrapper-better-half .section-female-users .custom-div {
    width: calc((100vw + 1140px) / 2);
    margin-right: auto;
    padding-bottom: 0;
}

@media only screen and (min-width: 1600px) {
    .wrapper-better-half .section-female-users .custom-div {
        width: calc((100vw + 1240px) / 2);
        margin-right: auto;
    }
}
@media only screen and (min-width: 1200px) {
    .wrapper-better-half .section-female-users .custom-div {
        width: calc((100vw + 1250px) / 2);
        margin-right: auto;
    }
}
@media only screen and (min-width: 960px) {
    .wrapper-better-half .section-female-users .custom-div {
        width: calc((100vw + 100%) / 2);
        margin-right: auto;
    }
}

@media only screen and (min-width: 768px) {
    .wrapper-better-half .section-female-users .custom-div {
        width: calc((100vw + 100%) / 2);
        margin-right: auto;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-female-users .custom-div {
        width: initial;
        margin-left: 0;
        margin-right: 0;
    }
}
.wrapper-better-half .section-female-users .desktop-view {
    margin-top: 40px;
    position:relative;
    margin-right: 80px;
}

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .wrapper-better-half .section-female-users .desktop-view {
        margin-right: 30px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .wrapper-better-half .section-female-users .desktop-view {
        margin-right: 0;
    }
}

@media only screen and (max-width: 991px) {
    .wrapper-better-half .section-female-users .desktop-view {
        margin: 0;
    }
}

.wrapper-better-half .section-female-users .desktop-view img {
    width: 919px;
    aspect-ratio: auto 1.1152912621;
    height: auto;
    max-width: 100%;
    margin-left: -60px;
    position: absolute;
    left: 0;
    top: 0;
}

@media only screen and (max-width: 1199px) {
    .wrapper-better-half .section-female-users .desktop-view img {
        margin-left: 0;
        position: relative;
    }
}

@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-female-users .desktop-view img {

    }
}
.wrapper-better-half .section-female-users .another-text{
    padding: 0 0 85px;
    margin-left: -70px;
}

@media only screen and (min-width: 1800px) and (max-width: 7000px) {
    .wrapper-better-half .section-female-users .another-text {
        padding-left: 0 !important;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .wrapper-better-half .section-female-users .another-text {
        margin-left: -15px;
    }
}
@media only screen and (max-width: 1199px) {
    .wrapper-better-half .section-female-users .another-text {
        margin-left: 0;
        padding: 0 0 0 15px;
    }
}
@media only screen and (max-width: 575px) {
    .wrapper-better-half .section-female-users .another-text {
        padding-left: 0;
    }
}
.wrapper-better-half .section-female-users .milestone-text-box-top {
    max-width: 700px;
    padding-top: 50px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper-better-half .section-female-users .milestone-text-box-top {
        padding-top: 0;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-female-users .milestone-text-box-top {
        max-width: 100%;
        padding-top: 15px;
        text-align: center;
    }
}

.wrapper-better-half .section-female-users .milestone-text-box {
    max-width: 700px;
    padding-top: 30px;
    padding-bottom: 16px;
}
@media only screen and (max-width: 991px) {
    .wrapper-better-half .section-female-users .milestone-text-box {
        padding: 15px 0;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-female-users .milestone-text-box {
        padding: 0;
        margin: 15px 0;
        max-width: none;
        text-align: center;
    }
}
.wrapper-better-half .section-female-users .botton-main-bottom-bg {
    width: 100%;
    background: rgba(132, 103, 249, 0.3);
    padding: 48px 0 !important;
    position: relative;
    top: 0;
    z-index: -1;
}


@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .wrapper-better-half .section-female-users .botton-main-bottom-bg {
        padding: 40px 0 !important;
    }
}
@media only screen and (max-width: 1199px) {
    .wrapper-better-half .section-female-users .botton-main-bottom-bg {
        background: none;
        display: none;
    }
}

.wrapper-better-half .section-female-users .botton-main-bottom-bg .four-am-btn-box-new {
    max-width: 680px;
    margin-top: 8px;
    margin-left: -70px;
}

@media only screen and (max-width: 1199px) {
    .wrapper-better-half .section-female-users .botton-main-bottom-bg .four-am-btn-box-new {
        display: none;
    }
}

.wrapper-better-half .section-female-users .botton-main-bottom-bg .four-am-btn-box-new .four-am-btn-new-big {
    background: #ff5b91;
    border-radius: 90px;
    box-shadow: 0px -7px 0px 0px #000;
    font-family: "Ubuntu";
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 34px;
    text-transform: capitalize;
    color: #fff;
    text-decoration: none;
    border-bottom: solid 7px #000;
    padding: 30px 2px 33px 40px;
    display: flex;
    align-items: center;
    margin-right: 7px;
}


@media only screen and (min-width: 1366px) and (max-width: 1440px) {
    .wrapper-better-half .section-female-users .botton-main-bottom-bg .four-am-btn-box-new .four-am-btn-new-big {
        font-size: 23px;
        line-height: 35px;
        padding: 14px 55px 20px 30px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .wrapper-better-half .section-female-users .botton-main-bottom-bg .four-am-btn-box-new .four-am-btn-new-big {
        font-size: 22px;
        line-height: 35px;
        padding: 14px 30px 20px 30px;
    }
}

.wrapper-better-half .section-female-users .botton-main-bottom-bg .four-am-btn-box-new .four-am-btn-new-big span {
    font-family: "TT Norms Pro";
    font-style: normal;
    font-weight: 700;
    font-size: 99px;
    line-height: 70px;
    color: #fff;
    margin-right: 32px;
    text-shadow: 4px 5px 0px #000;
}

@media only screen and (min-width: 1600px) and (max-width: 1800px) {
    .wrapper-better-half .section-female-users .botton-main-bottom-bg .four-am-btn-box-new .four-am-btn-new-big span {
        font-size: 80px;
    }
}
@media only screen and (min-width: 1367px) and (max-width: 1599px) {
    .wrapper-better-half .section-female-users .botton-main-bottom-bg .four-am-btn-box-new .four-am-btn-new-big span {
        font-size: 80px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1366px) {
    .wrapper-better-half .section-female-users .botton-main-bottom-bg .four-am-btn-box-new .four-am-btn-new-big span {
        font-size: 80px;
    }
}

.wrapper-better-half .section-female-users .botton-main-bottom-bg .four-am-btn-box-new .four-am-btn-new-big .btn-hart {
    font-size: 0;
    position: relative;
    top: 25px;
    right: 35px;
}


@media only screen and (min-width: 576px) and (max-width: 1499px) {
    .wrapper-better-half .section-female-users .botton-main-bottom-bg .four-am-btn-box-new .four-am-btn-new-big .btn-hart {
        margin-right: 10px;
        font-size: 0;
    }
}
@media only screen and (min-width: 300px) and (max-width: 576px) {
    .wrapper-better-half .section-female-users .botton-main-bottom-bg .four-am-btn-box-new .four-am-btn-new-big .btn-hart {
        top: 20px;
        right: 25px;
    }
}

.wrapper-better-half .section-female-users .botton-main-bottom-bg .four-am-btn-box-new .four-am-btn-new-big .btn-hart img {
    width: 54px;
    aspect-ratio: auto 1;
    height: auto;
    max-width: 100%;
}

@media only screen and (max-width: 1199px) {
    .wrapper-better-half .section-female-users .botton-main-bottom-bg {
        display: none;
    }
}

.wrapper-better-half .section-female-users .botton-main-bottom-bg .four-am-btn-new {
    display: none;
    font-size: 0;
}

.wrapper-better-half .section-female-users .four-am-btn-box {
    max-width: 678px;
    margin-top: 8px;
    display: none;
}

@media only screen and (max-width: 1199px) {
    .wrapper-better-half .section-female-users .four-am-btn-box {
        margin-top: 60px;
        display: none;
    }
}
@media only screen and (max-width: 1199px) {
    .wrapper-better-half .section-female-users .four-am-btn-box {
        margin-top: 30px;
        display: block;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-female-users .four-am-btn-box {
        margin-top: 25px;
        margin-bottom: 0;
        max-width: none;
    }
}


.wrapper-better-half .section-female-users .four-am-btn-box .four-am-btn {
    background: #ff5b91;
    border-radius: 90px;
    box-shadow: 0px -7px 0px 0px #000;
    font-family: "Ubuntu";
    font-style: normal;
    font-weight: 400;
    font-size: 23px;
    line-height: 36px;
    text-transform: capitalize;
    color: #fff;
    text-decoration: none;
    border-bottom: solid 7px #000;
    padding: 25px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media only screen and (min-width: 1600px) and (max-width: 1800px) {
    .wrapper-better-half .section-female-users .four-am-btn-box .four-am-btn {
        font-size: 22px;
        line-height: 32px;
        padding: 18px 18px;
        box-shadow: 0px -4px 0px 0px #000;
        border-bottom: solid 4px #000;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1599px) {
    .wrapper-better-half .section-female-users .four-am-btn-box .four-am-btn {
        font-size: 18px;
        line-height: 32px;
        padding: 16px 18px;
        box-shadow: 0px -4px 0px 0px #000;
        border-bottom: solid 4px #000;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .wrapper-better-half .section-female-users .four-am-btn-box .four-am-btn {
        font-size: 18px;
        line-height: 26px;
        padding: 16px 25px;
        box-shadow: 0px -4px 0px 0px #000;
        border-bottom: solid 4px #000;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper-better-half .section-female-users .four-am-btn-box .four-am-btn {
        font-size: 17px;
        line-height: 24px;
        padding: 10px 15px 10px 15px;
        box-shadow: 0px -2px 0px 0px #000;
        border-bottom: solid 2px #000;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-female-users .four-am-btn-box .four-am-btn {
        margin: 35px auto 0;
        font-size: 18px;
        line-height: 26px;
        padding: 6px 15px;
        max-width: 80%;
        box-shadow: 0px -2px 0px 0px #000;
    }
}
@media only screen and (max-width: 575px) {
    .wrapper-better-half .section-female-users .four-am-btn-box .four-am-btn {
        font-size: 16px;
        line-height: 22px;
        padding: 14px;
        box-shadow: 0px -2px 0px 0px #000;
        border-bottom: solid 2px #000;
        max-width: 100%;
    }
}
.wrapper-better-half .section-female-users .four-am-btn-box .four-am-btn .btn-hart {
    font-size: 0;
    position: relative;
    top: 25px;
    right: 35px;
}

@media only screen and (min-width: 768px) and (max-width: 1800px) {
    .wrapper-better-half .section-female-users .four-am-btn-box .four-am-btn .btn-hart {
        display: none;
    }
}
@media only screen and (min-width: 576px) and (max-width: 1499px) {
    .wrapper-better-half .section-female-users .four-am-btn-box .four-am-btn .btn-hart {
        margin-right: 10px;
        font-size: 0;
    }
}
@media only screen and (max-width: 575px) {
    .wrapper-better-half .section-female-users .four-am-btn-box .four-am-btn .btn-hart {
        display: none;
    }
}


.wrapper-better-half .section-female-users .four-am-btn-box .four-am-btn .btn-hart img {
    width: 54px;
    aspect-ratio: auto 1;
    height: auto;
    max-width: 100%;
}

@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-female-users .four-am-btn-box .four-am-btn .btn-hart img {
        display: none;
    }
}



.wrapper-better-half .section-female-users .four-am-btn-box .four-am-btn .numb {
    font-family: "TT Norms Pro";
    font-style: normal;
    font-weight: 700;
    font-size: 96px;
    line-height: 70px;
    color: #fff;
    margin-right: 10px;
    text-shadow: 3px 4px 0px #000;
}

@media only screen and (min-width: 1801px) {
    .wrapper-better-half .section-female-users .four-am-btn-box .four-am-btn .numb {
        text-shadow: 3px 5px 0 #000;
        margin-right: 15px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1800px) {
    .wrapper-better-half .section-female-users .four-am-btn-box .four-am-btn .numb {
        font-size: 64px;
        line-height: 64px;
        margin-right: 20px;
        text-shadow: 3px 5px 0 #000;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .wrapper-better-half .section-female-users .four-am-btn-box .four-am-btn .numb {
        font-size: 44px;
        line-height: 44px;
        margin-right: 14px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper-better-half .section-female-users .four-am-btn-box .four-am-btn .numb {
        font-size: 37px;
        line-height: 60px;
        margin-right: 10px;
    }
}
@media only screen and (min-width: 425px) and (max-width: 767px) {
    .wrapper-better-half .section-female-users .four-am-btn-box .four-am-btn .numb {
        font-size: 32px;
        line-height: 68px;
        margin-right: 16px;
    }
}
@media only screen and (max-width: 424px) {
    .wrapper-better-half .section-female-users .four-am-btn-box .four-am-btn .numb {
        font-size: 28px;
        line-height: 36px;
        margin-right: 9px;
    }
}

.wrapper-better-half .section-technology-stack {
    width: 100%;
    background: #fff;
    margin-top: 0;
    position: relative;
    z-index: 1;
}


@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .wrapper-better-half .section-technology-stack {
        /*padding-top: 16px;*/
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper-better-half .section-technology-stack {
        /*padding-top: 10px;*/
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-technology-stack {
        padding-top: 50px;
        border-top: solid 1px #ddd;
    }
}
@media only screen and (max-width: 575px) {
    .wrapper-better-half .section-technology-stack {
        padding-top: 35px;
    }
}

.wrapper-better-half .section-technology-stack .technology-tile {
    text-align: center;
    margin-bottom: 30px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper-better-half .section-technology-stack .technology-tile {
        margin-bottom: 40px;
    }
}

.wrapper-better-half .section-technology-stack .profile-space {
    padding-left: 0;
    padding-right: 0;
}

.wrapper-better-half .section-technology-stack .profile-content {
    padding-top: 50px;
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
    .wrapper-better-half .section-technology-stack .profile-content {
        padding-top: 15px;
    }
}
@media only screen and (max-width: 1199px) {
    .wrapper-better-half .section-technology-stack .profile-content {
        padding-top: 0;
    }
}
.wrapper-better-half .section-technology-stack .profile-content img {
    width: 1920px;
    aspect-ratio: auto 1.7582417582;
    height: auto;
    max-width: 100%;
}

.wrapper-better-half .testimonial-outer{
    padding:150px 0;
    overflow: hidden;
}

@media only screen and (max-width: 1199px) {
    .wrapper-better-half .testimonial-outer{
        padding: 130px 0;
    }
}
@media only screen and (max-width: 991px) {
    .wrapper-better-half .testimonial-outer{
        padding: 0;
    }
}

.wrapper-better-half .testimonial-outer .testimonial-inner{
    background-color: rgba(132,103,249,0.30);
}
.wrapper-better-half .testimonial-outer .testimonial-inner .content-wrap{
    max-width: 1034px;
    margin: 0 auto;
    text-align: center;
    padding: 52px;
    position: relative;
}

@media only screen and (max-width: 1199px){
    .wrapper-better-half .testimonial-outer .testimonial-inner .content-wrap{
        padding: 30px;
    }
}
@media only screen and (max-width: 991px){
    .wrapper-better-half .testimonial-outer .testimonial-inner .content-wrap{
        padding: 70px 0;
    }
}
@media only screen and (max-width: 767px){
    .wrapper-better-half .testimonial-outer .testimonial-inner .content-wrap{
        padding: 50px 0;
    }
}
@media only screen and (max-width: 575px){
    .wrapper-better-half .testimonial-outer .testimonial-inner .content-wrap{
        padding: 35px 0;
    }
}

.wrapper-better-half .testimonial-outer .testimonial-inner .content-wrap:before{
    content: '';
    position: absolute;
    background: url("../img/case-study-details/ai-based-matrimony-app/testimonial-border.svg") no-repeat center;
    background-size: 100% 100%;
    width: auto;
    height: 613px;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
}
@media only screen and (max-width: 991px){
    .wrapper-better-half .testimonial-outer .testimonial-inner .content-wrap:before{
        display: none;
    }
}
.wrapper-better-half .testimonial-outer .testimonial-inner .content-wrap .info-text{
    font-family: 'Ubuntu';
    font-size: 22px;
    line-height: 38px;
    font-weight: 500;
    position: relative;
    z-index: 2;
}
@media only screen and (max-width: 767px){
    .wrapper-better-half .testimonial-outer .testimonial-inner .content-wrap .info-text{
        font-size: 18px;
        line-height: 28px;
    }
}
.wrapper-better-half .testimonial-outer .testimonial-inner .content-wrap .logo-wrap{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    text-align: left;
    margin-top: 30px;
    position: relative;
    z-index: 2;
}

.wrapper-better-half .testimonial-outer .testimonial-inner .content-wrap .logo-wrap .desg-wrap .des{
    font-size: 22px;
    line-height: 38px;
    font-family: 'Ubuntu';
    font-weight: 700;
}

@media only screen and (max-width: 575px){
    .wrapper-better-half .testimonial-outer .testimonial-inner .content-wrap .logo-wrap .desg-wrap .des{
        font-size: 20px;
        line-height: 32px;
    }
}

.wrapper-better-half .testimonial-outer .testimonial-inner .content-wrap .logo-wrap .desg-wrap p{
    font-size: 22px;
    line-height: 38px;
    font-family: 'Ubuntu';
    font-weight: 400;
}
@media only screen and (max-width: 767px){
    .wrapper-better-half .testimonial-outer .testimonial-inner .content-wrap .logo-wrap .desg-wrap p{
        font-size: 18px;
        line-height: 28px;
    }
}

.wrapper-better-half .bottom-color-red {
    height: 90px;
    background: #ff5b91;
}

@media only screen and (min-width: 992px) and (max-width: 1499px) {
    .wrapper-better-half .bottom-color-red {
        height: 56px;
    }
}
@media only screen and (max-width: 991px) {
    .wrapper-better-half .bottom-color-red {
        height: 50px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-better-half .bottom-color-red {
        height: 35px;
    }
}

/*ai based matrimony css ends here*/

/*smashers collectors app css starts here*/
@font-face {
    font-family: 'Rowdies';
    src: url('../portfolio-fonts/smashers-collectors-app/Rowdies-Light.woff2') format('woff2'),
    url('../portfolio-fonts/smashers-collectors-app/Rowdies-Light.woff') format('woff'),url('../portfolio-fonts/smashers-collectors-app/Rowdies-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('../portfolio-fonts/smashers-collectors-app/Raleway-SemiBold.woff2') format('woff2'),
    url('../portfolio-fonts/smashers-collectors-app/Raleway-SemiBold.woff') format('woff'),url('../portfolio-fonts/smashers-collectors-app/Raleway-SemiBold.ttf.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../portfolio-fonts/smashers-collectors-app/Poppins-Regular.woff2') format('woff2'),
    url('../portfolio-fonts/smashers-collectors-app/Poppins-Regular.woff') format('woff'),url('../portfolio-fonts/smashers-collectors-app/Poppins-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Norms Pro';
    src: url('../portfolio-fonts/smashers-collectors-app/TTNormsPro-Regular.woff2') format('woff2'),
    url('../portfolio-fonts/smashers-collectors-app/TTNormsPro-Regular.woff') format('woff'),url('../portfolio-fonts/smashers-collectors-app/TTNormsPro-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'TT Norms Pro';
    src: url('../portfolio-fonts/smashers-collectors-app/TTNormsPro-Medium.woff2') format('woff2'),
    url('../portfolio-fonts/smashers-collectors-app/TTNormsPro-Medium.woff') format('woff'),url('../portfolio-fonts/smashers-collectors-app/TT-Norms-Pro-Medium.ttf') format('truetype');;
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'TT Norms Pro';
    src: url('../portfolio-fonts/smashers-collectors-app/TTNormsPro-Bold.woff2') format('woff2'),
    url('../portfolio-fonts/smashers-collectors-app/TTNormsPro-Bold.woff') format('woff'),url('../portfolio-fonts/smashers-collectors-app/TTNormsPro-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

.smashers-wrapper{
    background-color: #ffffff;
    font-family: 'TT Norms Pro';
}

.smashers-wrapper .smashptb-120{
    padding: 120px 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1599px){
    .smashers-wrapper .smashptb-120{
        padding: 100px 0;
    }
}
@media only screen and (max-width: 1199px){
    .smashers-wrapper .smashptb-120{
        padding: 90px 0;
    }
}
@media only screen and (max-width: 991px){
    .smashers-wrapper .smashptb-120{
        padding: 70px 0;
    }
}
@media only screen and (max-width: 767px){
    .smashers-wrapper .smashptb-120{
        padding: 50px 0;
    }
}
@media only screen and (max-width: 575px){
    .smashers-wrapper .smashptb-120{
        padding: 35px 0;
    }
}

.smashers-wrapper .smashpt-120{
    padding-top: 120px;
}
@media only screen and (min-width: 1200px) and (max-width: 1599px){
    .smashers-wrapper .smashpt-120{
        padding-top: 100px;
    }
}
@media only screen and (max-width: 1199px){
    .smashers-wrapper .smashpt-120{
        padding-top: 90px;
    }
}
@media only screen and (max-width: 991px){
    .smashers-wrapper .smashpt-120{
        padding-top: 70px;
    }
}
@media only screen and (max-width: 767px){
    .smashers-wrapper .smashpt-120{
        padding-top: 50px;
    }
}
@media only screen and (max-width: 575px){
    .smashers-wrapper .smashpt-120{
        padding-top: 35px;
    }
}

.smashers-wrapper .smashpb-120{
    padding-bottom: 120px;
}

@media only screen and (min-width: 1200px) and (max-width: 1599px){
    .smashers-wrapper .smashpb-120{
        padding-bottom: 100px;
    }
}
@media only screen and (max-width: 1199px){
    .smashers-wrapper .smashpb-120{
        padding-bottom: 90px;
    }
}
@media only screen and (max-width: 991px){
    .smashers-wrapper .smashpb-120{
        padding-bottom: 70px;
    }
}
@media only screen and (max-width: 767px){
    .smashers-wrapper .smashpb-120{
        padding-bottom: 50px;
    }
}
@media only screen and (max-width: 575px){
    .smashers-wrapper .smashpb-120{
        padding-bottom: 35px;
    }
}

.smashers-wrapper .smashhead-title{
    font-style: normal;
    font-weight: 700;
    font-size: 50px;
    line-height: 60px;
    letter-spacing: -0.01em;
}

@media only screen and (max-width: 991px) {
    .smashers-wrapper .smashhead-title {
        font-size: 42px;
        line-height: 48px;
        text-align: center;
        margin: 0 0 20px !important;
    }
}
@media only screen and (max-width: 767px) {
    .smashers-wrapper .smashhead-title{
        font-size: 34px;
        line-height: 46px;
    }
}

@media only screen and (max-width: 575px) {
    .smashers-wrapper .smashhead-title{
        margin: 0 0 10px !important;
    }
}

@media only screen and (max-width: 375px) {
    .smashers-wrapper .smashhead-title{
        font-size: 30px;
        line-height: 36px;
    }
}

@media only screen and (min-width:1699px){
    .smashers-wrapper .smash-container {
        max-width: 1600px;
        padding: 0;
        margin: 0 auto;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1599px) {
    .smashers-wrapper .smash-container {
        width: calc(100% - 80px);
        max-width: none;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .smashers-wrapper .smash-container {
        width: calc(100% - 60px);
        max-width: none;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .smashers-wrapper .smash-container {
        width: calc(100% - 40px);
        max-width: none;
    } }

.smashers-wrapper .smash-container-one {
    background: #ED739A;
    border-radius: 40px;
}

@media only screen and (min-width:1699px){
    .smashers-wrapper .smash-container-one {
        max-width: 1600px;
        padding: 0;
        margin: 0 auto;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1599px) {
    .smashers-wrapper .smash-container-one {
        width: calc(100% - 80px);
        max-width: none;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .smashers-wrapper .smash-container-one {
        width: calc(100% - 60px);
        max-width: none;
        border-radius: 30px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .smashers-wrapper .smash-container-one {
        width: calc(100% - 40px);
        max-width: none;
        border-radius: 20px;
    } }
@media only screen and (max-width: 575px) {
    .smashers-wrapper .smash-container-one {
        border-radius: 0;
    }
}

.smashers-wrapper .smash-container-two {
    background: #60C3D9;
    border-radius: 40px;
}

@media only screen and (min-width:1699px){
    .smashers-wrapper .smash-container-two {
        max-width: 1600px;
        padding: 0;
        margin: 0 auto;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1599px) {
    .smashers-wrapper .smash-container-two {
        width: calc(100% - 80px);
        max-width: none;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .smashers-wrapper .smash-container-two {
        width: calc(100% - 60px);
        max-width: none;
        border-radius: 30px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .smashers-wrapper .smash-container-two {
        width: calc(100% - 40px);
        max-width: none;
        border-radius: 20px;
    } }

@media only screen and (max-width: 575px) {
    .smashers-wrapper .smash-container-two {
        border-radius: 0;
    } }


.smashers-wrapper .smash-container-three {
    background: #84ca95;
    border-radius: 40px;
}

@media only screen and (min-width:1699px){
    .smashers-wrapper .smash-container-three {
        max-width: 1600px;
        padding: 0;
        margin: 0 auto;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1599px) {
    .smashers-wrapper .smash-container-three {
        width: calc(100% - 80px);
        max-width: none;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .smashers-wrapper .smash-container-three {
        width: calc(100% - 60px);
        max-width: none;
        border-radius: 30px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .smashers-wrapper .smash-container-three {
        width: calc(100% - 40px);
        max-width: none;
        border-radius: 20px;
    } }

@media only screen and (max-width: 575px) {
    .smashers-wrapper .smash-container-three {
        border-radius: 0;
    }
}

.smashers-wrapper .section-smash-the-ball {
    background-color: #5F44A3;
    overflow: hidden;
    position: relative;
}
.smashers-wrapper .section-smash-the-ball .banner-bg{
    position: absolute;
    right: -175px;
    bottom: -20px;
    transform: rotate(174deg);
}
@media only screen and (max-width: 1199px) {
    .smashers-wrapper .section-smash-the-ball .banner-bg{
        display: none;
    }
}
.smashers-wrapper .section-smash-the-ball .banner-smash-title {
    font-style: normal;
    font-weight: 900;
    color: #fff;
}
@media only screen and (max-width: 991px) {
    .smashers-wrapper .section-smash-the-ball .banner-smash-title {
        text-align: center;
    }
}
.smashers-wrapper .section-smash-the-ball .banner-smash-title h1 {
    font-size: 100px;
    font-weight: 900;
    line-height: 134px;
}
@media only screen and (max-width: 1499px) {
    .smashers-wrapper .section-smash-the-ball .banner-smash-title h1 {
        font-size: 85px;
        line-height: 120px;
    }
}
@media only screen and (max-width: 1365px) {
    .smashers-wrapper .section-smash-the-ball .banner-smash-title h1 {
        font-size: 68px;
        line-height: 90px;
    }
}
@media only screen and (max-width: 991px) {
    .smashers-wrapper .section-smash-the-ball .banner-smash-title h1 {
        font-size: 48px;
        line-height: 55px;
    }
}
@media only screen and (max-width: 767px) {
    .smashers-wrapper .section-smash-the-ball .banner-smash-title h1 {
        font-size: 40px;
        line-height: 44px;
        text-align: center;
    }
}
@media only screen and (max-width: 375px) {
    .smashers-wrapper .section-smash-the-ball .banner-smash-title h1 {
        font-size: 34px;
        line-height: 38px;
    }
}
.smashers-wrapper .section-smash-the-ball .banner-smash-title .collect-text {
    border: 3px solid #ebc12b;
    transform: rotate(-3deg);
    padding-left: 14px;
    padding-right: 14px;
    display: inline-block;
    position: relative;
    line-height: 110px;
}
@media only screen and (max-width: 1499px) {
    .smashers-wrapper .section-smash-the-ball .banner-smash-title .collect-text {
        line-height: 90px;
    }
}
@media only screen and (max-width: 1199px) {
    .smashers-wrapper .section-smash-the-ball .banner-smash-title .collect-text {
        line-height: 74px;
    }
}
@media only screen and (max-width: 991px) {
    .smashers-wrapper .section-smash-the-ball .banner-smash-title .collect-text {
        border: none;
        padding: 0;
        transform: none;
    }
}
@media only screen and (max-width: 767px) {
    .smashers-wrapper .section-smash-the-ball .banner-smash-title .collect-text {
        line-height: normal;
    }
}

.smashers-wrapper .section-smash-the-ball .banner-smash-title .collect-text .one{
    position: absolute;
    left: -12px;
    top: -12px;
    width: 12px;
    height: 12px;
    border: 3px solid #ebc12b;
}

.smashers-wrapper .section-smash-the-ball .banner-smash-title .collect-text .two{
    position: absolute;
    right: -12px;
    top: -12px;
    width: 12px;
    height: 12px;
    border: 3px solid #ebc12b;
}
.smashers-wrapper .section-smash-the-ball .banner-smash-title .collect-text .three{
    position: absolute;
    left: -12px;
    bottom: -12px;
    width: 12px;
    height: 12px;
    border: 3px solid #ebc12b;
}
.smashers-wrapper .section-smash-the-ball .banner-smash-title .collect-text .four{
    position: absolute;
    right: -12px;
    bottom: -12px;
    width: 12px;
    height: 12px;
    border: 3px solid #ebc12b;
}

@media only screen and (max-width: 991px) {
    .smashers-wrapper .section-smash-the-ball .banner-smash-title .collect-text .one,.smashers-wrapper .section-smash-the-ball .banner-smash-title .collect-text .two,.smashers-wrapper .section-smash-the-ball .banner-smash-title .collect-text .three,.smashers-wrapper .section-smash-the-ball .banner-smash-title .collect-text .four{
        display: none;
    }
}

.smashers-wrapper .section-smash-the-ball .blue-army-img {
    margin-top: 10px;
}
.smashers-wrapper .section-smash-the-ball .blue-army-img img {
    width: 3200px;
    aspect-ratio: auto 2.380952381;
    height: auto;
}
.smashers-wrapper .section-about-smasher {
    background-color: #fff;
}

@media only screen and (max-width: 991px){
    .smashers-wrapper .section-about-smasher {
        text-align: center;
    }
}

.smashers-wrapper .section-about-smasher .about-title {
    color: #160b29;
}

.smashers-wrapper .section-about-smasher .about-text-wrap{
    margin-top: 20px;
}

@media only screen and (max-width: 991px){
    .smashers-wrapper .section-about-smasher .about-text-wrap{
        margin-top: 0;
    }
}

.smashers-wrapper .section-about-smasher .about-text {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 32px;
    color: rgba(22, 11, 41, 0.8);
}
@media only screen and (max-width: 991px) {
    .smashers-wrapper .section-about-smasher .about-text {
        text-align: center;
    }
}

@media only screen and (max-width: 575px) {
    .smashers-wrapper .section-about-smasher .about-text {
        font-size: 16px;
        line-height: 26px;
    }
}

.smashers-wrapper .section-about-smasher .about-text:first-child {
    margin: 0 0 20px;
}
@media only screen and (max-width: 991px) {
    .smashers-wrapper .section-about-smasher .about-text:first-child {
        margin: 0 0 10px;
    }
}

.smashers-wrapper .section-play-the-bg {
    width: 100%;
    background-color: #FD6755;
    overflow: hidden;
}

.smashers-wrapper .section-play-the-bg .play-the-smasher-text {
    font-style: normal;
    font-weight: 500;
    font-size: 60px;
    line-height: 80px;
    color: #fff;
    margin-bottom: 30px;
}
@media only screen and (max-width: 1365px) {
    .smashers-wrapper .section-play-the-bg .play-the-smasher-text {
        font-size: 48px;
        line-height: 68px;
    }
}

@media only screen and (max-width: 991px) {
    .smashers-wrapper .section-play-the-bg .play-the-smasher-text {
        font-size: 36px;
        line-height: 52px;
        text-align: center;
    }
}
@media only screen and (max-width: 767px) {
    .smashers-wrapper .section-play-the-bg .play-the-smasher-text {
        font-size: 30px;
        line-height: 44px;
        text-align: center;
    }
}
@media only screen and (max-width: 375px) {
    .smashers-wrapper .section-play-the-bg .play-the-smasher-text {
        font-size: 25px;
        line-height: 36px;
    }
}
.smashers-wrapper .section-play-the-bg .play-the-smasher-text span {
    color: #1c1c1c;
    border-bottom: solid #000 4px;
}
.smashers-wrapper .section-play-the-bg .play-the-smasher-text .span-two {
    color: #5f44a3;
    border: none;
}

.smashers-wrapper .section-play-the-bg .four-screens {
    margin-top: 10px;
    margin-right: -50px;
    text-align: right;
}

@media only screen and (max-width: 1199px){
    .smashers-wrapper .section-play-the-bg .four-screens {
        margin: 0 auto;
        max-width: 80%;
    }
}

.smashers-wrapper .section-play-the-bg .four-screens img {
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3));
}

.smashers-wrapper .section-work-process-bg {
    width: 100%;
    background-color: #fff;
    padding-bottom: 80px;
}
@media only screen and (max-width: 991px) {
    .smashers-wrapper .section-work-process-bg {
        padding-bottom: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .smashers-wrapper .section-work-process-bg {
        padding-bottom: 50px;
    }
}

@media only screen and (max-width: 480px) {
    .smashers-wrapper .section-work-process-bg {
        padding-bottom: 35px;
    }
}

.smashers-wrapper .section-work-process-bg .work-progress-type .progress-outer{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}
@media only screen and (max-width: 991px) {
    .smashers-wrapper .section-work-process-bg .work-progress-type .progress-outer {
        gap: 15px;
    }
}
@media only screen and (max-width: 480px) {
    .smashers-wrapper .section-work-process-bg .work-progress-type .progress-outer {
        white-space: nowrap;
        flex-wrap: nowrap;
        overflow: hidden;
        overflow-x: scroll;
        justify-content: start !important;
        gap: 10px;
    }
}
.smashers-wrapper .section-work-process-bg .work-progress-type .progress-outer .item{
    min-width: 330px;
}
@media only screen and (max-width: 991px) {
    .smashers-wrapper .section-work-process-bg .work-progress-type .progress-outer .item{
        min-width: 210px;
    }
}
@media only screen and (max-width: 480px) {
    .smashers-wrapper .section-work-process-bg .work-progress-type .progress-outer .item{
        min-width: max-content;
        margin: 0 0 10px;
    }
}

.smashers-wrapper .section-work-process-bg .work-progress-type .progress-outer .item span{
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 34px;
    display: block;
    letter-spacing: -0.01em;
    color: #160b29;
}

@media only screen and (max-width: 767px) {
    .smashers-wrapper .section-work-process-bg .work-progress-type .progress-outer .item span{
        font-size: 20px;
        line-height: 28px;
    }
}

@media only screen and (max-width: 480px) {
    .smashers-wrapper .section-work-process-bg .work-progress-type .progress-outer .item span{
        font-size: 18px;
        line-height: 26px;
    }
}

@media only screen and (max-width: 767px) {
    .smashers-wrapper .section-work-process-bg .work-progress-type .progress-outer .item img{
        width: 35px;
        height: 35px;
    }
}

.smashers-wrapper .section-work-process-bg .work-process-title {
    color: #160b29;
    margin-bottom: 60px;
}

@media only screen and (max-width: 991px) {
    .smashers-wrapper .section-work-process-bg .work-process-title {
        margin-bottom: 30px !important;
    }
}

.smashers-wrapper .section-work-process-bg .empathize-bg {
    background: #d6f8ff;
    border-radius: 70px;
    padding: 10px 12px;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .smashers-wrapper .section-work-process-bg .empathize-bg {
        font-size: 16px;
        padding: 8px 10px;
        line-height: 14px;
    }
}

@media only screen and (max-width: 767px) {
    .smashers-wrapper .section-work-process-bg .empathize-bg {
        gap: 10px;
    }
}


.smashers-wrapper .section-work-process-bg .edit-bg {
    background: #e6dbfc;
    border-radius: 70px;
    padding: 10px 12px;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .smashers-wrapper .section-work-process-bg .edit-bg {
        font-size: 18px;
        padding: 8px 10px;
        line-height: 12px;
    }
}
@media only screen and (max-width: 767px) {
    .smashers-wrapper .section-work-process-bg .edit-bg {
        gap: 10px;
    }
}

.smashers-wrapper .section-work-process-bg .ideate-bg {
    background: #ffe9ec;
    border-radius: 70px;
    padding: 10px 12px;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .smashers-wrapper .section-work-process-bg .ideate-bg {
        font-size: 18px;
        padding: 8px 10px;
        line-height: 12px;
    }
}

@media only screen and (max-width: 767px) {
    .smashers-wrapper .section-work-process-bg .ideate-bg {
        gap: 10px;
    }
}

.smashers-wrapper .section-work-process-bg .prototype-bg {
    background: #ffedd1;
    border-radius: 70px;
    padding: 10px 12px;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .smashers-wrapper .section-work-process-bg .prototype-bg {
        font-size: 18px;
        padding: 8px 10px;
        line-height: 12px;
    }
}
@media only screen and (max-width: 767px) {
    .smashers-wrapper .section-work-process-bg .prototype-bg {
        gap: 10px;
    }
}

.smashers-wrapper .section-work-process-bg .test-bg {
    background: #cff3d7;
    border-radius: 70px;
    padding: 10px 12px;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .smashers-wrapper .section-work-process-bg .test-bg {
        font-size: 18px;
        padding: 8px 10px;
        line-height: 12px;
    }
}

@media only screen and (max-width: 767px) {
    .smashers-wrapper .section-work-process-bg .test-bg {
        gap: 10px;
    }
}

.smashers-wrapper .section-typography-bg {
    width: 100%;
    background-color: #fff;
}
.smashers-wrapper .section-typography-bg .typography-title {
    color: #160b29;
}

.smashers-wrapper .section-typography-bg .typo-outer{
    margin-top: 50px;
}
@media only screen and (max-width: 991px){
    .smashers-wrapper .section-typography-bg .typo-outer{
        margin-top: 20px;
    }
}

.smashers-wrapper .section-typography-bg .typo-outer .text-wrap{
    margin-bottom: 30px;
}

@media only screen and (max-width: 767px){
    .smashers-wrapper .section-typography-bg .typo-outer .text-wrap{
        margin-bottom: 15px;
    }
}

.smashers-wrapper .section-typography-bg .typo-title {
    font-style: normal;
    font-size: 30px;
    line-height: 37px;
    color: #000;
}

@media only screen and (max-width: 575px){
    .smashers-wrapper .section-typography-bg .typo-title {
        font-size: 25px;
        line-height: 32px;
    }
}

.smashers-wrapper .section-typography-bg .rowdie-text{
    font-family: 'Rowdies';
    font-weight: 300;
}
.smashers-wrapper .section-typography-bg .raleway-text{
    font-family: 'Raleway';
    font-weight: 600;
}
.smashers-wrapper .section-typography-bg .word-text {
    font-style: normal;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0.08em;
    color: #000;
    text-transform: uppercase;
}


.smashers-wrapper .section-typography-bg .word-text span {
    text-transform: lowercase;
    display: block;
    font-size: 15px;
}
@media only screen and (max-width: 767px) {
    .smashers-wrapper .section-typography-bg .word-text {
        font-size: 14px;
        padding-bottom: 0;
    }
}
.smashers-wrapper .section-typography-bg .colors-img {
    margin: 50px 0;
}

@media only screen and (max-width: 991px) {
    .smashers-wrapper .section-typography-bg .colors-img {
        margin: 30px 0;
    }
}
.smashers-wrapper .section-typography-bg .colors-img img {
    width: 2056px;
    aspect-ratio: auto 2.0725806452;
    height: auto;
}

.smashers-wrapper .section-smasher-packs-bg {
    width: 100%;
    padding-bottom: 30px;
    background-color: #fff;
}
.smashers-wrapper .section-smasher-packs-bg .smasher-packs-title {
    color: #160b29;
}

.smashers-wrapper .section-smasher-packs-bg .smasher-packs-text {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 32px;
    text-align: center;
    color: rgba(22, 11, 41, 0.8);
}

@media only screen and (max-width: 991px){
    .smashers-wrapper .section-smasher-packs-bg .smasher-packs-text {
        line-height: 26px;
    }
}

@media only screen and (max-width: 575px){
    .smashers-wrapper .section-smasher-packs-bg .smasher-packs-text {
        font-size: 16px;
    }
}

.smashers-wrapper .section-pink-gang-bg {
    width: 100%;
    border-radius: 40px;
    margin-bottom: 30px;
    overflow: hidden;
}

@media only screen and (max-width: 991px) {
    .smashers-wrapper .section-pink-gang-bg {
        border-radius: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .smashers-wrapper .section-pink-gang-bg {
        border-radius: 20px;
    }
}

@media only screen and (max-width: 575px) {
    .smashers-wrapper .section-pink-gang-bg {
        border-radius: 0;
    }
}

.smashers-wrapper .section-pink-gang-bg .inner-outer{
   padding-top: 50px;
}

@media only screen and (max-width: 767px){
    .smashers-wrapper .section-pink-gang-bg .inner-outer{
        padding-top: 35px;
    }
}

.smashers-wrapper .section-pink-gang-bg .pink-gang-title {
    color: #fff;
}

@media only screen and (max-width: 767px){
    .smashers-wrapper .section-pink-gang-bg .pink-gang-title {
        margin: 0 0 10px !important;
    }
}
.smashers-wrapper .section-pink-gang-bg .pink-gang-text {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 32px;
    align-items: center;
    text-align: center;
    color: #fff;
    padding-bottom: 70px;
}
@media only screen and (max-width: 991px) {
    .smashers-wrapper .section-pink-gang-bg .pink-gang-text {
        padding-bottom: 30px;
    }
}
@media only screen and (max-width: 575px) {
    .smashers-wrapper .section-pink-gang-bg .pink-gang-text {
        font-size: 16px;
        line-height: 26px;
    }
}
.smashers-wrapper .section-pink-gang-bg .pink-gang {
    margin-top: 10px;
}
.smashers-wrapper .section-pink-gang-bg .pink-gang img {
    width: 3200px;
    aspect-ratio: auto 2.3916292975;
    height: auto;
}
.smashers-wrapper .section-blue-army-bg {
    width: 100%;
    padding-top: 0px;
    padding-bottom: 0px;
    border-radius: 40px;
    margin-bottom: 30px;
    overflow: hidden;
}

@media only screen and (max-width: 991px) {
    .smashers-wrapper .section-blue-army-bg {
        border-radius: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .smashers-wrapper .section-blue-army-bg {
        border-radius: 20px;
    }
}

@media only screen and (max-width: 575px) {
    .smashers-wrapper .section-blue-army-bg {
        border-radius: 0;
    }
}

.smashers-wrapper .section-blue-army-bg .inner-outer{
    padding-top: 50px;
}
@media only screen and (max-width: 767px){
    .smashers-wrapper .section-blue-army-bg .inner-outer{
        padding-top: 35px;
    }
}

.smashers-wrapper .section-blue-army-bg .blue-army-title {
    color: #fff;
}
@media only screen and (max-width: 767px){
    .smashers-wrapper .section-blue-army-bg .blue-army-title {
        margin: 0 0 10px !important;
    }
}

.smashers-wrapper .section-blue-army-bg .blue-army-text {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 32px;
    align-items: center;
    text-align: center;
    color: #fff;
    padding-bottom: 70px;
}
@media only screen and (max-width: 991px) {
    .smashers-wrapper .section-blue-army-bg .blue-army-text {
        padding-bottom: 30px;
    }
}
@media only screen and (max-width: 575px) {
    .smashers-wrapper .section-blue-army-bg .blue-army-text  {
        font-size: 16px;
        line-height: 26px;
    }
}
.smashers-wrapper .section-blue-army-bg .blue-army {
    margin-top: 10px;
}
.smashers-wrapper .section-blue-army-bg .blue-army img {
    width: 3200px;
    aspect-ratio: auto 2.380952381;
    height: auto;
}
.smashers-wrapper .section-grass-players-bg {
    width: 100%;
    border-radius: 40px;
    overflow: hidden;
}

@media only screen and (max-width: 991px) {
    .smashers-wrapper .section-grass-players-bg {
        border-radius: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .smashers-wrapper .section-grass-players-bg {
        border-radius: 20px;
    }
}

@media only screen and (max-width: 575px) {
    .smashers-wrapper .section-grass-players-bg {
        border-radius: 0;
    }
}

.smashers-wrapper .section-grass-players-bg .inner-outer{
    padding-top: 50px;
}

@media only screen and (max-width: 767px){
    .smashers-wrapper .section-grass-players-bg .inner-outer{
        padding-top: 35px;
    }
}
.smashers-wrapper .section-grass-players-bg .grass-players-title {
    color: #fff;
}

@media only screen and (max-width: 767px){
    .smashers-wrapper .section-grass-players-bg .grass-players-title {
        margin: 0 0 10px !important;
    }
}

.smashers-wrapper .section-grass-players-bg .grass-players-text {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 32px;
    align-items: center;
    text-align: center;
    color: #fff;
    padding-bottom: 70px;
}
@media only screen and (max-width: 991px) {
    .smashers-wrapper .section-grass-players-bg .grass-players-text {
        padding-bottom: 30px;
    }
}
@media only screen and (max-width: 575px) {
    .smashers-wrapper .section-blue-army-bg .grass-players-text  {
        font-size: 16px;
        line-height: 26px;
    }
}
.smashers-wrapper .section-grass-players-bg .grass-players {
    margin-top: 10px;
}
.smashers-wrapper .section-grass-players-bg .grass-players img {
    width: 3200px;
    aspect-ratio: auto 2.4242424242;
    height: auto;
}
.smashers-wrapper .section-characters-bg {
    width: 100%;
    background: #fff;
    border-radius: 40px;
    overflow: hidden;
}
.smashers-wrapper .section-characters-bg .characters-title {
    color: #160b29;
}

.smashers-wrapper .section-characters-bg .characters-text {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    align-items: center;
    text-align: center;
    color: rgba(22,11,41,0.8);
    padding-bottom: 25px;
}

@media only screen and (max-width: 575px) {
    .smashers-wrapper .section-characters-bg .characters-text {
        font-size: 16px;
        line-height: 26px;
        padding-bottom: 15px;
    }
}
.smashers-wrapper .section-characters-bg .characters {
    margin: 30px -180px 0;
}

@media only screen and (min-width: 1700px) and (max-width:1899px) {
    .smashers-wrapper .section-characters-bg .characters {
        margin: 30px -30px 0;
    }
}

@media only screen and (min-width: 1200px) and (max-width:1699px) {
    .smashers-wrapper .section-characters-bg .characters {
        margin: 30px -50px 0;
    }
}

@media only screen and (max-width: 1199px) {
    .smashers-wrapper .section-characters-bg .characters {
        margin: 30px -70px 0;
    }
}

@media only screen and (max-width: 991px) {
    .smashers-wrapper .section-characters-bg .characters {
        margin: 10px -30px 0;
    }
}

.smashers-wrapper .section-just-them-bg {
    width: 100%;
    background: #1f1f1f;
}
.smashers-wrapper .section-just-them-bg .just-them-title {
    font-style: normal;
    font-weight: 700;
    font-size: 70px;
    line-height: 90px;
    text-align: center;
    color: #fff;
}
@media only screen and (max-width: 1199px) {
    .smashers-wrapper .section-just-them-bg .just-them-title {
        font-size: 48px;
        line-height: 66px;
    }
}

@media only screen and (max-width: 991px) {
    .smashers-wrapper .section-just-them-bg .just-them-title {
        font-size: 42px;
        line-height: 62px;
    }
}
@media only screen and (max-width: 767px) {
    .smashers-wrapper .section-just-them-bg .just-them-title {
        font-size: 34px;
        line-height: 50px;
    }
}
@media only screen and (max-width: 375px) {
    .smashers-wrapper .section-just-them-bg .just-them-title {
        font-size: 30px;
        line-height: 36px;
    }
}

.smashers-wrapper .section-just-them-bg .just-them-title span {
    display: block;
}
.smashers-wrapper .section-just-them-bg .just-them-title .span-border-text {
    border: solid #fd6755 2px;
    display: inline;
    padding-left: 12px;
    padding-right: 12px;
}

@media only screen and (max-width: 767px){
    .smashers-wrapper .section-just-them-bg .just-them-title .span-border-text {
        border: none;
        padding: 0;
    }
}

.smashers-wrapper .section-just-them-bg .just-them-text {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 32px;
    align-items: center;
    text-align: center;
    color: #ddd;
    padding-bottom: 50px;
}
@media only screen and (max-width: 991px) {
    .smashers-wrapper .section-just-them-bg .just-them-text {
        padding-bottom: 20px;
    }
}
@media only screen and (max-width: 575px) {
    .smashers-wrapper .section-just-them-bg .just-them-text {
        font-size: 16px;
        line-height: 26px;
    }
}
.smashers-wrapper .section-just-them-bg .just-them {
    margin-top: 70px;
    text-align: right;
}
@media only screen and (max-width: 767px) {
    .smashers-wrapper .section-just-them-bg .just-them {
        margin-top: 50px;
    }
}

@media only screen and (max-width: 575px) {
    .smashers-wrapper .section-just-them-bg .just-them {
        margin-top: 0;
    }
}

.smashers-wrapper .section-just-them-bg .just-them img {
    width: 1920px;
    aspect-ratio: auto 1.3842826244;
    height: auto;
    margin-bottom: -1px;
}

.smashers-wrapper .section-technology-stack-bg {
    width: 100%;
    background-color: #fff;
}
@media only screen and (max-width: 991px) {
    .smashers-wrapper .section-technology-stack-bg {
        border-radius: 10px;
    }
}

.smashers-wrapper .section-technology-stack-bg .technology-stack-title {
    color: #160b29;
    margin: 0 0 50px;
}

@media only screen and (max-width: 991px) {
    .smashers-wrapper .section-technology-stack-bg .technology-stack-title {
        margin: 0 0 30px !important;
    }
}
@media only screen and (max-width: 575px) {
    .smashers-wrapper .section-technology-stack-bg .technology-stack-title {
        margin: 0 0 25px !important;
    }
}
.smashers-wrapper .section-technology-stack-bg .technology-list{
    gap: 25px;
}
.smashers-wrapper .section-technology-stack-bg .swift-img {
}
.smashers-wrapper .section-technology-stack-bg .swift-img .img-outer {
    background-color: #EFF7FE;
    padding: 20px;
    border-radius: 99em;
    margin: 0 0 15px;
}
@media only screen and (max-width: 575px){
    .smashers-wrapper .section-technology-stack-bg .swift-img .img-outer{
        padding: 10px;
    }
}
.smashers-wrapper .section-technology-stack-bg .swift-img .img-outer .img-wrap{
    background-color: #ffffff;
    width: 120px;
    height: 120px;
    padding: 20px;
    border-radius: 99em;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(6px 6px 6px rgba(0,0,0,0.01));
}

@media only screen and (max-width: 575px){
    .smashers-wrapper .section-technology-stack-bg .swift-img .img-outer .img-wrap{
        padding: 10px;
        width: 80px;
        height: 80px;
    }
}
@media only screen and (max-width: 575px){
    .smashers-wrapper .section-technology-stack-bg .swift-img .img-outer .img-wrap img{
        max-width: 60%;
    }
}

.smashers-wrapper .section-technology-stack-bg .swift-img .swift-text {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 32px;
    text-align: center;
    color: rgba(22, 11, 41, 0.8);
    margin-top: -30px;
}

.smashers-wrapper .section-collect-track-bg {
    width: 100%;
    background-color: #fff;
}

.smashers-wrapper .section-collect-track-bg .middle-div{
    margin: 100px 0;
}

@media only screen and (max-width: 1199px){
    .smashers-wrapper .section-collect-track-bg .middle-div{
        margin: 90px 0;
    }
}
@media only screen and (max-width: 991px){
    .smashers-wrapper .section-collect-track-bg .middle-div{
        margin: 70px 0;
    }
}
@media only screen and (max-width: 767px){
    .smashers-wrapper .section-collect-track-bg .middle-div{
        margin: 50px 0;
    }
}

.smashers-wrapper .section-collect-track-bg .collect-track-title {
    font-style: normal;
    font-weight: 700;
    font-size: 34px;
    line-height: 54px;
    letter-spacing: -0.01em;
    color: #160b29;
    max-width: 467px;
}
@media only screen and (max-width: 991px) {
    .smashers-wrapper .section-collect-track-bg .collect-track-title {
        max-width: none;
        font-size: 28px;
        line-height: 38px;
    }
}

@media only screen and (max-width: 767px) {
    .smashers-wrapper .section-collect-track-bg .collect-track-title {
        font-size: 24px;
        line-height: 34px;
        text-align: center;
        margin: 0 0 30px;
    }
}

.smashers-wrapper .section-collect-track-bg .collect-track-title.top-text{
    margin-left: auto;
}

@media only screen and (max-width: 767px) {
    .smashers-wrapper .section-collect-track-bg .collect-track-title.top-text{
        text-align: center;
    }
}

.smashers-wrapper .section-collect-track-bg .three-screens-img img{
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3));
}

.smashers-wrapper .section-smash-impact .text-wrap .characters-text{
    font-size: 18px;
    line-height: 32px;
    color: rgba(22,11,41,0.8);
}

@media only screen and (max-width: 575px) {
    .smashers-wrapper .section-smash-impact .text-wrap .characters-text {
        font-size: 16px;
        line-height: 26px;
    }
}

.smashers-wrapper .section-smash-impact .img-outers{
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
    margin-top: 100px;
}
@media only screen and (max-width: 1199px) {
    .smashers-wrapper .section-smash-impact .img-outers{
        margin-top: 90px;
    }
}
@media only screen and (max-width: 991px) {
    .smashers-wrapper .section-smash-impact .img-outers{
        margin-top: 70px;
    }
}
@media only screen and (max-width: 767px) {
    .smashers-wrapper .section-smash-impact .img-outers{
        margin-top: 50px;
        grid-gap: 15px;
    }
}
@media only screen and (max-width: 575px) {
    .smashers-wrapper .section-smash-impact .img-outers{
        margin-top: 35px;
    }
}

.smashers-wrapper .section-smash-impact .img-outers .item.item-top{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}
@media only screen and (max-width: 767px) {
    .smashers-wrapper .section-smash-impact .img-outers .item.item-top{
        grid-gap: 15px;
    }
}
@media only screen and (max-width: 480px) {
    .smashers-wrapper .section-smash-impact .img-outers .item.item-top{
        grid-template-columns: 1fr;
    }
}

.smashers-wrapper .section-smash-impact .img-outers .item .img-wrap{
    border-radius: 40px;
}
@media only screen and (max-width: 991px) {
    .smashers-wrapper .section-smash-impact .img-outers .item .img-wrap{
        border-radius: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .smashers-wrapper .section-smash-impact .img-outers .item .img-wrap{
        border-radius: 20px;
    }
}

@media only screen and (max-width: 575px) {
    .smashers-wrapper .section-smash-impact .img-outers .item .img-wrap{
        border-radius: 10px;
    }
}

.smashers-wrapper .section-smash-impact .img-outers .item .img-wrap img{
    border-radius: 40px;
}

@media only screen and (max-width: 991px) {
    .smashers-wrapper .section-smash-impact .img-outers .item .img-wrap img{
        border-radius: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .smashers-wrapper .section-smash-impact .img-outers .item .img-wrap img{
        border-radius: 20px;
    }
}

@media only screen and (max-width: 575px) {
    .smashers-wrapper .section-smash-impact .img-outers .item .img-wrap img{
        border-radius: 10px;
    }
}
/*smashers collectors app css ends here*/

/*bus ticket booking app css starts here*/
@font-face {
    font-family: 'Sen';
    src: url('../portfolio-fonts/bus-ticket-booking-app/Sen-Bold.woff2') format('woff2'),
    url('../portfolio-fonts/bus-ticket-booking-app/Sen-Bold.woff') format('woff'),url('../portfolio-fonts/bus-ticket-booking-app/Sen-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gentium Basic';
    src: url('../portfolio-fonts/bus-ticket-booking-app/GentiumBasic-Bold.woff2') format('woff2'),
    url('../portfolio-fonts/bus-ticket-booking-app/GentiumBasic-Bold.woff') format('woff'),url('../portfolio-fonts/bus-ticket-booking-app/GentiumBasic-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Open Sans';
    src: url('../portfolio-fonts/bus-ticket-booking-app/OpenSans-Regular.woff2') format('woff2'),
    url('../portfolio-fonts/bus-ticket-booking-app/OpenSans-Regular.woff') format('woff'),url('../portfolio-fonts/bus-ticket-booking-app/OpenSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../portfolio-fonts/bus-ticket-booking-app/OpenSans-SemiBold.woff2') format('woff2'),
    url('../portfolio-fonts/bus-ticket-booking-app/OpenSans-SemiBold.woff') format('woff'),url('../portfolio-fonts/bus-ticket-booking-app/OpenSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Open Sans';
    src: url('../portfolio-fonts/bus-ticket-booking-app/OpenSans-Bold.woff2') format('woff2'),
    url('../portfolio-fonts/bus-ticket-booking-app/OpenSans-Bold.woff') format('woff'),url('../portfolio-fonts/bus-ticket-booking-app/OpenSans-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

.mybus-wrapper{
    font-family: 'Open Sans';
    font-weight: 400;
    background-color: #FFFFFF;
    font-size: 16px;
    line-height: 34px;
    color: #5C5468;
}

@media only screen and (max-width: 991px){
    .mybus-wrapper{
        line-height: 28px;
    }
}
@media only screen and (max-width: 575px){
    .mybus-wrapper{
        line-height: 24px;
    }
}


@media only screen and (min-width:1366px){
    .mybus-wrapper .mybus-container{
        max-width: 1140px;
        padding: 0;
        margin: 0 auto;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .mybus-wrapper .mybus-container {
        width: calc(100% - 80px);
        max-width: none;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .mybus-wrapper .mybus-container {
        width: calc(100% - 60px);
        max-width: none;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .mybus-wrapper .mybus-container {
        width: calc(100% - 40px);
        max-width: none;
    } }

.mybus-wrapper .mybus-sen{
    font-family: 'Sen';
    font-weight: bold;
}

.mybus-wrapper .mybus-headtitle{
    font-family: 'Gentium Basic';
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    margin: 0 0 25px;
}

@media only screen and (max-width: 575px){
    .mybus-wrapper .mybus-headtitle{
        margin: 0 0 20px;
    }
}

.mybus-wrapper .mybus-headtitle:after{
    content: '';
    position: absolute;
    right: -100px;
    width: 80px;
    height: 4px;
    background-color: #FB8585;
    top: 50%;
    transform: translateY(-50%);
}

@media only screen and (max-width: 575px){
    .mybus-wrapper .mybus-headtitle:after{
        width: 40px;
        height: 3px;
        right: -50px;
    }
}

@media only screen and (max-width: 480px){
    .mybus-wrapper .mybus-headtitle:after{
        display: none;
    }
}

.mybus-wrapper .mybus-bold{
    font-weight: 700;
}
.mybus-wrapper .mybus-semibold{
    font-weight: 600;
}
.mybus-wrapper .mybus-regular{
    font-weight: 400;
}
.mybus-wrapper .mybus-60{
    font-size: 60px;
    line-height: 66px;
}

@media only screen and (max-width: 1199px){
    .mybus-wrapper .mybus-60{
        font-size: 50px;
        line-height: 58px;
    }
}
@media only screen and (max-width: 991px){
    .mybus-wrapper .mybus-60{
        font-size: 42px;
        line-height: 48px;
    }
}
@media only screen and (max-width: 767px){
    .mybus-wrapper .mybus-60{
        font-size: 36px;
        line-height: 42px;
    }
}

.mybus-wrapper .mybus-40{
    font-size: 40px;
    line-height: 46px;
}

@media only screen and (max-width: 991px){
    .mybus-wrapper .mybus-40{
        font-size: 34px;
        line-height: 44px;
    }
}

@media only screen and (max-width: 767px){
    .mybus-wrapper .mybus-40{
        font-size: 32px;
        line-height: 42px;
    }
}
.mybus-wrapper .mybus-22{
    font-size: 22px;
    line-height: 30px;
}
@media only screen and (max-width: 991px){
    .mybus-wrapper .mybus-22{
        font-size: 20px;
        line-height: 28px;
    }
}
@media only screen and (max-width: 767px){
    .mybus-wrapper .mybus-22{
        font-size: 18px;
        line-height: 26px;
    }
}
@media only screen and (max-width: 575px){
    .mybus-wrapper .mybus-22{
        font-size: 16px;
        line-height: 24px;
    }
}
.mybus-wrapper .mybus-20{
    font-size: 20px;
    line-height: 32px;
}
@media only screen and (max-width: 991px){
    .mybus-wrapper .mybus-20{
        font-size: 18px;
        line-height: 28px;
    }
}

@media only screen and (max-width: 575px){
    .mybus-wrapper .mybus-20{
        font-size: 16px;
        line-height: 24px;
    }
}

.mybus-wrapper .mybus-18{
    font-size: 18px;
    line-height: 34px;
}
@media only screen and (max-width: 575px){
    .mybus-wrapper .mybus-18{
        font-size: 16px;
        line-height: 24px;
    }
}
.mybus-wrapper .mybus-16s{
    line-height: 28px;
}

@media only screen and (max-width: 575px){
    .mybus-wrapper .mybus-16s{
        line-height: 24px;
    }
}

.mybus-wrapper .mybus-light-orenge{
    background-color: #FEEDED;
}
.mybus-wrapper .mybus-darkorenge{
    background-color: #FB8585;
}
.mybus-wrapper .mybus-orenge{
    background-color: #FA8886;
}
.mybus-wrapper .mybus-green{
    background-color: #3BD580;
}
.mybus-wrapper .mybus-lightgreen{
    background-color: #AAD05A;
}
.mybus-wrapper .mybus-black{
    background-color: #000000;
}
.mybus-wrapper .mybus-red{
    background-color: #DD0031;
}
.mybus-wrapper .mybus-darkgreen{
    background-color: #539E43;
}
.mybus-wrapper .mybus-blue{
    background-color: #00618A;
}
.mybus-wrapper .mybus-lightsky{
    background-color: #5DB6DC;
}
.mybus-wrapper .mybus-purple{
    background-color: #BA93EC;
}

.mybus-wrapper .mybus-br30{
    border-radius: 30px;
}

@media only screen and (max-width:767px){
    .mybus-wrapper .mybus-br30{
        border-radius: 20px;
    }
}

@media only screen and (max-width:575px){
    .mybus-wrapper .mybus-br30{
        border-radius: 15px;
    }
}

.mybus-wrapper .mybus-mt15{
    margin-top: 15px;
}

@media only screen and (max-width:991px){
    .mybus-wrapper .mybus-mt15{
        margin-top: 0;
    }
}

.mybus-wrapper .mybus-mt30{
    margin-top: 30px;
}
.mybus-wrapper .mybus-mb30{
    margin-bottom: 30px;
}
.mybus-wrapper .mybus-mt50{
    margin-top: 50px;
}
@media only screen and (max-width: 991px){
    .mybus-wrapper .mybus-mt50{
        margin-top: 30px;
    }
}
.mybus-wrapper .mybus-mt70{
    margin-top: 70px;
}

@media only screen and (max-width: 991px){
    .mybus-wrapper .mybus-mt70{
        margin-top: 30px;
    }
}

.mybus-wrapper .mybus-ptb150{
    padding: 150px 0;
}
@media only screen and (min-width: 1500px) and (max-width: 1599px){
    .mybus-wrapper .mybus-ptb150{
        padding: 120px 0;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1499px){
    .mybus-wrapper .mybus-ptb150{
        padding: 100px 0;
    }
}
@media only screen and (max-width: 1199px){
    .mybus-wrapper .mybus-ptb150{
        padding: 90px 0;
    }
}
@media only screen and (max-width: 991px){
    .mybus-wrapper .mybus-ptb150{
        padding: 70px 0;
    }
}
@media only screen and (max-width: 767px){
    .mybus-wrapper .mybus-ptb150{
        padding: 50px 0;
    }
}
@media only screen and (max-width: 575px){
    .mybus-wrapper .mybus-ptb150{
        padding: 35px 0;
    }
}

.mybus-wrapper .mybus-pb150{
    padding-bottom: 150px;
}

@media only screen and (min-width: 1500px) and (max-width: 1599px){
    .mybus-wrapper .mybus-pb150{
        padding-bottom: 120px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1499px){
    .mybus-wrapper .mybus-pb150{
        padding-bottom: 100px;
    }
}
@media only screen and (max-width: 1199px){
    .mybus-wrapper .mybus-pb150{
        padding-bottom: 90px;
    }
}
@media only screen and (max-width: 991px){
    .mybus-wrapper .mybus-pb150{
        padding-bottom: 70px;
    }
}
@media only screen and (max-width: 767px){
    .mybus-wrapper .mybus-pb150{
        padding-bottom: 50px;
    }
}
@media only screen and (max-width: 575px){
    .mybus-wrapper .mybus-pb150{
        padding-bottom: 35px;
    }
}
.mybus-wrapper .mybus-ptb100{
    padding: 100px 0;
}

@media only screen and (max-width: 1199px){
    .mybus-wrapper .mybus-ptb100{
        padding: 90px 0;
    }
}
@media only screen and (max-width: 991px){
    .mybus-wrapper .mybus-ptb100{
        padding: 70px 0;
    }
}
@media only screen and (max-width: 767px){
    .mybus-wrapper .mybus-ptb100{
        padding: 50px 0;
    }
}
@media only screen and (max-width: 575px){
    .mybus-wrapper .mybus-ptb100{
        padding: 35px 0;
    }
}

.mybus-wrapper .mybus-banner{
    position: relative;
    background-color: rgba(251,133,133,0.30);
}
.mybus-wrapper .mybus-banner:before{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    background: url("../img/case-study-details/bus-ticket-booking-app/banner-bg.svg") no-repeat center;
    background-size: cover;
    width: 100%;
    height: 100%;
}

.mybus-wrapper .mybus-banner .mybus-container{
    position: relative;
    z-index: 2;
}

.mybus-wrapper .mybus-banner .inner-wrapper{
    display: flex;
    gap: 100px;
    align-items: center;
}
@media only screen and (min-width: 992px) and (max-width: 1199px){
    .mybus-wrapper .mybus-banner .inner-wrapper{
        gap: 70px;
    }
}
@media only screen and (max-width: 991px){
    .mybus-wrapper .mybus-banner .inner-wrapper{
        justify-content: center;
    }
}

@media only screen and (max-width: 991px){
    .mybus-wrapper .mybus-banner .leftside-wrap{
        max-width: none !important;
        text-align: center;
    }
}
@media only screen and (max-width: 767px){
    .mybus-wrapper .mybus-banner .leftside-wrap .logo-wrap img{
        max-width: 40%;
    }
}

.mybus-wrapper .mybus-banner .img-wrap{
    max-width: 590px;
    margin-left: auto;
    flex: 0 0 auto;
}
@media only screen and (max-width: 1199px){
    .mybus-wrapper .mybus-banner .img-wrap{
        max-width: 50%;
    }
}
@media only screen and (max-width: 991px){
    .mybus-wrapper .mybus-banner .img-wrap{
        max-width: none;
        margin: 35px 0 30px;
    }
}

.mybus-wrapper .mybus-banner .img-wrap img{
 position: relative;
}

.mybus-wrapper .mybus-banner .img-wrap .one{
    position: absolute;
    left: -10px;
    top: -10px;
    width: 200px;
    height: 100px;
    border-radius: 35px 0 35px 0;
    background-color: #FCB9B9;
}

@media only screen and (max-width: 991px){
    .mybus-wrapper .mybus-banner .img-wrap .one{
        display: none;
    }
}

.mybus-wrapper .mybus-banner .img-wrap .two{
    position: absolute;
    right: -10px;
    bottom: -10px;
    width: 200px;
    height: 100px;
    border-radius: 35px 0 35px 0;
    background-color: #FCB9B9;
}
@media only screen and (max-width: 991px){
    .mybus-wrapper .mybus-banner .img-wrap .two{
        display: none;
    }
}

.mybus-wrapper .mybus-about-section{
    margin-top: -90px;
    position: relative;
}

@media only screen and (max-width: 1199px){
    .mybus-wrapper .mybus-about-section{
        margin-top: 0;
        padding-top: 90px;
    }
}

@media only screen and (max-width: 991px){
    .mybus-wrapper .mybus-about-section{
        padding-top: 70px;
    }
}

@media only screen and (max-width: 767px){
    .mybus-wrapper .mybus-about-section{
        padding-top: 50px;
    }
}
@media only screen and (max-width: 575px){
    .mybus-wrapper .mybus-about-section{
        padding-top: 35px;
    }
}

.mybus-wrapper .mybus-about-section .about-wrap{
    display: flex;
    gap: 100px;
    align-items: end;
}

@media only screen and (max-width: 1199px){
    .mybus-wrapper .mybus-about-section .about-wrap{
        gap: 70px;
    }
}

@media only screen and (max-width: 575px){
    .mybus-wrapper .mybus-about-section .about-wrap{
        flex-direction: column;
        gap: 15px;
    }
}

.mybus-wrapper .mybus-about-section .about-wrap .img-wrap{
    flex: 0 0 auto;
}

@media only screen and (max-width: 991px){
    .mybus-wrapper .mybus-about-section .about-wrap .img-wrap{
        margin: 0 0 30px;
    }
}

.mybus-wrapper .mybus-about-section .about-wrap .about-text{
    padding: 55px 0;
}

@media only screen and (max-width: 1199px){
    .mybus-wrapper .mybus-about-section .about-wrap .about-text{
        padding: 0;
    }
}

.mybus-wrapper .mybus-full-banner{
    overflow: hidden;
}

.mybus-wrapper .mybus-features .features-wrapper{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 100px;
    margin-top: 20px;
}

@media only screen and (max-width: 1199px){
    .mybus-wrapper .mybus-features .features-wrapper{
        grid-gap: 70px;
    }
}

@media only screen and (max-width: 991px){
    .mybus-wrapper .mybus-features .features-wrapper{
        margin-top: 0;
        grid-template-columns: 1fr;
        grid-gap: 30px;
    }
}

.mybus-wrapper .mybus-features .features-wrapper .wrap-item{
    display: flex;
    flex-direction: column;
    gap: 100px;
}
@media only screen and (max-width: 1199px){
    .mybus-wrapper .mybus-features .features-wrapper .wrap-item{
        gap: 70px;
    }
}
@media only screen and (max-width: 991px){
    .mybus-wrapper .mybus-features .features-wrapper .wrap-item{
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 15px;
        white-space: nowrap;
        overflow: hidden;
        overflow-x: scroll;
    }
}
@media only screen and (max-width: 991px) {
    .mybus-wrapper .mybus-features .features-wrapper .wrap-item::-webkit-scrollbar {
        height: 8px;
    }
}
@media only screen and (max-width: 991px) {
    .mybus-wrapper .mybus-features .features-wrapper .wrap-item::-webkit-scrollbar-thumb {
        background-color: #ccc; /* Customize scrollbar color */
        border-radius: 4px;
    }
}
@media only screen and (max-width: 991px) {
    .mybus-wrapper .mybus-features .features-wrapper .wrap-item::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Customize scrollbar track color */
    }
}
.mybus-wrapper .mybus-features .features-wrapper .wrap-item:last-child{
    margin-top: 100px;
}
@media only screen and (max-width: 1199px){
    .mybus-wrapper .mybus-features .features-wrapper .wrap-item:last-child{
        margin-top: 90px;
    }
}
@media only screen and (max-width: 991px){
    .mybus-wrapper .mybus-features .features-wrapper .wrap-item:last-child{
        margin-top: 0;
    }
}
.mybus-wrapper .mybus-features .features-wrapper .wrap-item .item{
    padding:35px;
    position: relative;
}
@media only screen and (max-width: 991px){
    .mybus-wrapper .mybus-features .features-wrapper .wrap-item .item{
        min-width:70%;
        margin: 0 0 8px;
    }
}
@media only screen and (max-width: 767px){
    .mybus-wrapper .mybus-features .features-wrapper .wrap-item .item{
        padding: 25px 24px;
    }
}
@media only screen and (max-width:575px){
    .mybus-wrapper .mybus-features .features-wrapper .wrap-item .item{
        min-width: 80%;
    }
}
@media only screen and (max-width:480px){
    .mybus-wrapper .mybus-features .features-wrapper .wrap-item .item{
        padding: 20px 22px;
    }
}
@media only screen and (max-width:375px){
    .mybus-wrapper .mybus-features .features-wrapper .wrap-item .item{
        min-width: 90%;
    }
}
.mybus-wrapper .mybus-features .features-wrapper .wrap-item .item:after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: calc(100% - 166px);
    width: 100%;
    border-radius: 30px;
}
@media only screen and (max-width: 991px){
    .mybus-wrapper .mybus-features .features-wrapper .wrap-item .item:after{
        height: 100%;
    }
}

.mybus-wrapper .mybus-features .features-wrapper .wrap-item .item.one:after{
    background-color:#FB8585;
}
.mybus-wrapper .mybus-features .features-wrapper .wrap-item .item.two:after{
    background-color:#5DB6DC;
}
.mybus-wrapper .mybus-features .features-wrapper .wrap-item .item.three:after{
    background-color:#AAD05A;
}
.mybus-wrapper .mybus-features .features-wrapper .wrap-item .item.four:after{
    background-color:#BA93EC;
}
.mybus-wrapper .mybus-features .features-wrapper .wrap-item .item .inner-wrap{
    position: relative;
    z-index: 2;
}

@media only screen and (max-width: 991px){
    .mybus-wrapper .mybus-features .features-wrapper .wrap-item .item .inner-wrap{
        white-space: normal;
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: space-between;
    }
}

.mybus-wrapper .mybus-features .features-wrapper .wrap-item .item .inner-wrap span{
    color:#ffffff;
    margin: 0 0 15px;
}

@media only screen and (max-width: 991px){
    .mybus-wrapper .mybus-features .features-wrapper .wrap-item .item .inner-wrap span{
        margin: 0 0 8px;
    }
}

.mybus-wrapper .mybus-features .features-wrapper .wrap-item .item .inner-wrap ul li{
    color:#ffffff;
}

.mybus-wrapper .mybus-features .features-wrapper .wrap-item .item .inner-wrap ul li:before{
    filter: brightness(0) invert(1);
    top: 7px;
}

@media only screen and (max-width: 575px){
    .mybus-wrapper .mybus-features .features-wrapper .wrap-item .item .inner-wrap ul li:before{
     top: 5px;
    }
}

.mybus-wrapper .mybus-features .features-wrapper .wrap-item .item .inner-wrap .img-wrap{
    margin-top: 30px;
}

.mybus-wrapper .mybus-features .features-wrapper .wrap-item .item .inner-wrap .img-wrap img{
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3));
}

@media only screen and (max-width: 767px){
    .mybus-wrapper .mybus-features .features-wrapper .wrap-item .item .inner-wrap .img-wrap img{
        max-width: 55%;
    }
}

.mybus-wrapper .mybus-feature-screen{
    background-color: rgba(251,133,133,0.30);
    padding: 70px 0;
    position: relative;
}

.mybus-wrapper .mybus-feature-screen:before{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    background: url(../img/case-study-details/bus-ticket-booking-app/banner-bg.svg) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 100%;
}

.mybus-wrapper .mybus-feature-screen .inner-wrap{
    position: relative;
    z-index: 2;
}

.mybus-wrapper .mybus-techno-stack{
    overflow: hidden;
}

.mybus-wrapper .mybus-techno-stack .inner-content .logo-wrap{
    display:flex;
    flex-wrap: nowrap;
    gap: 95px;
    margin-top: 20px;
}
@media only screen and (min-width:1200px) and (max-width: 1365px){
    .mybus-wrapper .mybus-techno-stack .inner-content .logo-wrap{
        gap: 91px;
    }
}
@media only screen and (min-width:992px) and (max-width: 1199px){
    .mybus-wrapper .mybus-techno-stack .inner-content .logo-wrap{
        gap: 30px;
    }
}
@media only screen and (max-width: 991px){
    .mybus-wrapper .mybus-techno-stack .inner-content .logo-wrap{
        margin-top: 0;
    }
}
@media only screen and (max-width: 991px){
    .mybus-wrapper .mybus-techno-stack .inner-content .logo-wrap{
        gap: 25px;
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow: hidden;
        overflow-x: scroll;
    }
}

@media only screen and (max-width: 767px){
    .mybus-wrapper .mybus-techno-stack .inner-content .logo-wrap{
        gap: 15px;
    }
}

@media only screen and (max-width: 991px) {
    .mybus-wrapper .mybus-techno-stack .inner-content .logo-wrap::-webkit-scrollbar {
        height: 8px;
    }
}
@media only screen and (max-width: 991px) {
    .mybus-wrapper .mybus-techno-stack .inner-content .logo-wrap::-webkit-scrollbar-thumb {
        background-color: #ccc; /* Customize scrollbar color */
        border-radius: 4px;
    }
}
@media only screen and (max-width: 991px) {
    .mybus-wrapper .mybus-techno-stack .inner-content .logo-wrap::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Customize scrollbar track color */
    }
}

.mybus-wrapper .mybus-techno-stack .inner-content .logo-wrap .item{
    width: 20%;
    text-align: center;
}
@media only screen and (max-width: 991px){
    .mybus-wrapper .mybus-techno-stack .inner-content .logo-wrap .item{
        width: auto;
        margin: 0 0 5px;
    }
}
.mybus-wrapper .mybus-techno-stack .inner-content .logo-wrap .item .icon-outer{
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 5px;
    padding: 10px;
}
@media only screen and (min-width: 1200px) and (max-width: 1365px){
    .mybus-wrapper .mybus-techno-stack .inner-content .logo-wrap .item .icon-outer{
        margin: 0 auto;
    }
}
@media only screen and (max-width: 767px){
    .mybus-wrapper .mybus-techno-stack .inner-content .logo-wrap .item .icon-outer{
        width: 110px;
        height: 110px;
    }
}

@media only screen and (max-width: 767px){
    .mybus-wrapper .mybus-techno-stack .inner-content .logo-wrap .item .icon-outer .icon-wrap img{
        max-width: 80%;
    }
}

.mybus-wrapper .mybus-techno-stack .inner-content .logo-wrap .item .text-wrap a:hover{
    color: #FA8886;
}

.mybus-wrapper .mybus-super-admin .img-outer{
    padding: 100px 30px 70px;
    margin-top: 20px;
}
@media only screen and (max-width: 1199px){
    .mybus-wrapper .mybus-super-admin .img-outer{
        padding: 90px 30px 70px;
    }
}
@media only screen and (max-width: 991px){
    .mybus-wrapper .mybus-super-admin .img-outer{
        padding: 70px 25px 50px;
        margin-top: 0;
    }
}
@media only screen and (max-width: 767px){
    .mybus-wrapper .mybus-super-admin .img-outer{
        padding: 50px 25px;
    }
}
@media only screen and (max-width: 575px){
    .mybus-wrapper .mybus-super-admin .img-outer{
        padding: 35px 25px;
    }
}

.mybus-wrapper .mybus-super-admin .admin-content-wrap .item{
    margin: 0 0 40px;
}

@media only screen and (max-width: 991px){
    .mybus-wrapper .mybus-super-admin .admin-content-wrap .item{
        margin: 0 0 20px;
    }
}
@media only screen and (max-width: 767px){
    .mybus-wrapper .mybus-super-admin .admin-content-wrap .item{
        margin: 0 0 15px;
    }
}

.mybus-wrapper .mybus-super-admin .admin-content-wrap .item:last-child{
    margin: 0;
}

.mybus-wrapper .mybus-super-admin .admin-content-wrap .item span{
    margin: 0 0 15px;
}

@media only screen and (max-width: 991px){
    .mybus-wrapper .mybus-super-admin .admin-content-wrap .item span{
        margin: 0 0 8px;
    }
}

.mybus-wrapper ul.lists li{
    position: relative;
    padding: 0 0 0 25px;
    margin: 0 0 8px;
}
.mybus-wrapper ul.lists li:last-child{
 margin-bottom: 0;
}
.mybus-wrapper ul.lists li:before{
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    background: url("../img/case-study-details/bus-ticket-booking-app/command.svg") no-repeat;
    width: 16px;
    height: 16px;
}

@media only screen and (max-width: 575px){
    .mybus-wrapper ul.lists li:before{
        top: 5px;
    }
}

.mybus-wrapper .mybus-full-banner-two{
    overflow: hidden;
}

.mybus-wrapper .mybus-impact .inner-content .impact-numbers{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 30px;
}
@media only screen and (max-width:991px){
    .mybus-wrapper .mybus-impact .inner-content .impact-numbers{
        grid-gap: 25px;
    }
}
@media only screen and (max-width: 767px){
    .mybus-wrapper .mybus-impact .inner-content .impact-numbers{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
}

.mybus-wrapper .mybus-impact .inner-content .impact-numbers .item{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 45px;
    gap: 5px;
}
@media only screen and (max-width: 991px){
    .mybus-wrapper .mybus-impact .inner-content .impact-numbers .item{
        padding: 35px;
    }
}

@media only screen and (max-width: 767px){
    .mybus-wrapper .mybus-impact .inner-content .impact-numbers .item{
        width: calc(48% - 5px);
    }
}

@media only screen and (max-width: 575px){
    .mybus-wrapper .mybus-impact .inner-content .impact-numbers .item{
        padding: 30px;
    }
}
@media only screen and (max-width: 480px){
    .mybus-wrapper .mybus-impact .inner-content .impact-numbers .item{
        padding: 20px 22px;
    }
}
@media only screen and (max-width: 375px){
    .mybus-wrapper .mybus-impact .inner-content .impact-numbers .item{
        width: 100%;
    }
}

.mybus-wrapper .mybus-impact .inner-content .img-wrap img{
    border: 2px solid #000000;
}

.mybus-wrapper .mybus-testimonial .mybus-headtitle:after{
    display: none;
}

.mybus-wrapper .mybus-testimonial .inner-content{
    max-width: 880px;
    margin: 0 auto;
    color: #FFFFFF;
}

.mybus-wrapper .mybus-testimonial .inner-content .client-wrap .img-wrap img{
    border-radius: 20px;
}

.mybus-wrapper .mybus-testimonial .inner-content .client-wrap .title-wrap{
    position: relative;
    padding-bottom: 8px;
    margin: 15px 0;
    display: inline-block;
}

.mybus-wrapper .mybus-testimonial .inner-content .client-wrap .title-wrap:after{
    content: '';
    position: absolute;
    bottom: 0;
    width: calc(100% - 15px);
    height: 2px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: #FFFFFF;
}

/*bus ticket booking app css ends here*/



/*transport management system css starts here*/


@font-face {
    font-family: 'Schoolbell';
    src: url('../portfolio-fonts/transportation-management-system/Schoolbell-Regular.woff') format('woff'),
    url('../portfolio-fonts/transportation-management-system/Schoolbell-Regular.woff2') format('woff2'),
    url('../portfolio-fonts/transportation-management-system/Schoolbell-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Be Vietnam Pro';
    src: url('../portfolio-fonts/transportation-management-system/BeVietnamPro-Bold.woff') format('woff'),
    url('../portfolio-fonts/transportation-management-system/BeVietnamPro-Bold.woff2') format('woff2'),
    url('../portfolio-fonts/transportation-management-system/BeVietnamPro-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Be Vietnam Pro';
    src: url('../portfolio-fonts/transportation-management-system/BeVietnamPro-Medium.woff') format('woff'),
    url('../portfolio-fonts/transportation-management-system/BeVietnamPro-Medium.woff2') format('woff2'),
    url('../portfolio-fonts/transportation-management-system/BeVietnamPro-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Be Vietnam Pro';
    src: url('../portfolio-fonts/transportation-management-system/BeVietnamPro-Light.woff') format('woff'),
    url('../portfolio-fonts/transportation-management-system/BeVietnamPro-Light.woff2') format('woff2'),
    url('../portfolio-fonts/transportation-management-system/BeVietnamPro-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Epilogue';
    src: url('../portfolio-fonts/transportation-management-system/Epilogue-Black.woff') format('woff'),
    url('../portfolio-fonts/transportation-management-system/Epilogue-Black.woff2') format('woff2'),
    url('../portfolio-fonts/transportation-management-system/Epilogue-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Epilogue';
    src: url('../portfolio-fonts/transportation-management-system/Epilogue-Regular.woff') format('woff'),
    url('../portfolio-fonts/transportation-management-system/Epilogue-Regular.woff2') format('woff2'),
    url('../portfolio-fonts/transportation-management-system/Epilogue-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Epilogue';
    src: url('../portfolio-fonts/transportation-management-system/Epilogue-Bold.woff') format('woff'),
    url('../portfolio-fonts/transportation-management-system/Epilogue-Bold.woff2') format('woff2'),
    url('../portfolio-fonts/transportation-management-system/Epilogue-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
.wrapper-my-saas-admin {
    background-color: #111;
}

.wrapper-my-saas-admin .zoop-head-text{
    margin: 0 0 25px;
}

@media only screen and (max-width: 991px){
    .wrapper-my-saas-admin .zoop-head-text{
        margin: 0 0 15px;
    }
}

@media only screen and (max-width: 767px){
    .wrapper-my-saas-admin .zoop-head-text{
        margin: 0 0 10px;
    }
}


.wrapper-my-saas-admin .zoop-font-18 {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 300;
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 0;
}
@media only screen and (max-width: 991px) {
    .wrapper-my-saas-admin .zoop-font-18 {
        font-size: 16px;
        line-height: 26px;
    }
}
.wrapper-my-saas-admin .zoop-font-22 {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 500;
    font-size: 22px;
    line-height: 32px;
}
@media only screen and (max-width: 991px) {
    .wrapper-my-saas-admin .zoop-font-22 {
        font-size: 18px;
        line-height: 28px;
    }
}

@media only screen and (max-width: 767px) {
    .wrapper-my-saas-admin .zoop-font-22 {
        font-size: 16px;
        line-height: 26px;
    }
}


.wrapper-my-saas-admin .zoop-font-black {
    color: #181818;
}
.wrapper-my-saas-admin .zoop-font-gray {
    color: #ebebeb;
}
.wrapper-my-saas-admin .zoop-font-white {
    color: #ffffff;
}
.wrapper-my-saas-admin .zoop-font-44 {
    font-family: 'Epilogue';
    font-style: normal;
    font-weight: 900;
    font-size: 44px;
    line-height: 64px;
}
@media only screen and (min-width: 1200px) and (max-width: 1599px) {
    .wrapper-my-saas-admin .zoop-font-44 {
        font-size: 38px;
        line-height: 50px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .wrapper-my-saas-admin .zoop-font-44 {
        font-size: 36px;
        line-height: 48px;
    }
}
@media only screen and (max-width: 991px) {
    .wrapper-my-saas-admin .zoop-font-44 {
        font-size: 32px;
        line-height: 42px;
    }
}
@media only screen and (max-width: 375px) {
    .wrapper-my-saas-admin .zoop-font-44 {
        font-size: 24px;
        line-height: 34px;
    }
}

.wrapper-my-saas-admin .zoop-blue-light {
    color: #eaddff;
}
.wrapper-my-saas-admin .zoop-blue-dark {
    color: #21005d;
}
.wrapper-my-saas-admin .zoop-black {
    color: #181818;
}

.wrapper-my-saas-admin .zoopptb-120{
    padding: 120px 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px){
    .wrapper-my-saas-admin .zoopptb-120{
        padding: 100px 0;
    }
}
@media only screen and (max-width: 1199px){
    .wrapper-my-saas-admin .zoopptb-120{
        padding: 90px 0;
    }
}
@media only screen and (max-width: 991px){
    .wrapper-my-saas-admin .zoopptb-120{
        padding: 70px 0;
    }
}
@media only screen and (max-width: 767px){
    .wrapper-my-saas-admin .zoopptb-120{
        padding: 50px 0;
    }
}
@media only screen and (max-width: 575px){
    .wrapper-my-saas-admin .zoopptb-120{
        padding: 35px 0;
    }
}
.wrapper-my-saas-admin .zooppt-120{
    padding-top: 120px;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px){
    .wrapper-my-saas-admin .zooppt-120{
        padding-top: 100px;
    }
}
@media only screen and (max-width: 1199px){
    .wrapper-my-saas-admin .zooppt-120{
        padding-top: 90px;
    }
}
@media only screen and (max-width: 991px){
    .wrapper-my-saas-admin .zooppt-120{
        padding-top: 70px;
    }
}
@media only screen and (max-width: 767px){
    .wrapper-my-saas-admin .zooppt-120{
        padding-top: 50px;
    }
}
@media only screen and (max-width: 575px){
    .wrapper-my-saas-admin .zooppt-120{
        padding-top: 35px;
    }
}


.wrapper-my-saas-admin .zooppb-120{
    padding-bottom: 120px;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px){
    .wrapper-my-saas-admin .zooppb-120{
        padding-bottom: 100px;
    }
}
@media only screen and (max-width: 1199px){
    .wrapper-my-saas-admin .zooppb-120{
        padding-bottom: 90px;
    }
}
@media only screen and (max-width: 991px){
    .wrapper-my-saas-admin .zooppb-120{
        padding-bottom: 70px;
    }
}
@media only screen and (max-width: 767px){
    .wrapper-my-saas-admin .zooppb-120{
        padding-bottom: 50px;
    }
}
@media only screen and (max-width: 575px){
    .wrapper-my-saas-admin .zooppb-120{
        padding-bottom: 35px;
    }
}

.wrapper-my-saas-admin .zoopptb-100{
    padding: 100px 0;
}
@media only screen and (max-width: 1199px){
    .wrapper-my-saas-admin .zoopptb-100{
        padding: 90px 0;
    }
}
@media only screen and (max-width: 991px){
    .wrapper-my-saas-admin .zoopptb-100{
        padding: 70px 0;
    }
}
@media only screen and (max-width: 767px){
    .wrapper-my-saas-admin .zoopptb-100{
        padding: 50px 0;
    }
}
@media only screen and (max-width: 575px){
    .wrapper-my-saas-admin .zoopptb-100{
        padding: 35px 0;
    }
}

.wrapper-my-saas-admin .zooppb-100{
    padding-bottom: 100px;
}
@media only screen and (max-width: 1199px){
    .wrapper-my-saas-admin .zooppb-100{
        padding-bottom: 90px;
    }
}
@media only screen and (max-width: 991px){
    .wrapper-my-saas-admin .zooppb-100{
        padding-bottom: 70px;
    }
}
@media only screen and (max-width: 767px){
    .wrapper-my-saas-admin .zooppb-100{
        padding-bottom: 50px;
    }
}
@media only screen and (max-width: 575px){
    .wrapper-my-saas-admin .zooppb-100{
        padding-bottom: 35px;
    }
}

.wrapper-my-saas-admin .zoop-br30{
    border-radius: 30px;
}

@media only screen and (max-width: 1199px){
    .wrapper-my-saas-admin .zoop-br30{
        border-radius: 20px;
    }
}
@media only screen and (max-width: 767px){
    .wrapper-my-saas-admin .zoop-br30{
        border-radius: 15px;
    }
}
@media only screen and (max-width: 575px){
    .wrapper-my-saas-admin .zoop-br30{
        border-radius: 10px;
    }
}

.wrapper-my-saas-admin .zoop-br24{
    border-radius: 24px;
}
@media only screen and (max-width: 1199px){
    .wrapper-my-saas-admin .zoop-br24{
        border-radius: 20px;
    }
}
@media only screen and (max-width: 767px){
    .wrapper-my-saas-admin .zoop-br24{
        border-radius: 15px;
    }
}
@media only screen and (max-width: 575px){
    .wrapper-my-saas-admin .zoop-br24{
        border-radius: 10px;
    }
}
.wrapper-my-saas-admin .zoop-br20{
    border-radius: 20px;
}
@media only screen and (max-width: 767px){
    .wrapper-my-saas-admin .zoop-br20{
        border-radius: 15px;
    }
}
@media only screen and (max-width: 575px){
    .wrapper-my-saas-admin .zoop-br20{
        border-radius: 10px;
    }
}
.wrapper-my-saas-admin .zoop-br16{
    border-radius: 16px;
}
@media only screen and (max-width: 767px){
    .wrapper-my-saas-admin .zoop-br16{
        border-radius: 15px;
    }
}
@media only screen and (max-width: 575px){
    .wrapper-my-saas-admin .zoop-br16{
        border-radius: 10px;
    }
}
.wrapper-my-saas-admin .zoop-br10{
    border-radius: 10px;
}

.wrapper-my-saas-admin .zoop-mt30{
    margin-top: 30px;
}
.wrapper-my-saas-admin .zoop-mt40{
    margin-top: 40px;
}

@media only screen and (max-width: 991px){
    .wrapper-my-saas-admin .zoop-mt40{
        margin-top: 30px;
    }
}

.wrapper-my-saas-admin .zoop-mt50{
    margin-top: 50px;
}
@media only screen and (max-width: 991px){
    .wrapper-my-saas-admin .zoop-mt50{
        margin-top: 30px;
    }
}
.wrapper-my-saas-admin .zoop-mb50{
    margin-bottom: 50px;
}
@media only screen and (max-width: 991px){
    .wrapper-my-saas-admin .zoop-mb50{
        margin-bottom: 30px;
    }
}

.my-saas-admin-container{
}

@media only screen and (min-width: 1366px){
    .wrapper-my-saas-admin .my-saas-admin-container {
        max-width: 1280px !important;
        padding: 0;
        margin: 0 auto;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1365px) {
    .wrapper-my-saas-admin .my-saas-admin-container {
        width: calc(100% - 80px);
        max-width: none;
        padding: 0;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper-my-saas-admin .my-saas-admin-container {
        width: calc(100% - 60px);
        max-width: none;
        padding: 0;
    }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .wrapper-my-saas-admin .my-saas-admin-container {
        width: calc(100% - 40px);
        max-width: none;
        padding: 0;
    }
}

.visual-design-container{

}

@media only screen and (min-width: 1700px){
    .wrapper-my-saas-admin .visual-design-container {
        max-width: 1600px !important;
        padding: 0;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 1699px) {
    .wrapper-my-saas-admin .visual-design-container {
        width: calc(100% - 15px);
        max-width: none;
        padding: 0;
    }
}

@media only screen and (max-width: 575px) {
    .wrapper-my-saas-admin .visual-design-container {
        width: calc(100% - 30px);
        max-width: none;
        padding: 0;
    }
}



.wrapper-my-saas-admin .banner-bg-section {
    width: 100%;
    background: url("../img/case-study-details/transportation-management-system/webp/header-bg.webp") no-repeat;
    background-position: left top;
    background-size: cover;
}

.wrapper-my-saas-admin .banner-bg-section .title-h1 {
    margin-bottom: 0;
    text-align: center;
    font-size: 108px;
    line-height: 134px;
    font-family: 'Epilogue';
    font-style: normal;
    font-weight: 900;
    color: #eaddff;
}
@media only screen and (max-width: 1699px) {
    .wrapper-my-saas-admin .banner-bg-section .title-h1 {
        font-size: 100px;
        line-height: 110px;
    }
}
@media only screen and (max-width: 1365px) {
    .wrapper-my-saas-admin .banner-bg-section .title-h1 {
        font-size: 72px;
        line-height: 80px;
    }
}
@media only screen and (max-width: 1199px) {
    .wrapper-my-saas-admin .banner-bg-section .title-h1 {
        font-size: 48px;
        line-height: 56px;
    }
}
@media only screen and (max-width: 991px) {
    .wrapper-my-saas-admin .banner-bg-section .title-h1 {
        font-size: 38px;
        line-height: 50px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-my-saas-admin .banner-bg-section .title-h1 {
        font-size: 32px;
        line-height: 44px;
    }
}
@media only screen and (max-width: 575px) {
    .wrapper-my-saas-admin .banner-bg-section .title-h1 {
        font-size: 30px;
        line-height: 40px;
    }
}
.wrapper-my-saas-admin .banner-bg-section .title-h1 span {
    display: block;
}
.wrapper-my-saas-admin .banner-bg-section .title-h1 .header-right-icon {
    margin-left: -10px;
    margin-top: -9px;
}
@media only screen and (min-width: 1200px) {
    .wrapper-my-saas-admin .banner-bg-section .title-h1 .header-right-icon {
        margin-left: -12px;
        margin-top: -11px;
    }
}
.wrapper-my-saas-admin .banner-bg-section .title-h1 sup img {
    width: 24px;
    aspect-ratio: auto 1;
    max-width: 100%;
    height: auto;
    min-height: 100%;
}
.wrapper-my-saas-admin .banner-bg-section .title-h1 sub img {
    width: 36px;
    aspect-ratio: auto 1.5;
    max-width: 100%;
    height: auto;
    min-height: 100%;
}
.wrapper-my-saas-admin .banner-bg-section .title-h1 .header-left-icon {
    margin-bottom: -22px;
    margin-right: -18px;
}
.wrapper-my-saas-admin .banner-bg-section .free-version {
    margin-top: -73px;
}
@media only screen and (max-width: 1699px) {
    .wrapper-my-saas-admin .banner-bg-section .free-version {
        margin-top: -65px;
    }
}
@media only screen and (max-width: 1365px) {
    .wrapper-my-saas-admin .banner-bg-section .free-version {
        margin-top: -1px;
        padding-top: 4px;
    }
}
@media only screen and (max-width: 1199px) {
    .wrapper-my-saas-admin .banner-bg-section .free-version {
        margin-top: -1px;
        padding-top: 12px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-my-saas-admin .banner-bg-section .free-version {
        margin-top: -1px;
        padding-top: 12px;
    }
}
.wrapper-my-saas-admin .banner-bg-section .free-version img {
    width: 946px;
    aspect-ratio: auto 1.8695652174;
    max-width: 100%;
    height: auto;
    min-height: 100%;
}
@media only screen and (max-width: 1199px) {
    .wrapper-my-saas-admin .banner-bg-section .free-version img {
        max-width: 100%;
    }
}
.wrapper-my-saas-admin .banner-bg-section .saas-adin-header {
    font-family: 'Schoolbell';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    color: #fff;
}
@media only screen and (min-width: 1500px) {
    .wrapper-my-saas-admin .banner-bg-section .saas-adin-header {
        font-size: 26px;
        line-height: 30px;
    }
}
@media only screen and (max-width: 1499px) {
    .wrapper-my-saas-admin .banner-bg-section .saas-adin-header {
        padding-bottom: 12px;
    }
}
@media only screen and (max-width: 1199px) {
    .wrapper-my-saas-admin .banner-bg-section .saas-adin-header {
        padding-bottom: 15px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-my-saas-admin .banner-bg-section .saas-adin-header {
        padding-bottom: 20px;
    }
}
.wrapper-my-saas-admin .banner-bg-section .arrow-right-icon {
    margin-bottom: 20px;
    text-align: right;
    margin-right: -13px;
}
.wrapper-my-saas-admin .banner-bg-section .arrow-right-icon img {
    width: 50px;
    aspect-ratio: auto 1.0204081633;
    max-width: 100%;
    height: auto;
    min-height: 100%;
    text-align: right;
}
@media only screen and (max-width: 991px) {
    .wrapper-my-saas-admin .banner-bg-section .arrow-right-icon {
        display: none;
    }
}
.wrapper-my-saas-admin .banner-bg-section .arrow-left-icon {
    margin-bottom: 20px;
    margin-left: -13px;
}
.wrapper-my-saas-admin .banner-bg-section .arrow-left-icon img {
    width: 64px;
    aspect-ratio: auto 1.0666666667;
    max-width: 100%;
    height: auto;
    min-height: 100%;
}
@media only screen and (max-width: 991px) {
    .wrapper-my-saas-admin .banner-bg-section .arrow-left-icon {
        display: none;
    }
}
.wrapper-my-saas-admin .banner-bg-section .saas-adin-left {
    font-family: 'Schoolbell';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    text-align: right;
    color: #eaddff;
    transform: rotate(-4deg);
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .wrapper-my-saas-admin .banner-bg-section .saas-adin-left {
        font-size: 16px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .wrapper-my-saas-admin .banner-bg-section .saas-adin-left {
        font-size: 12px;
        line-height: 20px;
    }
}
@media only screen and (max-width: 991px) {
    .wrapper-my-saas-admin .banner-bg-section .saas-adin-left {
        display: none;
    }
}
.wrapper-my-saas-admin .banner-bg-section .saas-adin-right {
    font-family: 'Schoolbell';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    text-align: left;
    color: #fff;
    transform: rotate(4deg);
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .wrapper-my-saas-admin .banner-bg-section .saas-adin-right {
        font-size: 16px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .wrapper-my-saas-admin .banner-bg-section .saas-adin-right {
        font-size: 12px;
        line-height: 20px;
    }
}
@media only screen and (max-width: 991px) {
    .wrapper-my-saas-admin .banner-bg-section .saas-adin-right {
        display: none;
    }
}

.wrapper-my-saas-admin .bg-outer{
    background: #f5f8ff url("../img/case-study-details/transportation-management-system/webp/map.webp") no-repeat right;
    background-size: cover;
}
.wrapper-my-saas-admin .about-section-bg .zooop-saas-based {
    max-width: 955px;
}

@media only screen and (max-width: 991px) {
    .wrapper-my-saas-admin .about-section-bg .zooop-saas-based {
        margin-bottom: 30px;
    }
}

.wrapper-my-saas-admin .about-section-bg .platforms-based-main {
    max-width: 66%;
    display: flex;
    justify-content: space-between;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .wrapper-my-saas-admin .about-section-bg .platforms-based-main {
        max-width: 83%;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper-my-saas-admin .about-section-bg .platforms-based-main {
        max-width: 100%;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-my-saas-admin .about-section-bg .platforms-based-main {
        max-width: 100%;
    }
}
@media only screen and (max-width: 575px) {
    .wrapper-my-saas-admin .about-section-bg .platforms-based-main {
        flex-wrap: wrap;
        justify-content: center;
    }
}

.wrapper-my-saas-admin .about-section-bg .platforms-based-main ul {
    padding: 0;
    margin: 0;
}

@media only screen and (max-width: 575px) {
    .wrapper-my-saas-admin .about-section-bg .platforms-based-main ul{
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
        margin-top: 10px;
    }
}
.wrapper-my-saas-admin .about-section-bg .platforms-based-main ul li {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 20px;
    color: #181818;
    margin-left: 16px;
    margin-top: 7px;
    list-style: disc;
}
@media only screen and (min-width: 576px) and (max-width: 991px) {
    .wrapper-my-saas-admin .about-section-bg .platforms-based-main ul li {
        font-size: 14px;
        line-height: 18px;
    }
}
@media only screen and (max-width: 575px) {
    .wrapper-my-saas-admin .about-section-bg .platforms-based-main ul li {
        font-size: 15px;
        margin-top: 0;
    }
}


@media only screen and (max-width: 575px) {
    .wrapper-my-saas-admin .about-section-bg .platform-outer{
        margin-bottom: 20px;
    }
}

.wrapper-my-saas-admin .about-section-bg .platforms-title {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    color: #000;
}

@media only screen and (max-width: 575px) {
    .wrapper-my-saas-admin .about-section-bg .platforms-title{
        text-align: center;
    }
}

.wrapper-my-saas-admin .about-section-bg .about-the-video {
    width: 100%;
    overflow: hidden;
    line-height: 0;
}
.wrapper-my-saas-admin .tms-modules-section-bg {
    background: #f5f8ff;
}
.wrapper-my-saas-admin .tms-modules-section-bg .cost-management-wrapper{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
}
@media only screen and (max-width: 991px){
    .wrapper-my-saas-admin .tms-modules-section-bg .cost-management-wrapper{
        grid-template-columns: 1fr 1fr;
    }
}
@media only screen and (max-width: 767px){
    .wrapper-my-saas-admin .tms-modules-section-bg .cost-management-wrapper{
        grid-gap: 15px;
    }
}
@media only screen and (max-width: 575px){
    .wrapper-my-saas-admin .tms-modules-section-bg .cost-management-wrapper{
        display: flex;
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow: hidden;
        overflow-x: scroll;
    }
}

.wrapper-my-saas-admin .tms-modules-section-bg .cost-management-box {
    width: 100%;
    background: #fff;
    border: 1px solid #eaddff;
    padding: 40px 22px;
    text-align: center;
}
.wrapper-my-saas-admin .tms-modules-section-bg .cost-management-box:hover {
    background-color: #f9f9f9;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .wrapper-my-saas-admin .tms-modules-section-bg .cost-management-box {
        padding: 40px 15px;
    }
}

@media only screen and (max-width: 991px) {
    .wrapper-my-saas-admin .tms-modules-section-bg .cost-management-box {
        padding: 25px 22px;
    }
}

@media only screen and (max-width: 575px){
    .wrapper-my-saas-admin .tms-modules-section-bg .cost-management-box{
        white-space: normal;
        width: 100%;
        min-width: 80%;
        margin: 0 0 8px;
        padding: 20px;
    }
}

@media only screen and (max-width: 375px){
    .wrapper-my-saas-admin .tms-modules-section-bg .cost-management-box{
        padding: 15px;
        min-width: 90%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .wrapper-my-saas-admin .tms-modules-section-bg .cost-management-box .integrated {
        font-size: 16px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1280px) {
    .wrapper-my-saas-admin .tms-modules-section-bg .cost-management-box .integrated {
        font-size: 16px;
    }
}
@media only screen and (max-width: 575px) {
    .wrapper-my-saas-admin .tms-modules-section-bg .cost-management-box .integrated {
        font-size: 16px;
        line-height: 26px;
    }
}
.wrapper-my-saas-admin .tms-modules-section-bg .cost-management-box .cost-img-box {
    margin-bottom: 25px;
}
@media only screen and (max-width: 575px){
    .wrapper-my-saas-admin .tms-modules-section-bg .cost-management-box .cost-img-box {
        margin-bottom: 15px;
    }
}
@media only screen and (max-width: 991px){
    .wrapper-my-saas-admin .tms-modules-section-bg .cost-management-box .cost-img-box img {
        max-height: 150px;
    }
}
@media only screen and (max-width: 767px){
    .wrapper-my-saas-admin .tms-modules-section-bg .cost-management-box .cost-img-box img {
        max-height: 100px;
    }
}
.wrapper-my-saas-admin .tms-modules-section-bg .cost-management-box h3 {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    line-height: 140%;
    text-align: center;
    color: #21005d;
    margin-bottom: 15px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .wrapper-my-saas-admin .tms-modules-section-bg .cost-management-box h3 {
        font-size: 18px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-my-saas-admin .tms-modules-section-bg .cost-management-box h3 {
        margin-bottom: 10px;
    }
}
@media only screen and (max-width: 575px) {
    .wrapper-my-saas-admin .tms-modules-section-bg .cost-management-box h3 {
        margin-bottom: 8px;
    }
}

.wrapper-my-saas-admin .tms-modules-section-bg .header-right-icon-in {
    margin-left: -13px;
    margin-top: -5px;
}
.wrapper-my-saas-admin .tms-modules-section-bg sup img {
    width: 24px;
    aspect-ratio: auto 1;
    max-width: 100%;
    height: auto;
    min-height: 100%;
}
.wrapper-my-saas-admin .visual-design-section {
    position: relative;
}

.wrapper-my-saas-admin .visual-design-section:after {
    content: '';
    position: absolute;
    width: 580px;
    height: 800px;
    background: url("../img/case-study-details/transportation-management-system/webp/gradient-right.webp") no-repeat;
    background-size: 100% 100%;
    right: 0;
    top: -300px;
    z-index: 0;
    opacity: 0.8;
}
@media only screen and (max-width: 1365px) {
    .wrapper-my-saas-admin .visual-design-section:after {
        display: none;
    }
}
.wrapper-my-saas-admin .visual-design-section .visual-design-bg {
    background: #f5f8ff;
    position: relative;
    z-index: 1;
}

.wrapper-my-saas-admin .visual-design-section .visual-design-bg .visual-design-vide-box {
    width: 100%;
    background: #eaddff;
    overflow: hidden;
    line-height: 0;
}
.wrapper-my-saas-admin .visual-design-section .visual-design-bg sup img {
    width: 24px;
    aspect-ratio: auto 1;
    max-width: 100%;
    height: auto;
    min-height: 100%;
    margin-top: -10px;
    margin-left: -16px;
}
.wrapper-my-saas-admin .visual-design-section .visual-right-icon {
    margin-left: -11px;
    margin-top: -14px;
}
.wrapper-my-saas-admin .key-features-section {
    background-color: #111;
    position: relative;
}

.wrapper-my-saas-admin .key-features-section:after {
    content: '';
    position: absolute;
    width: 580px;
    height: 1100px;
    background: url("../img/case-study-details/transportation-management-system/webp/gradient-left.webp") no-repeat;
    background-size: 100% 100%;
    left: 0;
    top: -250px;
    z-index: 0;
}
@media only screen and (max-width: 1365px) {
    .wrapper-my-saas-admin .key-features-section:after {
        display: none;
    }
}
.wrapper-my-saas-admin .key-features-section:before {
    content: '';
    position: absolute;
    width: 580px;
    height: 800px;
    background: url("../img/case-study-details/transportation-management-system/webp/gradient-right.webp") no-repeat;
    background-size: 100% 100%;
    right: 0;
    bottom: -300px;
    z-index: 0;
    opacity: 0.8;
}
@media only screen and (max-width: 1365px) {
    .wrapper-my-saas-admin .key-features-section:before {
        display: none;
    }
}
.wrapper-my-saas-admin .key-features-section .key-features-bg {
    background: #000;
    position: relative;
    z-index: 1;
}
.wrapper-my-saas-admin .key-features-section .key-features-bg .key-features-vide-box {
    width: 100%;
    overflow: hidden;
    line-height: 0;
    max-width: 664px;
}

@media only screen and (max-width: 767px) {
    .wrapper-my-saas-admin .key-features-section .key-features-bg .key-features-vide-box {
        max-width: 100%;
    }
}
.wrapper-my-saas-admin .key-features-section .key-features-bg .key-features-vide-middle {
    max-width: 664px;
    overflow: hidden;
    margin-left: 0;
    line-height: 0;
}
@media only screen and (min-width: 1366px) {
    .wrapper-my-saas-admin .key-features-section .key-features-bg .key-features-vide-middle {
        margin-left: auto;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-my-saas-admin .key-features-section .key-features-bg .key-features-vide-middle {
        max-width: 100%;
    }
}

.wrapper-my-saas-admin .key-features-section .key-features-bg .features-right-icon {
    margin-left: -24px;
    margin-bottom: -15px;
}
.wrapper-my-saas-admin .key-features-section .key-features-bg .all-users-right {
    max-width: 525px;
}
@media only screen and (max-width: 1199px) {
    .wrapper-my-saas-admin .key-features-section .key-features-bg .all-users-right {
        margin-left: 0;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-my-saas-admin .key-features-section .key-features-bg .all-users-right {
        max-width: 100%;
        margin-left: 0;
    }
}
.wrapper-my-saas-admin .key-features-section .key-features-bg .all-users-left {
    max-width: 530px;
}
@media only screen and (max-width: 767px) {
    .wrapper-my-saas-admin .key-features-section .key-features-bg .all-users-left {
        max-width: 100%;
    }
}
.wrapper-my-saas-admin .key-features-section .key-features-bg sub img {
    width: 24px;
    aspect-ratio: auto 1;
    max-width: 100%;
    height: auto;
    min-height: 100%;
}
.wrapper-my-saas-admin .notifications-section-bg {
    width: 100%;
    background: #f5f8ff url("../img/case-study-details/transportation-management-system/webp/notification-map.webp") no-repeat;
    background-size: cover;
    overflow: hidden;
}

.wrapper-my-saas-admin .notifications-section-bg .get-instant-box h2{
    position:relative;
}

.wrapper-my-saas-admin .notifications-section-bg .get-instant-box {
    max-width: 540px;
    margin-left: 70px;
    padding-right: 10px;
}
@media only screen and (max-width: 991px) {
    .wrapper-my-saas-admin .notifications-section-bg .get-instant-box {
        margin-left: 20px;
        padding-right: 10px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-my-saas-admin .notifications-section-bg .get-instant-box {
        max-width: 100%;
        margin-left: 15px;
    }
}
.wrapper-my-saas-admin .notifications-section-bg .real-time-mi {
    position: absolute;
    left: -12px;
    top: -2px;
}
.wrapper-my-saas-admin .notifications-section-bg .real-time-mi img {
    width: 24px;
    aspect-ratio: auto 1;
    max-width: 100%;
    height: auto;
    min-height: 100%;
}

@media only screen and (max-width: 767px){
    .wrapper-my-saas-admin .notifications-section-bg .real-time-mi img {
        display: none;
    }
}
.wrapper-my-saas-admin .notifications-section-bg .notifications-im {
    margin-top: 7px;
    position: relative;
}
.wrapper-my-saas-admin .notifications-section-bg .notifications-im img {
    width: 985px;
    aspect-ratio: auto 1.3548830812;
    max-width: 100%;
    height: auto;
    min-height: 100%;
}
@media only screen and (max-width: 767px) {
    .wrapper-my-saas-admin .notifications-section-bg .notifications-im {
        display: none;
    }
}
.wrapper-my-saas-admin .notifications-section-bg .notifications-im-right {
    margin-left: -50px;
}
@media only screen and (min-width: 1500px) and (max-width: 1800px) {
    .wrapper-my-saas-admin .notifications-section-bg .notifications-im-right {
        margin-left: -24px;
    }
}
@media only screen and (min-width: 1366px) and (max-width: 1499px) {
    .wrapper-my-saas-admin .notifications-section-bg .notifications-im-right {
        margin-left: -20px;
        margin-top: 18px;
    }
}
@media only screen and (max-width: 1365px) {
    .wrapper-my-saas-admin .notifications-section-bg .notifications-im-right {
        margin-left: 0;
    }
}
@media only screen and (max-width: 991px) {
    .wrapper-my-saas-admin .notifications-section-bg .notifications-im-right {
        margin-top: 20px;
        margin-left: 0;
    }
}
@media only screen and (max-width: 850px) {
    .wrapper-my-saas-admin .notifications-section-bg .notifications-im-right {
        margin-top: 20px;
        margin-left: 0;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-my-saas-admin .notifications-section-bg .notifications-im-right {
        margin-left: -1px;
    }
}
.wrapper-my-saas-admin .notifications-section-bg .notifications-im-right img {
    width: 978px;
    aspect-ratio: auto 1.9138943249;
    max-width: 100%;
    height: auto;
    min-height: 100%;
}
.wrapper-my-saas-admin .manage-delivery-section {
    position: relative;
    overflow: hidden;
}

.wrapper-my-saas-admin .manage-delivery-section:after {
    content: '';
    position: absolute;
    width: 580px;
    height: 1111px;
    background: url("../img/case-study-details/transportation-management-system/webp/gradient-left.webp") no-repeat;
    background-size: 100% 100%;
    left: 0;
    top: 250px;
    z-index: 0;
    opacity: 0.7;
}
@media only screen and (max-width: 1365px) {
    .wrapper-my-saas-admin .manage-delivery-section:after {
        display: none;
    }
}
.wrapper-my-saas-admin .manage-delivery-section:before {
    content: '';
    position: absolute;
    width: 580px;
    height: 800px;
    background: url("../img/case-study-details/transportation-management-system/webp/gradient-right.webp") no-repeat;
    background-size: 100% 100%;
    right: 0;
    bottom: -500px;
    z-index: 0;
    opacity: 0.6;
}
@media only screen and (max-width: 1365px) {
    .wrapper-my-saas-admin .manage-delivery-section:before {
        display: none;
    }
}
.wrapper-my-saas-admin .manage-delivery-section .delivery-features-bg {
    background: #000;
    position: relative;
    z-index: 1;
}

.wrapper-my-saas-admin .manage-delivery-section .delivery-features-bg .delivery-features-vide-box {
    width: 100%;
    overflow: hidden;
    line-height: 0;
    max-width: 664px;
}

@media only screen and (max-width: 767px){
    .wrapper-my-saas-admin .manage-delivery-section .delivery-features-bg .delivery-features-vide-box {
        max-width: 100%;
    }
}

.wrapper-my-saas-admin .manage-delivery-section .delivery-features-bg .delivery-features-vide-middle {
    max-width: 664px;
    overflow: hidden;
    margin-left: 0;
    line-height: 0;
}
@media only screen and (min-width: 1366px) {
    .wrapper-my-saas-admin .manage-delivery-section .delivery-features-bg .delivery-features-vide-middle {
        margin-left: auto;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-my-saas-admin .manage-delivery-section .delivery-features-bg .delivery-features-vide-middle {
        max-width: 100%;
    }
}
.wrapper-my-saas-admin .manage-delivery-section .delivery-features-bg .delivery-solution {
    padding-bottom: 50px;
}
@media only screen and (max-width: 767px) {
    .wrapper-my-saas-admin .manage-delivery-section .delivery-features-bg .delivery-solution {
        padding-bottom: 36px;
    }
}
.wrapper-my-saas-admin .manage-delivery-section .delivery-features-bg .delivery-right-icon {
    margin-left: -15px;
    margin-bottom: -15px;
}
.wrapper-my-saas-admin .manage-delivery-section .delivery-features-bg .delivery-users-right {
    max-width: 525px;
}

@media only screen and (max-width: 767px) {
    .wrapper-my-saas-admin .manage-delivery-section .delivery-features-bg .delivery-users-right {
        max-width: 100%;
    }
}
.wrapper-my-saas-admin .manage-delivery-section .delivery-features-bg .delivery-users-left {
    max-width: 530px;
}
@media only screen and (max-width: 767px) {
    .wrapper-my-saas-admin .manage-delivery-section .delivery-features-bg .delivery-users-left {
        max-width: 100%;
    }
}

.wrapper-my-saas-admin .services-img-section {
    background-color: #111;
}
.wrapper-my-saas-admin .services-img-section .services-imgs img {
    width: 1920px;
    aspect-ratio: auto 1.6871704745;
    max-width: 100%;
    height: auto;
    min-height: 100%;
}
@media only screen and (min-width: 1921px) {
    .wrapper-my-saas-admin .services-img-section .services-imgs img {
        width: 100%;
    }
}
.wrapper-my-saas-admin .anytime-features-section {
    background-color: #111;
    position: relative;
    overflow:hidden;
}

.wrapper-my-saas-admin .anytime-features-section:after {
    content: '';
    position: absolute;
    width: 580px;
    height: 1100px;
    background: url("../img/case-study-details/transportation-management-system/webp/gradient-left.webp") no-repeat;
    background-size: 100% 100%;
    left: 0;
    bottom: 0;
    z-index: 0;
}
@media only screen and (max-width: 1365px) {
    .wrapper-my-saas-admin .anytime-features-section:after {
        display: none;
    }
}
.wrapper-my-saas-admin .anytime-features-section .anytime-features-bg {
    background: #000;
    position: relative;
    z-index: 1;
}

.wrapper-my-saas-admin .anytime-features-section .anytime-features-bg .anytime-features-vide-box {
    width: 100%;
    overflow: hidden;
    line-height: 0;
    max-width: 664px;
}
@media only screen and (max-width: 767px) {
    .wrapper-my-saas-admin .anytime-features-section .anytime-features-bg .anytime-features-vide-box {
        max-width: 100%;
    }
}
.wrapper-my-saas-admin .anytime-features-section .anytime-features-bg .anytime-features-vide-middle {
    max-width: 664px;
    border-radius: 10px;
    overflow: hidden;
    margin-left: 0;
    line-height: 0;
}
@media only screen and (min-width: 1366px) {
    .wrapper-my-saas-admin .anytime-features-section .anytime-features-bg .anytime-features-vide-middle {
        margin-left: auto;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-my-saas-admin .anytime-features-section .anytime-features-bg .anytime-features-vide-middle {
        max-width: 100%;
    }
}
.wrapper-my-saas-admin .anytime-features-section .anytime-features-bg .anytime-solution {
    padding-bottom: 50px;
}
@media only screen and (max-width: 767px) {
    .wrapper-my-saas-admin .anytime-features-section .anytime-features-bg .anytime-solution {
        padding-bottom: 36px;
    }
}
.wrapper-my-saas-admin .anytime-features-section .anytime-features-bg .anytime-right-icon {
    margin-left: -15px;
    margin-bottom: -15px;
}
.wrapper-my-saas-admin .anytime-features-section .anytime-features-bg .anytime-users-right {
    max-width: 525px;
}
@media only screen and (max-width: 767px) {
    .wrapper-my-saas-admin .anytime-features-section .anytime-features-bg .anytime-users-right {
        max-width: 100%;
    }
}
.wrapper-my-saas-admin .anytime-features-section .anytime-features-bg .anytime-users-left {
    max-width: 530px;
}
@media only screen and (max-width: 767px) {
    .wrapper-my-saas-admin .anytime-features-section .anytime-features-bg .anytime-users-left {
        max-width: 100%;
    }
}

.wrapper-my-saas-admin .typography-section-bg {
    background-color: #111;
}

.wrapper-my-saas-admin .typography-section-bg .content-wrap-outer{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

@media only screen and (max-width: 767px){
    .wrapper-my-saas-admin .typography-section-bg .content-wrap-outer{
        grid-template-columns: 1fr;
        grid-gap: 30px;
    }
}


.wrapper-my-saas-admin .typography-section-bg .content-wrap{
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: space-between;
}

@media only screen and (max-width: 991px){
    .wrapper-my-saas-admin .typography-section-bg .content-wrap{
        gap: 20px;
    }
}


.wrapper-my-saas-admin .typography-section-bg .typography-title-font{
    min-height: 64px;
}

.wrapper-my-saas-admin .typography-section-bg .typography-title-font .o-icon-main img {
    width: 29px;
    aspect-ratio: auto 1.7058823529;
    max-width: 100%;
    height: auto;
    min-height: 100%;
}
.wrapper-my-saas-admin .typography-section-bg .typography-title-font .o-icon-main .o-icon {
    margin-left: 81px;
}
@media only screen and (min-width: 1200px) and (max-width: 1599px) {
    .wrapper-my-saas-admin .typography-section-bg .typography-title-font .o-icon-main .o-icon {
        margin-left: 68px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .wrapper-my-saas-admin .typography-section-bg .typography-title-font .o-icon-main .o-icon {
        margin-left: 55px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper-my-saas-admin .typography-section-bg .typography-title-font .o-icon-main .o-icon {
        margin-left: 40px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-my-saas-admin .typography-section-bg .typography-title-font .o-icon-main .o-icon {
        margin-left: 58px;
    }
}
@media only screen and (max-width: 575px) {
    .wrapper-my-saas-admin .typography-section-bg .typography-title-font .o-icon-main .o-icon {
        margin-left: 45px;
    }
}
.wrapper-my-saas-admin .typography-section-bg .typography-title-font .o-icon-main .o-icon img {
    width: 29px;
    aspect-ratio: auto 1.7058823529;
    max-width: 100%;
    height: auto;
    min-height: 100%;
}
.wrapper-my-saas-admin .typography-section-bg .typography-title-font .typography-text {
    font-family: 'Epilogue';
    font-style: normal;
    font-weight: 900;
    font-size: 44px;
    line-height: 30px;
    margin-bottom: 0;
    color: #eaddff;
}
@media only screen and (min-width: 1200px) and (max-width: 1599px) {
    .wrapper-my-saas-admin .typography-section-bg .typography-title-font .typography-text {
        font-size: 38px;
        line-height: 28px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .wrapper-my-saas-admin .typography-section-bg .typography-title-font .typography-text {
        font-size: 32px;
        line-height: 22px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper-my-saas-admin .typography-section-bg .typography-title-font .typography-text {
        font-size: 26px;
        line-height: 20px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-my-saas-admin .typography-section-bg .typography-title-font .typography-text {
        font-size: 34px;
        line-height: 28px;
    }
}
@media only screen and (max-width: 575px) {
    .wrapper-my-saas-admin .typography-section-bg .typography-title-font .typography-text {
        font-size: 28px;
        line-height: 22px;
    }
}
.wrapper-my-saas-admin .typography-section-bg .aa-text-main {
    position: relative;
    text-align: center;
    background-color: #000;
    padding: 70px 35px;
    display: flex;
    align-items: center;
    min-height: 493px;
}

@media only screen and (min-width: 992px) and (max-width: 1365px) {
    .wrapper-my-saas-admin .typography-section-bg .aa-text-main {
        padding:35px;
        min-height: 435px;
    }
}
@media only screen and (max-width: 991px) {
    .wrapper-my-saas-admin .typography-section-bg .aa-text-main {
        padding:35px;
        min-height: 360px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-my-saas-admin .typography-section-bg .aa-text-main {
        min-height: auto;
        padding: 25px;
        justify-content: center;
    }
}

@media only screen and (max-width: 575px) {
    .wrapper-my-saas-admin .typography-section-bg .aa-text-main {
        padding: 20px 20px 25px;
    }
}
@media only screen and (max-width: 375px) {
    .wrapper-my-saas-admin .typography-section-bg .aa-text-main {
        padding: 15px 15px 20px;
    }
}

.wrapper-my-saas-admin .typography-section-bg .aa-text-main .big-text{
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 700;
    font-size: 370.026px;
    line-height: 468px;
    color: #161616;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    opacity: 0.6;
}

@media only screen and (min-width:1200px) and (max-width: 1365px){
    .wrapper-my-saas-admin .typography-section-bg .aa-text-main .big-text{
        font-size: 280px;
        line-height: 380px;
    }
}

@media only screen and (max-width: 991px){
    .wrapper-my-saas-admin .typography-section-bg .aa-text-main .big-text{
        font-size: 180px;
        line-height: 280px;
    }
}

@media only screen and (max-width: 767px){
    .wrapper-my-saas-admin .typography-section-bg .aa-text-main .big-text{
        font-size: 100px;
        line-height: 180px;
    }
}

.wrapper-my-saas-admin .typography-section-bg .aa-text-main .text-outer{
    position: relative;
}

.wrapper-my-saas-admin .typography-section-bg .aa-text-main .vietnam-pro-title-box {
    margin: 0 0 22px 0;
    text-align: left;
}

@media only screen and (max-width: 991px) {
    .wrapper-my-saas-admin .typography-section-bg .aa-text-main .vietnam-pro-title-box {
        margin: 0 0 11px 0;
    }
}

.wrapper-my-saas-admin .typography-section-bg .aa-text-main .vietnam-pro-title-box .vietnam-pro-title {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 700;
    font-size: 86px;
    line-height: 110px;
    color: #eaddff;
    text-align: left;
}
@media only screen and (max-width: 1499px) {
    .wrapper-my-saas-admin .typography-section-bg .aa-text-main .vietnam-pro-title-box .vietnam-pro-title {
        font-size: 74px;
        line-height: 90px;
    }
}
@media only screen and (max-width: 1199px) {
    .wrapper-my-saas-admin .typography-section-bg .aa-text-main .vietnam-pro-title-box .vietnam-pro-title {
        font-size: 60px;
        line-height: 80px;
    }
}
@media only screen and (max-width: 991px) {
    .wrapper-my-saas-admin .typography-section-bg .aa-text-main .vietnam-pro-title-box .vietnam-pro-title {
        font-size: 34px;
        line-height: 42px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-my-saas-admin .typography-section-bg .aa-text-main .vietnam-pro-title-box .vietnam-pro-title {
        font-size: 28px;
        line-height: 38px;
    }
}
@media only screen and (max-width: 575px) {
    .wrapper-my-saas-admin .typography-section-bg .aa-text-main .vietnam-pro-title-box .vietnam-pro-title {
        font-size: 24px;
        line-height: 36px;
    }
}
.wrapper-my-saas-admin .typography-section-bg .aa-text-main .color-palette-w {
    padding-top: 12px;
    text-align: left;
}
@media only screen and (max-width: 767px) {
    .wrapper-my-saas-admin .typography-section-bg .aa-text-main .color-palette-w {
        padding-top: 40px !important;
    }
}
.wrapper-my-saas-admin .typography-section-bg .aa-text-main .zoop-font-22 {
    line-height: 36px;
    color: #dedede;
    text-align: left;
}
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .wrapper-my-saas-admin .typography-section-bg .aa-text-main .zoop-font-22 {
        font-size: 20px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .wrapper-my-saas-admin .typography-section-bg .aa-text-main .zoop-font-22 {
        font-size: 16px;
    }
}
@media only screen and (max-width: 991px) {
    .wrapper-my-saas-admin .typography-section-bg .aa-text-main .zoop-font-22 {
        font-size: 14px;
        line-height: 24px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-my-saas-admin .typography-section-bg .aa-text-main .zoop-font-22 {
        font-size: 16px;
    }
}
.wrapper-my-saas-admin .typography-section-bg .style-right-icon {
    margin-left: -18px;
    margin-bottom: -16px;
}
.wrapper-my-saas-admin .typography-section-bg .font-color-ph {
    overflow: hidden;
    text-align: center;
    background-color: #000;
    padding: 35px;
    min-height: 493px;
}

@media only screen and (min-width: 992px) and (max-width: 1365px) {
    .wrapper-my-saas-admin .typography-section-bg .font-color-ph {
        min-height: 435px;
    }
}

@media only screen and (max-width: 991px){
    .wrapper-my-saas-admin .typography-section-bg .font-color-ph {
        min-height: 360px;
    }
}

@media only screen and (max-width: 767px){
    .wrapper-my-saas-admin .typography-section-bg .font-color-ph {
        min-height:auto;
        padding: 25px;
    }
}

@media only screen and (max-width: 575px){
    .wrapper-my-saas-admin .typography-section-bg .font-color-ph {
        padding: 20px;
    }
}
@media only screen and (max-width: 375px){
    .wrapper-my-saas-admin .typography-section-bg .font-color-ph {
        padding: 15px;
    }
}


.wrapper-my-saas-admin .typography-section-bg .font-color-ph img {
    width: 561px;
    aspect-ratio: auto 1.32;
    max-width: 100%;
    height: auto;
    min-height: 100%;
}
@media only screen and (max-width: 575px) {
    .wrapper-my-saas-admin .typography-section-bg .font-color-ph img {
        width: 100%;
    }
}
.wrapper-my-saas-admin .typography-section-bg sub img {
    width: 24px;
    aspect-ratio: auto 1;
    max-width: 100%;
    height: auto;
    min-height: 100%;
}
.wrapper-my-saas-admin .iconography-section-bg {
    background-color: #111;
}

.wrapper-my-saas-admin .iconography-section-bg .iconography-footer sup img {
    width: 29px;
    aspect-ratio: auto 1.7058823529;
    max-width: 100%;
    height: auto;
    min-height: 100%;
}
.wrapper-my-saas-admin .iconography-section-bg .iconography-design {
    margin-top: -22px;
    margin-left: -27px;
}
@media only screen and (max-width: 991px) {
    .wrapper-my-saas-admin .iconography-section-bg .iconography-design {
        margin-left: -24px;
    }
}
.wrapper-my-saas-admin .iconography-section-bg .iconography-design img {
    width: 29px;
    aspect-ratio: auto 1.7058823529;
    max-width: 100%;
    height: auto;
    min-height: 100%;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .wrapper-my-saas-admin .iconography-section-bg .iconography-all-icon {
        max-width: 430px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper-my-saas-admin .iconography-section-bg .iconography-all-icon {
        width: 330px;
    }
}
@media only screen and (max-width: 575px) {
    .wrapper-my-saas-admin .iconography-section-bg .iconography-all-icon {
        margin: 0 0 30px;
    }
}
.wrapper-my-saas-admin .iconography-section-bg .iconography-all-icon img {
    width: 473px;
    aspect-ratio: auto 3.1118421053;
    max-width: 473px;
    height: auto;
    min-height: 100%;
}

@media only screen and (max-width: 575px) {
    .wrapper-my-saas-admin .iconography-section-bg .iconography-all-icon img {
        max-width: none;
    }
}
.wrapper-my-saas-admin .iconography-section-bg .iconography-all-icon-right {
    padding-left: 75px;
    border-left: solid 1px #222;
}
@media only screen and (max-width: 1365px) {
    .wrapper-my-saas-admin .iconography-section-bg .iconography-all-icon-right {
        padding-left: 0;
        border-left: none;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .wrapper-my-saas-admin .iconography-section-bg .iconography-all-icon-right {
        max-width: 430px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wrapper-my-saas-admin .iconography-section-bg .iconography-all-icon-right {
        width: 330px;
    }
}
.wrapper-my-saas-admin .iconography-section-bg .iconography-all-icon-right img {
    width: 473px;
    aspect-ratio: auto 3.1118421053;
    max-width: 473px;
    height: auto;
    min-height: 100%;
}
@media only screen and (max-width: 575px) {
    .wrapper-my-saas-admin .iconography-section-bg .iconography-all-icon-right img {
        max-width: none;
    }
}
.wrapper-my-saas-admin .iconography-section-bg .block-bg {
    background-color: #000;
    padding: 60px 75px;
}

@media only screen and (min-width: 992px) and (max-width: 1365px){
    .wrapper-my-saas-admin .iconography-section-bg .block-bg {
        padding: 45px;
    }
}
@media only screen and (max-width: 991px){
    .wrapper-my-saas-admin .iconography-section-bg .block-bg {
        padding: 35px;
    }
}
@media only screen and (max-width: 767px){
    .wrapper-my-saas-admin .iconography-section-bg .block-bg {
        padding: 25px;
    }
}
@media only screen and (max-width: 575px){
    .wrapper-my-saas-admin .iconography-section-bg .block-bg {
        padding: 20px;
    }
}
@media only screen and (max-width: 375px){
    .wrapper-my-saas-admin .iconography-section-bg .block-bg {
        padding: 15px;
    }
}

.wrapper-my-saas-admin .saas-impact{
    background-color: #ffffff;
    padding-top: 230px;
    margin-top: -200px;
}

@media only screen and (max-width: 1365px){
    .wrapper-my-saas-admin .saas-impact{
        padding-top: 200px;
    }
}
@media only screen and (max-width: 767px){
    .wrapper-my-saas-admin .saas-impact{
        margin-top: 0;
        padding-top: 50px;
    }
}
@media only screen and (max-width: 575px){
    .wrapper-my-saas-admin .saas-impact{
        padding-top: 35px;
    }
}

@media only screen and (max-width: 767px){
    .wrapper-my-saas-admin .saas-impact .inner-wrap{
        text-align: center;
    }
}

.wrapper-my-saas-admin .saas-impact h2 sup{
    right: 0.3em;
    top: -.7em;
}

.wrapper-my-saas-admin .saas-impact .inner-wrap .impact-outer{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    max-width: 920px;
}

@media only screen and (max-width: 991px){
    .wrapper-my-saas-admin .saas-impact .inner-wrap .impact-outer{
        gap: 20px;
        max-width: none;
    }
}

@media only screen and (max-width: 767px){
    .wrapper-my-saas-admin .saas-impact .inner-wrap .impact-outer{
        gap: 15px;
    }
}

@media only screen and (max-width: 575px){
    .wrapper-my-saas-admin .saas-impact .inner-wrap .impact-outer{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
}

.wrapper-my-saas-admin .saas-impact .inner-wrap .impact-outer .item{
    border: 1px solid #eaddff;
    background-color: #F5F8FF;
    padding: 35px 49px;
    border-radius: 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

@media only screen and (max-width: 991px){
    .wrapper-my-saas-admin .saas-impact .inner-wrap .impact-outer .item{
        padding: 30px;
    }
}

@media only screen and (max-width: 767px){
    .wrapper-my-saas-admin .saas-impact .inner-wrap .impact-outer .item{
        padding: 25px;
    }
}

@media only screen and (max-width: 575px){
    .wrapper-my-saas-admin .saas-impact .inner-wrap .impact-outer .item{
        width: calc(50% - 15px);
        padding: 20px;
    }
}
@media only screen and (max-width: 375px){
    .wrapper-my-saas-admin .saas-impact .inner-wrap .impact-outer .item{
        padding: 15px;
    }
}

.wrapper-my-saas-admin .saas-impact .inner-wrap .impact-outer .item p{
    max-width: 180px;
}

.wrapper-my-saas-admin .zoop-testimonial{
    overflow: hidden;
}
.wrapper-my-saas-admin .zoop-testimonial h2 .design{
    transform: rotate(45deg);
    margin-top: -35px;
    margin-left: -12px;
}

@media only screen and (max-width: 767px){
    .wrapper-my-saas-admin .zoop-testimonial .testimonial-wrapper{
        text-align: center;
    }
}

.wrapper-my-saas-admin .zoop-testimonial .testimonial-wrapper .title-wrap p{
    font-family: 'Be Vietnam Pro';
    font-weight: 400;
    font-size: 22px;
    line-height: 32px;
    text-align: left;
}

@media only screen and (max-width: 991px){
    .wrapper-my-saas-admin .zoop-testimonial .testimonial-wrapper .title-wrap p{
        font-size: 18px;
        line-height: 28px;
    }
}

@media only screen and (max-width: 767px){
    .wrapper-my-saas-admin .zoop-testimonial .testimonial-wrapper .title-wrap p{
        text-align: center;
    }
}

.wrapper-my-saas-admin .zoop-testimonial .testimonial-wrapper .content-wrap{
    position: relative;
}
.wrapper-my-saas-admin .zoop-testimonial .testimonial-wrapper .content-wrap:before{
    content: '';
    position: absolute;
    right: -40px;
    top: -80px;
    background: url("../img/case-study-details/transportation-management-system/quote.svg") no-repeat;
    width:127px;
    height: 114px;
    opacity: 0.20;
}

@media only screen and (max-width: 1365px){
    .wrapper-my-saas-admin .zoop-testimonial .testimonial-wrapper .content-wrap:before{
        background-size: 70%;
    }
}

@media only screen and (max-width: 767px){
    .wrapper-my-saas-admin .zoop-testimonial .testimonial-wrapper .content-wrap:before{
        display: none;
    }
}

.wrapper-my-saas-admin .zoop-testimonial .testimonial-wrapper .client-block{
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 30px;
}

@media only screen and (max-width: 767px){
    .wrapper-my-saas-admin .zoop-testimonial .testimonial-wrapper .client-block{
        justify-content: center;
        gap: 15px;
    }
}
.wrapper-my-saas-admin .zoop-testimonial .testimonial-wrapper .client-block .img-wrap{
    flex: 0 0 auto;
}

.wrapper-my-saas-admin .zoop-testimonial .testimonial-wrapper .client-block .short-text{
  font-weight: 400;
    opacity: 0.50;
}

.wrapper-my-saas-admin .watching-section-bg {
    background-color: #111;
}
.wrapper-my-saas-admin .watching-section-bg .watching-mi {
    margin-top: 0;
}
.wrapper-my-saas-admin .watching-section-bg .watching-mi img {
    width: 1920px;
    aspect-ratio: auto 3.2708688245;
    max-width: 100%;
    height: auto;
    min-height: 100%;
}
@media only screen and (min-width: 1921px) {
    .wrapper-my-saas-admin .watching-section-bg .watching-mi img {
        width: 100%;
    }
}
.wrapper-my-saas-admin .thanks-for-section-bg {
    width: 100%;
}
.wrapper-my-saas-admin .thanks-for-section-bg .thanks-title-main {
    width: 100%;
    position: relative;
    border-top: solid 1px #ddd0f0;
    margin-top: 60px;
}
@media only screen and (max-width: 767px) {
    .wrapper-my-saas-admin .thanks-for-section-bg .thanks-title-main {
        border: none;
    }
}
@media only screen and (max-width: 575px) {
    .wrapper-my-saas-admin .thanks-for-section-bg .thanks-title-main {
        margin-top: 30px;
    }
}
.wrapper-my-saas-admin .thanks-for-section-bg .thanks-title-main .thanks-title {
    width: 100%;
}
.wrapper-my-saas-admin .thanks-for-section-bg .thanks-title-main .thanks-title .thanks-title-inn {
    max-width: 1150px;
    margin: 0 auto;
    font-family: 'Epilogue';
    font-weight: 900;
    font-size: 100px;
    line-height: 120%;
    text-align: center;
    color: #eaddff;
    margin-top: -60px;
    background-color: #111;
}
@media only screen and (max-width: 1365px) {
    .wrapper-my-saas-admin .thanks-for-section-bg .thanks-title-main .thanks-title .thanks-title-inn {
        font-size: 72px;
        max-width: 820px;
        margin-top: -35px;
    }
}
@media only screen and (max-width: 1199px) {
    .wrapper-my-saas-admin .thanks-for-section-bg .thanks-title-main .thanks-title .thanks-title-inn {
        font-size: 54px;
        max-width: 610px;
        margin-top: -35px;
    }
}
@media only screen and (max-width: 991px) {
    .wrapper-my-saas-admin .thanks-for-section-bg .thanks-title-main .thanks-title .thanks-title-inn {
        font-size: 40px;
        max-width: 460px;
        margin-top: -25px;
    }
}

@media only screen and (max-width: 575px) {
    .wrapper-my-saas-admin .thanks-for-section-bg .thanks-title-main .thanks-title .thanks-title-inn {
        font-size: 28px;
        line-height: 40px;
        max-width: none;
        margin-top: 0;
    }
}

@media only screen and (max-width: 375px) {
    .wrapper-my-saas-admin .thanks-for-section-bg .thanks-title-main .thanks-title .thanks-title-inn {
        font-size: 22px;
        line-height: 32px;
    }
}

.wrapper-my-saas-admin .available-section-bg .available-bg {
    background: #eaddff;
    border-radius: 30px;
    overflow: hidden;
}
@media only screen and (max-width: 991px) {
    .wrapper-my-saas-admin .available-section-bg .available-bg {
        border-radius: 20px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-my-saas-admin .available-section-bg .available-bg {
        border-radius: 20px;
    }
}
@media only screen and (max-width: 575px) {
    .wrapper-my-saas-admin .available-section-bg .available-bg {
        border-radius: 12px;
    }
}
.wrapper-my-saas-admin .available-section-bg .available-bg .available-text-main {
    padding: 80px 0 70px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
@media only screen and (max-width: 1199px) {
    .wrapper-my-saas-admin .available-section-bg .available-bg .available-text-main {
        padding: 70px 0 70px 50px;
    }
}
@media only screen and (max-width: 991px) {
    .wrapper-my-saas-admin .available-section-bg .available-bg .available-text-main {
        padding: 50px 0 40px 30px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-my-saas-admin .available-section-bg .available-bg .available-text-main {
        padding: 40px 30px;
        text-align: center;
    }
}
@media only screen and (max-width: 575px) {
    .wrapper-my-saas-admin .available-section-bg .available-bg .available-text-main {
        padding: 30px 25px;
    }
}
.wrapper-my-saas-admin .available-section-bg .available-bg .available-text-main .available-text {
    font-family: 'Epilogue';
    font-weight: 700;
    font-size: 44px;
    line-height: 140%;
    color: #21005d;
    margin-bottom: 25px;
}
@media only screen and (max-width: 1365px) {
    .wrapper-my-saas-admin .available-section-bg .available-bg .available-text-main .available-text {
        font-size: 38px;
    }
}
@media only screen and (max-width: 1199px) {
    .wrapper-my-saas-admin .available-section-bg .available-bg .available-text-main .available-text {
        font-size: 26px;
    }
}
@media only screen and (max-width: 991px) {
    .wrapper-my-saas-admin .available-section-bg .available-bg .available-text-main .available-text {
        font-size: 25px;
    }
}
@media only screen and (max-width: 767px) {
    .wrapper-my-saas-admin .available-section-bg .available-bg .available-text-main .available-text {
        margin-bottom: 15px;
    }
}
@media only screen and (max-width: 575px) {
    .wrapper-my-saas-admin .available-section-bg .available-bg .available-text-main .available-text {
        font-size: 22px;
    }
}
.wrapper-my-saas-admin .available-section-bg .available-bg .available-text-main .available-text span {
    font-family: 'Epilogue';
    font-style: normal;
    font-weight: 400;
}
.wrapper-my-saas-admin .available-section-bg .available-bg .available-text-main .sales-mi {
    font-family: 'Epilogue';
    font-weight: 400;
    font-size: 44px;
    line-height: 140%;
    color: #21005d;
}
@media only screen and (max-width: 1365px) {
    .wrapper-my-saas-admin .available-section-bg .available-bg .available-text-main .sales-mi {
        font-size: 38px;
    }
}
@media only screen and (max-width: 1199px) {
    .wrapper-my-saas-admin .available-section-bg .available-bg .available-text-main .sales-mi {
        font-size: 26px;
    }
}
@media only screen and (max-width: 991px) {
    .wrapper-my-saas-admin .available-section-bg .available-bg .available-text-main .sales-mi {
        font-size: 25px;
    }
}
@media only screen and (max-width: 575px) {
    .wrapper-my-saas-admin .available-section-bg .available-bg .available-text-main .sales-mi {
        font-size: 19px;
    }
}
.wrapper-my-saas-admin .available-section-bg .available-bg .artwork {
    margin-top: 10px;
    text-align: right;
}
.wrapper-my-saas-admin .available-section-bg .available-bg .artwork img {
    width: 525px;
    aspect-ratio: auto 1.4872521246;
    max-width: 100%;
    height: auto;
    min-height: 100%;
}


/*transport management system css ends here*/