/*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 screen and (max-width: 1199px) {
    .bhoj-detail-main .bhoj-new-section-banner {
        background: url("../img/case-study-details/food-delivery-app/webp/tablet/bhoj-banner-screen.webp") no-repeat;
        background-size: cover;
    }
}

@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: url("../img/case-study-details/food-delivery-app/webp/mobile/bhoj-banner-screen.webp") no-repeat;
        background-size: cover;
        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.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: -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)
    );
    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.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: -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)
        );
        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.3), rgba(0, 0, 0, 0.3));
    background: linear-gradient(to right, rgba(246, 226, 116, 0.3), rgba(0, 0, 0, 0.3));
}
.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.3), rgba(0, 0, 0, 0.3));
    background: linear-gradient(to left, rgba(246, 226, 116, 0.3), rgba(0, 0, 0, 0.3));
}
.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.4);
    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.4);
    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.html") 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: url("../img/case-study-details/ab-workout-app/webp/tablet/banner-bg.webp") no-repeat;
        background-size: 80%;
        background-position: right top;
    }
}

@media only screen and (max-width: 767px) {
    .wrapper-6pp-success .ab-banner-section:before {
        background: url("../img/case-study-details/ab-workout-app/webp/mobile/banner-bg.webp") no-repeat;
        background-size: 80%;
        background-position: right top;
    }
}

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

.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.1;
    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%);
}

.wrapper-6pp-success .ababout-section:before {
    background: url("../img/case-study-details/ab-workout-app/webp/tablet/about-bg.webp") no-repeat center;
}

@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.7;
}
/*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;
        background: #ffffff url("../img/case-study-details/ai-based-matrimony-app/webp/tablet/banner-bg.webp");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
}
@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;
        background: #ffffff url("../img/case-study-details/ai-based-matrimony-app/webp/mobile/banner-bg.webp");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
}

@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.1));
}

.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);
    -webkit-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);
    -webkit-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: 1199px) {
    .wrapper-better-half .section-couple-bg {
        background: url("../img/case-study-details/ai-based-matrimony-app/webp/tablet/couple-bg.webp");
        background-repeat: no-repeat;
        background-size: cover;
    }
}

@media only screen and (max-width: 767px) {
    .wrapper-better-half .section-couple-bg {
        background: url("../img/case-study-details/ai-based-matrimony-app/webp/mobile/couple-bg.webp");
        background-repeat: no-repeat;
        background-size: cover;
    }
}

@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: url("../img/case-study-details/ai-based-matrimony-app/webp/tablet/imagwbg.webp") no-repeat;
        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: url("../img/case-study-details/ai-based-matrimony-app/webp/mobile/imagwbg.webp") no-repeat;
        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.3);
}
.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") 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.3);
}
.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.3);
    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;
}

/*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: -0.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.2;
}

@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.5;
}

.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*/

/*business learning app css starts here*/

@font-face {
    font-family: "Open Sauce Sans";
    src: url("../portfolio-fonts/business-learning-app/OpenSauceSans-Light.woff2") format("woff2"),
        url("../portfolio-fonts/business-learning-app/OpenSauceSans-Light.woff") format("woff"),
        url("../portfolio-fonts/business-learning-app/OpenSauceSans-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Open Sauce Sans";
    src: url("../portfolio-fonts/business-learning-app/OpenSauceSans-Regular.woff2") format("woff2"),
        url("../portfolio-fonts/business-learning-app/OpenSauceSans-Regular.woff") format("woff"),
        url("../portfolio-fonts/business-learning-app/OpenSauceSans-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Open Sauce Sans";
    src: url("../portfolio-fonts/business-learning-app/OpenSauceSans-Medium.woff2") format("woff2"),
        url("../portfolio-fonts/business-learning-app/OpenSauceSans-Medium.woff") format("woff"),
        url("../portfolio-fonts/business-learning-app/OpenSauceSans-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Open Sauce Sans";
    src: url("../portfolio-fonts/business-learning-app/OpenSauceSans-SemiBold.woff2") format("woff2"),
        url("../portfolio-fonts/business-learning-app/OpenSauceSans-SemiBold.woff") format("woff"),
        url("../portfolio-fonts/business-learning-app/OpenSauceSans-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Open Sauce Sans";
    src: url("../portfolio-fonts/business-learning-app/OpenSauceSans-Bold.woff2") format("woff2"),
        url("../portfolio-fonts/business-learning-app/OpenSauceSans-Bold.woff") format("woff"),
        url("../portfolio-fonts/business-learning-app/OpenSauceSans-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Open Sauce Sans";
    src: url("../portfolio-fonts/business-learning-app/OpenSauceSans-ExtraBold.woff2") format("woff2"),
        url("../portfolio-fonts/business-learning-app/OpenSauceSans-ExtraBold.woff") format("woff"),
        url("../portfolio-fonts/business-learning-app/OpenSauceSans-ExtraBold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Open Sauce Sans";
    src: url("../portfolio-fonts/business-learning-app/OpenSauceSans-Black.woff2") format("woff2"),
        url("../portfolio-fonts/business-learning-app/OpenSauceSans-Black.woff") format("woff"),
        url("../portfolio-fonts/business-learning-app/OpenSauceSans-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

.jetson-wrapper {
    font-weight: 400;
    font-family: "Open Sauce Sans";
    overflow: hidden;
    color: #000;
    background-color: #000000;
    position: relative;
    z-index: 2;
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper {
        font-size: 16px;
        line-height: 28px;
    }
}
.jetson-wrapper .jetson-bg-black {
    background-color: #000;
}
.jetson-wrapper .jetson-bg-white {
    background-color: #ffffff;
}
.jetson-wrapper .jest-bg-lightblack {
    background-color: #101010;
}
.jetson-wrapper .jest-color-white {
    color: #fff;
}
.jetson-wrapper .jest-color-black {
    color: #000;
}
.jetson-wrapper .jest-color-grey {
    color: #2d2d2d;
}
.jetson-wrapper .jest-color-darkgrey {
    color: #a9a9a9;
}
.jetson-wrapper .jest-text-center {
    text-align: center;
}
.jetson-wrapper .jest-text-right {
    text-align: right;
}
.jetson-wrapper h1,
.jetson-wrapper h2,
.jetson-wrapper h3,
.jetson-wrapper h4,
.jetson-wrapper h5,
.jetson-wrapper h6 {
    font-family: "Open Sauce Sans";
    margin: 0;
}
.jetson-wrapper .jetson-container {
    position: relative;
}
@media only screen and (min-width: 1700px) {
    .jetson-wrapper .jetson-container {
        margin: 0 auto !important;
        width: 100%;
        max-width: 1600px;
        padding: 0;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1899px) {
    .jetson-wrapper .jetson-container {
        width: calc(100% - 10%);
        max-width: none;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .jetson-wrapper .jetson-container {
        width: calc(100% - 80px);
        max-width: none;
    }
}

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

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

.jetson-wrapper .jetptb-120 {
    padding: 120px 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .jetson-wrapper .jetptb-120 {
        padding: 110px 0;
    }
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetptb-120 {
        padding: 90px 0;
    }
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetptb-120 {
        padding: 70px 0;
    }
}
@media only screen and (max-width: 767px) {
    .jetson-wrapper .jetptb-120 {
        padding: 50px 0;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetptb-120 {
        padding: 35px 0;
    }
}
.jetson-wrapper .jetpt-120 {
    padding-top: 120px;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .jetson-wrapper .jetpt-120 {
        padding-top: 110px;
    }
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetpt-120 {
        padding-top: 90px;
    }
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetpt-120 {
        padding-top: 70px;
    }
}
@media only screen and (max-width: 767px) {
    .jetson-wrapper .jetpt-120 {
        padding-top: 50px;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetpt-120 {
        padding-top: 35px;
    }
}
.jetson-wrapper .jetpb-120 {
    padding-bottom: 120px;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetpb-120 {
        padding-bottom: 90px;
    }
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetpb-120 {
        padding-bottom: 70px;
    }
}
@media only screen and (max-width: 767px) {
    .jetson-wrapper .jetpb-120 {
        padding-bottom: 50px;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetpb-120 {
        padding-bottom: 35px;
    }
}
.jetson-wrapper .jetp-40 {
    padding: 40px;
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetp-40 {
        padding: 30px;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetp-40 {
        padding: 20px;
    }
}
.jetson-wrapper .gap-15 {
    gap: 15px;
}
.jetson-wrapper .jetmb-150 {
    margin-bottom: 150px;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .jetson-wrapper .jetmb-150 {
        margin-bottom: 110px;
    }
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetmb-150 {
        margin-bottom: 50px;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetmb-150 {
        margin-bottom: 30px;
    }
}
@media only screen and (max-width: 480px) {
    .jetson-wrapper .jetmb-150 {
        margin-bottom: 20px;
    }
}
.jetson-wrapper .mt-130 {
    margin-top: -130px;
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .mt-130 {
        margin-top: 0;
    }
}
.jetson-wrapper .jetmb-90 {
    margin-bottom: 90px;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetmb-90 {
        margin-bottom: 50px;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetmb-90 {
        margin-bottom: 30px;
    }
}
.jetson-wrapper .jetmt-90 {
    margin-top: 90px;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetmt-90 {
        margin-top: 50px;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetmt-90 {
        margin-top: 30px;
    }
}
.jetson-wrapper .jetmb-80 {
    margin-bottom: 80px;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetmb-80 {
        margin-bottom: 50px;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetmb-80 {
        margin-bottom: 30px;
    }
}
.jetson-wrapper .jetmt-40 {
    margin-top: 40px;
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetmt-40 {
        margin-top: 30px;
    }
}
.jetson-wrapper .jetmb-40 {
    margin-bottom: 40px;
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetmb-40 {
        margin-bottom: 30px;
    }
}
.jetson-wrapper .jetson-80 {
    font-size: 80px;
    line-height: 108px;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-80 {
        font-size: 50px;
        line-height: 60px;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetson-80 {
        font-size: 40px;
        line-height: 50px;
    }
}
.jetson-wrapper .jetson-64 {
    font-size: 64px;
    line-height: 72px;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-64 {
        font-size: 50px;
        line-height: 60px;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetson-64 {
        font-size: 40px;
        line-height: 50px;
    }
}
.jetson-wrapper .jetson-64s {
    font-size: 64px;
    line-height: 58px;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-64s {
        font-size: 50px;
        line-height: 60px;
    }
}
@media only screen and (max-width: 767px) {
    .jetson-wrapper .jetson-64s {
        font-size: 40px;
        line-height: 52px;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetson-64s {
        font-size: 35px;
        line-height: 45px;
    }
}
@media only screen and (max-width: 375px) {
    .jetson-wrapper .jetson-64s {
        font-size: 30px;
        line-height: 40px;
    }
}
.jetson-wrapper .jetson-44 {
    font-size: 44px;
    line-height: 58px;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-44 {
        font-size: 35px;
        line-height: 45px;
    }
}
@media only screen and (max-width: 767px) {
    .jetson-wrapper .jetson-44 {
        font-size: 30px;
        line-height: 40px;
    }
}
.jetson-wrapper .jetson-40 {
    font-size: 40px;
    line-height: 54px;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-40 {
        font-size: 35px;
        line-height: 45px;
    }
}
@media only screen and (max-width: 767px) {
    .jetson-wrapper .jetson-40 {
        font-size: 30px;
        line-height: 40px;
    }
}
.jetson-wrapper .jetson-32 {
    font-size: 32px;
    line-height: 44px;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-32 {
        font-size: 25px;
        line-height: 35px;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetson-32 {
        font-size: 22px;
        line-height: 28px;
    }
}
.jetson-wrapper .jetson-24 {
    font-size: 24px;
    line-height: 39px;
}
@media only screen and (max-width: 1365px) {
    .jetson-wrapper .jetson-24 {
        font-size: 20px;
        line-height: 30px;
    }
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetson-24 {
        font-size: 18px;
        line-height: 28px;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetson-24 {
        font-size: 16px;
        line-height: 26px;
    }
}
.jetson-wrapper .jetson-22 {
    font-size: 22px;
    line-height: 39px;
    margin: 0;
}
@media only screen and (max-width: 1365px) {
    .jetson-wrapper .jetson-22 {
        font-size: 20px;
        line-height: 32px;
    }
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetson-22 {
        font-size: 18px;
        line-height: 30px;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetson-22 {
        font-size: 16px;
        line-height: 26px;
    }
}
.jetson-wrapper .jetson-22s {
    font-size: 22px;
    line-height: 27px;
    margin: 0;
}
@media only screen and (max-width: 1365px) {
    .jetson-wrapper .jetson-22s {
        font-size: 20px;
        line-height: 30px;
    }
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetson-22s {
        font-size: 18px;
        line-height: 28px;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetson-22s {
        font-size: 16px;
        line-height: 26px;
    }
}
.jetson-wrapper .jetson-18 {
    font-size: 18px;
    line-height: 32px;
    margin: 0;
}
@media only screen and (max-width: 767px) {
    .jetson-wrapper .jetson-18 {
        font-size: 16px;
        line-height: 26px;
    }
}
.jetson-wrapper .jest-900 {
    font-weight: 900;
}
.jetson-wrapper .jest-800 {
    font-weight: 800;
}
.jetson-wrapper .jest-700 {
    font-weight: 700;
}
.jetson-wrapper .jest-600 {
    font-weight: 600;
}
.jetson-wrapper .jest-500 {
    font-weight: 500;
}
.jetson-wrapper .jest-400 {
    font-weight: 400;
}
.jetson-wrapper .jest-300 {
    font-weight: 300;
}
.jetson-wrapper .jetbr-100 {
    border-radius: 100px 100px 0 0;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetbr-100 {
        border-radius: 50px 50px 0 0;
    }
}
@media only screen and (max-width: 767px) {
    .jetson-wrapper .jetbr-100 {
        border-radius: 30px 30px 0 0;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetbr-100 {
        border-radius: 20px 20px 0 0;
    }
}
.jetson-wrapper .jetbr-60 {
    border-radius: 60px;
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetbr-60 {
        border-radius: 30px;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetbr-60 {
        border-radius: 20px;
    }
}
.jetson-wrapper .jetbr-50 {
    border-radius: 50px;
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetbr-50 {
        border-radius: 30px;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetbr-50 {
        border-radius: 20px;
    }
}
.jetson-wrapper .jetbr-40 {
    border-radius: 40px;
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetbr-40 {
        border-radius: 30px;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetbr-40 {
        border-radius: 20px;
    }
}
.jetson-wrapper h2.title {
    position: relative;
    padding-left: 20px;
    font-weight: 500;
    font-size: 24px;
    line-height: 30px;
    display: inline-block;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper h2.title {
        margin: 0 0 20px;
    }
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper h2.title {
        font-size: 30px;
        line-height: 38px;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper h2.title {
        font-size: 28px;
        line-height: 34px;
    }
}
@media only screen and (max-width: 480px) {
    .jetson-wrapper h2.title {
        padding-left: 12px;
    }
}
@media only screen and (max-width: 375px) {
    .jetson-wrapper h2.title {
        font-size: 26px;
        line-height: 32px;
    }
}
.jetson-wrapper h2.title:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 100%;
    background-color: #ffab00;
}
.jetson-wrapper .jetson-banner-section {
    overflow: hidden;
    position: relative;
}
.jetson-wrapper .jetson-banner-section .banner-outer {
    position: relative;
    padding-top: 90px;
    z-index: 2;
}
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .jetson-wrapper .jetson-banner-section .banner-outer {
        padding-top: 50px;
    }
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-banner-section .banner-outer {
        padding-top: 45px;
    }
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-banner-section .banner-outer .top-outer {
        margin-bottom: 30px;
        text-align: center;
        justify-content: center !important;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetson-banner-section .banner-outer .top-outer {
        margin-bottom: 25px;
    }
}
.jetson-wrapper .jetson-banner-section .banner-outer .top-outer .logo-wrap img {
    width: 161px;
    aspect-ratio: 3.3541666667;
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetson-banner-section .banner-outer .top-outer .logo-wrap img {
        max-width: 50%;
    }
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer {
        margin-top: 100px;
    }
}
@media only screen and (max-width: 767px) {
    .jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer {
        margin-top: 70px;
    }
}
.jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer .middle-text {
    padding-top: 150px;
    max-width: 1290px;
    margin: 0 auto;
}
@media only screen and (min-width: 1700px) and (max-width: 1899px) {
    .jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer .middle-text {
        padding-top: 150px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1699px) {
    .jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer .middle-text {
        padding-top: 100px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer .middle-text {
        max-width: 90%;
    }
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer .middle-text {
        padding-top: 0;
        max-width: 700px;
    }
}
@media only screen and (max-width: 767px) {
    .jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer .middle-text {
        max-width: none;
    }
}
.jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer .middle-text .div-outer {
    position: relative;
}
.jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer .middle-text .div-outer:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: -30px;
    background: url("../img/case-study-details/business-learning-app/underline.svg") no-repeat;
    width: 123px;
    height: 17px;
}
.jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer .middle-text .div-outer:after {
    content: "";
    position: absolute;
    background: url("../img/case-study-details/business-learning-app/webp/bg-pattern.webp") no-repeat center center;
    background-size: cover;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 596px;
    height: 596px;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer .middle-text .div-outer:after {
        display: none;
    }
}
.jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer .middle-text .big-one-text {
    position: relative;
    font-size: 96px;
    line-height: 118px;
    font-weight: 800;
    color: #fff;
    z-index: 2;
    display: inline;
}
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer .middle-text .big-one-text {
        font-size: 75px;
        line-height: 90px;
    }
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer .middle-text .big-one-text {
        font-size: 55px;
        line-height: 65px;
        margin: 0 0 30px;
    }
}
@media only screen and (max-width: 767px) {
    .jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer .middle-text .big-one-text {
        font-size: 40px;
        line-height: 50px;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer .middle-text .big-one-text {
        font-size: 32px;
        line-height: 45px;
    }
}

.jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer .middle-text .big-one-text em {
    font-style: normal;
}
.jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer .middle-text .big-one-text em.first {
    position: relative;
}
.jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer .middle-text .big-one-text em.first::after {
    content: attr(title);
    position: absolute;
    -webkit-text-stroke: 0.13em #000;
    left: 0;
    top: 0;
    z-index: -1;
}
.jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer .middle-text .big-one-text em.last {
    position: relative;
}
.jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer .middle-text .big-one-text em.last sub {
    position: absolute;
    bottom: -10px;
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer .middle-text .big-one-text em.last sub {
        display: none;
    }
}
.jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer .middle-text .big-one-text em.last sub img {
    width: 123px;
}
.jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer .middle-text .big-one-text em.last sup {
    top: -0.8em;
    right: 0.4em;
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer .middle-text .big-one-text em.last sup {
        display: none;
    }
}
.jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer .middle-text .big-one-text em.last sup img {
    width: 25px;
}

.jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer .middle-text .big-one-text .lighttext {
    font-weight: 300;
    position: relative;
}

.jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer .middle-text .div-one {
    position: absolute;
    right: 130px;
    top: -35px;
    padding: 20px;
    border-radius: 10px;
    background-color: #fefae0;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.64px;
    transform: rotate(-3.24deg);
    text-transform: uppercase;
}
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer .middle-text .div-one {
        right: 75px;
        top: -44px;
    }
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer .middle-text .div-one {
        font-size: 14px;
        padding: 10px;
        border-radius: 6px;
        right: 50px;
        top: -30px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer .middle-text .div-one {
        right: 50px;
        top: -27px;
    }
}
@media only screen and (max-width: 767px) {
    .jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer .middle-text .div-one {
        display: none;
    }
}
.jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer .middle-text .div-two {
    position: absolute;
    left: 238px;
    bottom: 87px;
    padding: 20px;
    border-radius: 10px;
    background-color: #c7f9cc;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.64px;
    transform: rotate(10.7deg);
    text-transform: uppercase;
    z-index: 2;
}
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer .middle-text .div-two {
        bottom: 65px;
        left: 155px;
    }
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer .middle-text .div-two {
        font-size: 14px;
        padding: 10px;
        border-radius: 6px;
        left: 100px;
        bottom: 35px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer .middle-text .div-two {
        left: 98px;
        bottom: 42px;
    }
}
@media only screen and (max-width: 767px) {
    .jetson-wrapper .jetson-banner-section .banner-outer .bottom-outer .middle-text .div-two {
        display: none;
    }
}
.jetson-wrapper .jetson-banner-section .img-outer {
    position: relative;
    padding-top: 54px;
    z-index: 2;
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetson-banner-section .img-outer {
        padding-top: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .jetson-wrapper .jetson-banner-section .img-outer {
        padding-top: 20px;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetson-banner-section .img-outer {
        padding-top: 10px;
    }
}
.jetson-wrapper .jetson-banner-section .img-outer:before {
    content: "";
    position: absolute;
    right: 15px;
    top: 0;
    background: url("../img/case-study-details/business-learning-app/dots.svg") no-repeat;
    background-size: cover;
    width: 66px;
    height: 54px;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-banner-section .img-outer:before {
        right: 0;
    }
}
@media only screen and (max-width: 767px) {
    .jetson-wrapper .jetson-banner-section .img-outer:before {
        display: none;
    }
}
.jetson-wrapper .jetson-banner-section .main-outer {
    height: 100%;
    position: relative;
    display: flex;
    align-items: end;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-banner-section .main-outer {
        display: none;
    }
}
.jetson-wrapper .jetson-banner-section .main-outer img {
    width: 24px;
    aspect-ratio: 0.96;
}
.jetson-wrapper .jetson-banner-section .main-outer .main-one {
    width: 280px;
    height: 280px;
    border: 1px solid transparent;
    border-radius: 50%;
    transform: rotate(-80deg);
    margin-left: auto;
    margin-bottom: 50px;
}
.jetson-wrapper .jetson-banner-section .main-outer .main-one .circleone {
    width: 64px;
    height: 64px;
    background-color: #0e0e0e;
    border-radius: 50%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    margin: auto;
    animation: jetcircleone 6s linear infinite alternate;
    display: flex;
    align-items: center;
    justify-content: center;
}
@keyframes jetcircleone {
    0% {
        transform: rotate(0deg) translate(-140px);
    }
    100% {
        transform: rotate(140deg) translate(-140px);
    }
}
.jetson-wrapper .jetson-banner-section .main-outer .main-two {
    width: 280px;
    height: 280px;
    border: 1px solid transparent;
    border-radius: 50%;
    transform: rotate(90deg);
    margin-right: auto;
    margin-bottom: 50px;
}
.jetson-wrapper .jetson-banner-section .main-outer .main-two .circletwo {
    width: 64px;
    height: 64px;
    background-color: #0e0e0e;
    border-radius: 50%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    margin: auto;
    animation: jetcircletwo 6s linear infinite alternate;
    display: flex;
    align-items: center;
    justify-content: center;
}
.jetson-wrapper .jetson-banner-section .main-outer .main-two .circletwo img {
    transform: rotate(180deg);
}
@keyframes jetcircletwo {
    100% {
        transform: rotate(140deg) translate(-140px);
    }
    0% {
        transform: rotate(0deg) translate(-140px);
    }
}
.jetson-wrapper .jetson-banner-section .img-wrap {
    margin-top: 30px;
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetson-banner-section .img-wrap {
        margin-top: 50px;
    }
}
@media only screen and (max-width: 480px) {
    .jetson-wrapper .jetson-banner-section .img-wrap {
        margin-top: 35px;
    }
}
.jetson-wrapper .jetson-banner-section .img-wrap img {
    width: 480px;
}
.jetson-wrapper .jetson-about {
    position: relative;
    background-color: #ffffff;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-about {
        text-align: center;
    }
}
.jetson-wrapper .jetson-about:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background-color: #000;
    height: 150px;
    z-index: -1;
}
.jetson-wrapper .jetson-about .short-info {
    max-width: 1140px;
    margin-left: auto;
}

.jetson-wrapper .jetson-our-work {
    position: relative;
}
.jetson-wrapper .jetson-our-work .discovery-ideas .content-wrap {
    max-width: 512px;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-our-work .discovery-ideas .content-wrap {
        max-width: none;
        text-align: center;
    }
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-our-work .discovery-ideas .right-content {
        margin-top: 30px;
    }
}
.jetson-wrapper .jetson-our-work .discovery-ideas .right-content ul {
    list-style-type: none;
    margin: 0;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-our-work .discovery-ideas .right-content ul {
        display: flex;
        flex-wrap: wrap;
    }
}
.jetson-wrapper .jetson-our-work .discovery-ideas .right-content ul li {
    font-size: 64px;
    line-height: 84px;
    font-weight: 700;
    display: flex;
    -webkit-background-clip: text;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.2);
    color: #000;
    letter-spacing: 1.28px;
    margin: 0 0 30px;
}
.jetson-wrapper .jetson-our-work .ideas-list li {
    transition: color 0.3s;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .jetson-wrapper .jetson-our-work .discovery-ideas .right-content ul li {
        font-size: 60px;
        line-height: 80px;
    }
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-our-work .discovery-ideas .right-content ul li {
        font-size: 35px;
        line-height: 45px;
        margin: 0 0 30px;
        flex-direction: column;
        text-align: center;
        width: 50%;
    }
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetson-our-work .discovery-ideas .right-content ul li {
        -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.2);
    }
}
@media only screen and (max-width: 767px) {
    .jetson-wrapper .jetson-our-work .discovery-ideas .right-content ul li {
        margin: 0 0 20px;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetson-our-work .discovery-ideas .right-content ul li {
        font-size: 32px;
        line-height: 42px;
    }
}
@media only screen and (max-width: 480px) {
    .jetson-wrapper .jetson-our-work .discovery-ideas .right-content ul li {
        width: 100%;
    }
}
.jetson-wrapper .jetson-our-work .discovery-ideas .right-content ul li span {
    margin-right: 30px;
    display: block;
    font-size: 22px;
    line-height: 27px;
    font-weight: 300;
    background: transparent;
    color: rgba(255, 255, 255, 0.2);
}
@media only screen and (min-width: 1199px) {
    .jetson-wrapper .jetson-our-work .discovery-ideas .right-content ul li span {
        margin-top: 5px;
    }
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-our-work .discovery-ideas .right-content ul li span {
        margin-right: 0;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetson-our-work .discovery-ideas .right-content ul li span {
        font-size: 18px;
        line-height: 24px;
    }
}
.jetson-wrapper .jetson-our-work .discovery-ideas .right-content ul li.text-active {
    color: #fff;
}
.jetson-wrapper .jetson-our-work .discovery-ideas .right-content ul li.text-active span {
    color: #fff;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-our-work .color-wrapper .color-typo {
        text-align: center;
    }
}
.jetson-wrapper .jetson-our-work .color-wrapper .color-typo .container {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-our-work .color-wrapper .color-typo .title-wrap {
        margin: 0 0 10px;
    }
}
.jetson-wrapper .jetson-our-work .color-wrapper .colors-info .gradient-box {
    position: relative;
    display: flex;
    align-items: stretch;
    height: 100%;
    max-width: 560px;
    gap: 20px;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-our-work .color-wrapper .colors-info .gradient-box {
        margin: 0 auto 50px;
        max-width: none;
        justify-content: center;
    }
}
@media only screen and (max-width: 767px) {
    .jetson-wrapper .jetson-our-work .color-wrapper .colors-info .gradient-box {
        margin: 0 auto 30px;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetson-our-work .color-wrapper .colors-info .gradient-box {
        display: block;
        height: auto;
    }
}
.jetson-wrapper .jetson-our-work .color-wrapper .colors-info .gradient-box .img-wrap {
    height: 100%;
    text-align: center;
    max-width: 500px;
}
@media only screen and (max-width: 1499px) {
    .jetson-wrapper .jetson-our-work .color-wrapper .colors-info .gradient-box .img-wrap {
        max-width: 80%;
    }
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetson-our-work .color-wrapper .colors-info .gradient-box .img-wrap {
        margin: 0 0 30px;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetson-our-work .color-wrapper .colors-info .gradient-box .img-wrap {
        margin: 0 auto;
    }
}
.jetson-wrapper .jetson-our-work .color-wrapper .colors-info .gradient-box .img-wrap img {
    width: 502px;
    aspect-ratio: 1;
}
.jetson-wrapper .jetson-our-work .color-wrapper .colors-info .gradient-box .colors-main {
    width: 32px;
    background: linear-gradient(to bottom, #ffab00, #ff00dc);
    position: relative;
    border-radius: 8px;
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetson-our-work .color-wrapper .colors-info .gradient-box .colors-main {
        margin-top: 30px;
        width: 100%;
        height: 32px;
        background: linear-gradient(to right, #ffab00, #ff00dc);
    }
}
.jetson-wrapper .jetson-our-work .color-wrapper .colors-info .gradient-box .colors-main .color-pick {
    height: 20px;
    width: 44px;
    border-radius: 5px;
    background-color: transparent;
    border: 2px solid #fff;
    position: absolute;
    bottom: 0;
    left: -6px;
    filter: drop-shadow(10px 10px 25px rgba(0, 0, 0, 0.75));
    animation: jetMoveUpDown 8s linear infinite;
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetson-our-work .color-wrapper .colors-info .gradient-box .colors-main .color-pick {
        right: 0;
        left: auto;
        animation: jetMoveLeftRight 8s linear infinite;
        height: 44px;
        width: 20px;
        top: -6px;
    }
}
@keyframes jetMoveUpDown {
    0%,
    100% {
        bottom: 0;
    }
    50% {
        bottom: 95%;
    }
}
@-webkit-keyframes jetMoveUpDown {
    0%,
    100% {
        bottom: 0;
    }
    50% {
        bottom: 95%;
    }
}
@-moz-keyframes jetMoveUpDown {
    0%,
    100% {
        bottom: 0;
    }
    50% {
        bottom: 95%;
    }
}
@keyframes jetMoveLeftRight {
    0%,
    100% {
        right: 0;
    }
    50% {
        right: 95%;
    }
}
@-webkit-keyframes jetMoveLeftRight {
    0%,
    100% {
        right: 0;
    }
    50% {
        right: 95%;
    }
}
@-moz-keyframes jetMoveLeftRight {
    0%,
    100% {
        right: 0;
    }
    50% {
        right: 95%;
    }
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-our-work .color-wrapper .colors-info .fonts-wrapper .font-name {
        text-align: center;
    }
}
.jetson-wrapper .jetson-our-work .color-wrapper .colors-info .fonts-wrapper .font-lists {
    display: grid;
    padding: 0;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    list-style-type: none;
}
@media only screen and (max-width: 1799px) {
    .jetson-wrapper .jetson-our-work .color-wrapper .colors-info .fonts-wrapper .font-lists {
        display: flex;
        white-space: nowrap;
        flex-wrap: nowrap;
        overflow: hidden;
        overflow-x: scroll;
    }
}
@media only screen and (max-width: 1799px) {
    .jetson-wrapper .jetson-our-work .color-wrapper .colors-info .fonts-wrapper .font-lists::-webkit-scrollbar {
        height: 8px;
    }
}
@media only screen and (max-width: 1799px) {
    .jetson-wrapper .jetson-our-work .color-wrapper .colors-info .fonts-wrapper .font-lists::-webkit-scrollbar-thumb {
        background-color: #ccc; /* Customize scrollbar color */
        border-radius: 4px;
    }
}
@media only screen and (max-width: 1799px) {
    .jetson-wrapper .jetson-our-work .color-wrapper .colors-info .fonts-wrapper .font-lists::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Customize scrollbar track color */
    }
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-our-work .color-wrapper .colors-info .fonts-wrapper .font-lists {
        justify-content: center;
    }
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetson-our-work .color-wrapper .colors-info .fonts-wrapper .font-lists {
        justify-content: center;
    }
}
@media only screen and (max-width: 767px) {
    .jetson-wrapper .jetson-our-work .color-wrapper .colors-info .fonts-wrapper .font-lists {
        justify-content: start;
    }
}
.jetson-wrapper .jetson-our-work .color-wrapper .colors-info .fonts-wrapper .font-lists li {
    color: #fff;
}
@media only screen and (max-width: 1799px) {
    .jetson-wrapper .jetson-our-work .color-wrapper .colors-info .fonts-wrapper .font-lists li {
        margin: 0 0 10px;
    }
}
.jetson-wrapper .jetson-our-work .color-wrapper .colors-info .fonts-wrapper .font-lists li .big-text {
    position: relative;
    padding: 20px 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin: 0 0 25px;
}
@media only screen and (max-width: 767px) {
    .jetson-wrapper .jetson-our-work .color-wrapper .colors-info .fonts-wrapper .font-lists li .big-text {
        padding: 15px 20px;
    }
}
.jetson-wrapper .jetson-our-work .color-wrapper .colors-info .fonts-wrapper .font-lists li .small-text {
    padding-left: 25px;
}
@media only screen and (max-width: 767px) {
    .jetson-wrapper .jetson-our-work .color-wrapper .colors-info .fonts-wrapper .font-lists li .small-text {
        padding-left: 20px;
    }
}

.jetson-wrapper .jetson-our-work:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background-color: #ffffff;
    height: 150px;
    z-index: -1;
}
.jetson-wrapper .jetson-solution {
    border-radius: 100px;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-solution {
        border-radius: 50px;
    }
}
@media only screen and (max-width: 767px) {
    .jetson-wrapper .jetson-solution {
        border-radius: 30px;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetson-solution {
        border-radius: 20px;
    }
}

.jetson-wrapper .jetson-solution .solution-outer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 35px;
    margin-top: 200px;
}
@media only screen and (min-width: 1500px) and (max-width: 1599px) {
    .jetson-wrapper .jetson-solution .solution-outer {
        margin-top: 130px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .jetson-wrapper .jetson-solution .solution-outer {
        margin-top: 110px;
    }
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-solution .solution-outer {
        margin-top: 90px;
    }
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetson-solution .solution-outer {
        margin-top: 50px;
        grid-gap: 30px;
        display: flex;
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow: hidden;
        overflow-x: scroll;
    }
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetson-solution .solution-outer::-webkit-scrollbar {
        height: 8px;
    }
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetson-solution .solution-outer::-webkit-scrollbar-thumb {
        background-color: #ccc; /* Customize scrollbar color */
        border-radius: 4px;
    }
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetson-solution .solution-outer::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Customize scrollbar track color */
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetson-solution .solution-outer {
        margin-top: 35px;
    }
}

.jetson-wrapper .jetson-solution .solution-outer .item {
    border: 1px solid #000000;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    position: relative;
    overflow: hidden;
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetson-solution .solution-outer .item {
        padding: 30px;
        width: 100%;
        min-width: 80%;
        margin: 0 0 8px;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetson-solution .solution-outer .item {
        padding: 20px 22px;
        gap: 10px;
    }
}
.jetson-wrapper .jetson-solution .solution-outer .item:before {
    content: "";
    position: absolute;
    background: url("../img/case-study-details/business-learning-app/new.svg") no-repeat center;
    background-size: cover;
    width: 408px;
    height: 189px;
    right: 10px;
    top: 10px;
}

@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetson-solution .solution-outer .item:before {
        display: none;
    }
}

.jetson-wrapper .jetson-solution .solution-outer .item .numb {
    width: 120px;
    height: 120px;
    border-radius: 99em;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #181818;
    position: relative;
    z-index: 8;
}

@media only screen and (max-width: 1365px) {
    .jetson-wrapper .jetson-solution .solution-outer .item .numb {
        width: 100px;
        height: 100px;
    }
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetson-solution .solution-outer .item .numb {
        width: 70px;
        height: 70px;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetson-solution .solution-outer .item .numb {
        margin: 0 0 10px;
        width: 55px;
        height: 55px;
    }
}

.jetson-wrapper .jetson-solution .solution-outer .item .info-text {
    color: #1e1e1e;
    position: relative;
    z-index: 8;
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetson-solution .solution-outer .item .info-text {
        white-space: normal;
    }
}
.jetson-wrapper .jetson-solution .solution-outer .item p {
    position: relative;
    z-index: 8;
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetson-solution .solution-outer .item p {
        white-space: normal;
    }
}

.jetson-wrapper .jetson-icon-assets .mob-grid-app .row {
    height: 100%;
}
@media only screen and (max-width: 767px) {
    .jetson-wrapper .jetson-icon-assets .mob-grid-app .row {
        height: auto;
    }
}
.jetson-wrapper .jetson-icon-assets .mob-grid-app .row .common-div {
    overflow: hidden;
    height: 100%;
    position: relative;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-icon-assets .mob-grid-app .row .common-div {
        text-align: center;
        margin: 0 0 30px;
        height: auto;
    }
}

.jetson-wrapper .jetson-icon-assets .mob-grid-app .row .common-div .small-text {
    position: relative;
    z-index: 9;
    padding: 10px 16px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 60px;
}
.jetson-wrapper .jetson-icon-assets .mob-grid-app .row .common-div.left {
    padding: 40px 40px 0 40px;
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetson-icon-assets .mob-grid-app .row .common-div.left {
        padding: 20px 20px 0 20px;
    }
}
.jetson-wrapper .jetson-icon-assets .mob-grid-app .row .common-div.left .img-outer {
    margin-top: 110px;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-icon-assets .mob-grid-app .row .common-div.left .img-outer {
        margin-top: 50px;
    }
}
@media only screen and (max-width: 767px) {
    .jetson-wrapper .jetson-icon-assets .mob-grid-app .row .common-div.left .img-outer {
        margin-top: 30px;
    }
}
.jetson-wrapper .jetson-icon-assets .mob-grid-app .row .common-div.left .img-outer .img-wrapper {
    gap: 60px;
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetson-icon-assets .mob-grid-app .row .common-div.left .img-outer .img-wrapper {
        display: block !important;
        text-align: center;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetson-icon-assets .mob-grid-app .row .common-div.left .img-outer .img-wrap-left {
        margin: 0 0 30px;
    }
}
.jetson-wrapper .jetson-icon-assets .mob-grid-app .row .common-div.left .img-outer .img-wrap-left img {
    width: 128px;
    aspect-ratio: 1;
    filter: drop-shadow(27.84px 19.09px 42.95px rgba(0, 0, 0, 0.35));
}
.jetson-wrapper .jetson-icon-assets .mob-grid-app .row .common-div.left .img-outer .img-wrap-right img {
    width: 350px;
    filter: drop-shadow(27.84px 19.09px 42.95px rgba(0, 0, 0, 0.35));
}
.jetson-wrapper .jetson-icon-assets .mob-grid-app .row .common-div.right {
    padding: 40px;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-icon-assets .mob-grid-app .row .common-div.right {
        margin-bottom: 0;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetson-icon-assets .mob-grid-app .row .common-div.right {
        padding: 20px;
    }
}
.jetson-wrapper .jetson-icon-assets .mob-grid-app .row .common-div.right .middle-img {
    position: absolute;
    right: 0;
    left: 0;
    margin: 0 auto;
    text-align: center;
    top: 0;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-icon-assets .mob-grid-app .row .common-div.right .middle-img {
        position: relative;
        margin-top: 50px;
    }
}
@media only screen and (max-width: 767px) {
    .jetson-wrapper .jetson-icon-assets .mob-grid-app .row .common-div.right .middle-img {
        margin-top: 30px;
    }
}
.jetson-wrapper .jetson-icon-assets .mob-grid-app .row .common-div.right .middle-img img {
    width: 388px;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .jetson-wrapper .jetson-icon-assets .mob-grid-app .row .common-div.right .middle-img img {
        max-width: 50%;
    }
}

@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-icon-assets .assets-wrap {
        text-align: center;
    }
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetson-icon-assets .assets-wrap {
        overflow: hidden;
    }
}
.jetson-wrapper .jetson-icon-assets .assets-wrap .resp-icons-outer {
    margin: 30px 0 0;
}
.jetson-wrapper .jetson-icon-assets .assets-wrap .assets-icons {
    margin-top: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap: 210px;
}
@media only screen and (min-width: 1500px) and (max-width: 1699px) {
    .jetson-wrapper .jetson-icon-assets .assets-wrap .assets-icons {
        grid-column-gap: 100px;
    }
}
@media only screen and (max-width: 1499px) {
    .jetson-wrapper .jetson-icon-assets .assets-wrap .assets-icons {
        margin-top: 30px;
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow: hidden;
        overflow-x: scroll;
        display: flex;
        grid-column-gap: 30px;
    }
}
@media only screen and (max-width: 1365px) {
    .jetson-wrapper .jetson-icon-assets .assets-wrap .assets-icons {
        grid-column-gap: 10px;
    }
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-icon-assets .assets-wrap .assets-icons {
        text-align: center;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetson-icon-assets .assets-wrap .assets-icons {
        grid-column-gap: 20px;
    }
}
@media only screen and (min-width: 1366px) and (max-width: 1499px) {
    .jetson-wrapper .jetson-icon-assets .assets-wrap .img-wrap {
        margin: 50px 0;
        width: 100%;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .jetson-wrapper .jetson-icon-assets .assets-wrap .img-wrap {
        margin: 50px 0;
        width: 100%;
        min-width: 20%;
        text-align: center;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .jetson-wrapper .jetson-icon-assets .assets-wrap .img-wrap {
        margin: 50px 0;
        width: 100%;
        min-width: 18%;
    }
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetson-icon-assets .assets-wrap .img-wrap {
        margin: 0;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .jetson-wrapper .jetson-icon-assets .assets-wrap .img-wrap img {
        max-width: 70%;
    }
}
.jetson-wrapper .jetson-icon-assets .assets-wrap .img-wrap.bottom {
    -webkit-animation: jetassetbounce 3s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
    animation: jetassetbounce 3.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
}
@keyframes jetassetbounce {
    50% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }
}
@-webkit-keyframes jetassetbounce {
    50% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }
}
@-moz-keyframes jetassetbounce {
    50% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
    }
}
.jetson-wrapper .jetson-icon-assets .assets-wrap .img-wrap.reverse {
    -webkit-animation: jetassetreverse 3.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
    animation: jetassetreverse 3.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
}
@keyframes jetassetreverse {
    50% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
    }
}
@-webkit-keyframes jetassetreverse {
    50% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
    }
}
@-moz-keyframes jetassetreverse {
    50% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
    }
}
.jetson-wrapper .jetson-icon-assets .assets-wrap .img-wrap:nth-child(even) {
    text-align: center;
}

.jetson-wrapper .jetson-onboard-screens {
    position: relative;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-onboard-screens {
        text-align: center;
    }
}
.jetson-wrapper .jetson-onboard-screens:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background-color: #000;
    height: 150px;
    z-index: -1;
}

.jetson-wrapper .jetson-onboard-screens .video-wrap {
    line-height: 0;
}

.jetson-wrapper .jetson-onboard-screens .onboard-outer .mob-outer {
    width: 89.58%;
    margin: 0 auto;
    max-width: 1720px;
}
.jetson-wrapper .jetson-onboard-screens .onboard-outer .mob-outer .common-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 70px;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .jetson-wrapper .jetson-onboard-screens .onboard-outer .mob-outer .common-wrapper {
        grid-column-gap: 50px;
    }
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-onboard-screens .onboard-outer .mob-outer .common-wrapper {
        display: flex;
        flex-wrap: nowrap;
        white-space: nowrap;
        grid-column-gap: 20px;
        overflow: hidden;
        overflow-x: scroll;
    }
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-onboard-screens .onboard-outer .mob-outer .common-wrapper::-webkit-scrollbar {
        height: 8px;
    }
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-onboard-screens .onboard-outer .mob-outer .common-wrapper::-webkit-scrollbar-thumb {
        background-color: #ccc; /* Customize scrollbar color */
        border-radius: 4px;
    }
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-onboard-screens .onboard-outer .mob-outer .common-wrapper::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Customize scrollbar track color */
    }
}
.jetson-wrapper .jetson-onboard-screens .onboard-outer .mob-outer .common-wrapper .common-wrap {
    position: relative;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-onboard-screens .onboard-outer .mob-outer .common-wrapper .common-wrap {
        width: 100%;
        margin: 30px 0;
        min-width: 40%;
    }
}
@media only screen and (max-width: 767px) {
    .jetson-wrapper .jetson-onboard-screens .onboard-outer .mob-outer .common-wrapper .common-wrap {
        min-width: 50%;
    }
}
.jetson-wrapper .jetson-onboard-screens .onboard-outer .mob-outer .common-wrapper .common-wrap img {
    width: 381px;
}
.jetson-wrapper .jetson-onboard-screens .onboard-outer .mob-outer .common-wrapper .common-wrap.bottom {
    -webkit-animation: jetanimebounce 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
    animation: jetanimebounce 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
}
@keyframes jetanimebounce {
    50% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}
@-webkit-keyframes jetanimebounce {
    50% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}
@-moz-keyframes jetanimebounce {
    50% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}
.jetson-wrapper .jetson-onboard-screens .onboard-outer .mob-outer .common-wrapper .common-wrap.reverse {
    -webkit-animation: jetanimebouncereverse 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
    animation: jetanimebouncereverse 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
}
@keyframes jetanimebouncereverse {
    50% {
        -webkit-transform: translateY(15px);
        transform: translateY(15px);
    }
}
@-webkit-keyframes jetanimebouncereverse {
    50% {
        -webkit-transform: translateY(15px);
        transform: translateY(15px);
    }
}
@-moz-keyframes jetanimebouncereverse {
    50% {
        -webkit-transform: translateY(15px);
        transform: translateY(15px);
    }
}
.jetson-wrapper .jetson-screen-outer {
    position: relative;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-screen-outer .common-div {
        margin: 0 0 30px;
    }
}
@media only screen and (max-width: 767px) {
    .jetson-wrapper .jetson-screen-outer .common-div .view-outer {
        text-align: center;
    }
}
.jetson-wrapper .jetson-screen-outer .common-div .view-outer .title {
    display: none;
}
@media only screen and (max-width: 767px) {
    .jetson-wrapper .jetson-screen-outer .common-div .view-outer .title {
        display: inline;
    }
}
.jetson-wrapper .jetson-screen-outer .common-div .view-outer .img-wrap {
    position: relative;
    text-align: center;
    z-index: 2;
    max-width: 556px;
}
@media only screen and (max-width: 767px) {
    .jetson-wrapper .jetson-screen-outer .common-div .view-outer .img-wrap {
        margin: 30px auto 0;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetson-screen-outer .common-div .view-outer .img-wrap {
        margin-top: 20px;
    }
}
.jetson-wrapper .jetson-screen-outer .common-div .view-outer .img-wrap img {
    width: 381px;
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetson-screen-outer .common-div .view-outer .img-wrap img {
        max-width: 80%;
    }
}
@media only screen and (max-width: 767px) {
    .jetson-wrapper .jetson-screen-outer .common-div .view-outer .img-wrap img {
        max-width: 60%;
    }
}
.jetson-wrapper .jetson-screen-outer .common-div .view-outer .img-wrap:before {
    content: "";
    position: absolute;
    background: url("../img/case-study-details/business-learning-app/webp/screen-bg.webp") no-repeat center;
    background-size: 100% 100%;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 auto;
    width: 100%;
    height: 556px;
    z-index: -1;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-screen-outer .common-div .view-outer .img-wrap:before {
        display: none;
    }
}
@media only screen and (max-width: 767px) {
    .jetson-wrapper .jetson-screen-outer .common-div .short-info {
        text-align: center;
        margin-top: 0;
    }
}
@media only screen and (max-width: 767px) {
    .jetson-wrapper .jetson-screen-outer .common-div .short-info .img-wrap {
        margin: 15px auto 30px;
    }
}
@media only screen and (max-width: 767px) {
    .jetson-wrapper .jetson-screen-outer .common-div:last-child {
        margin: 0;
    }
}
.jetson-wrapper .jetson-screen-outer .common-div:nth-child(even) .row {
    flex-direction: row-reverse;
}
.jetson-wrapper .jetson-screen-outer .common-div:nth-child(even) .row .img-wrap {
    margin-left: auto;
}
.jetson-wrapper .jetson-screen-outer:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background-color: #ffffff;
    height: 150px;
    z-index: -1;
}
.jetson-wrapper .jetson-all-screens {
    position: relative;
}

.jetson-wrapper .jetson-all-screens .screen-wraps {
    position: relative;
    margin-top: 130px;
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetson-all-screens .screen-wraps {
        margin-top: 0;
    }
}
.jetson-wrapper .jetson-all-screens .screen-wraps .screen-outer {
    width: 89.58%;
    margin: 0 auto;
    max-width: 1720px;
}
.jetson-wrapper .jetson-all-screens .screen-wraps .screen-outer .img-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 70px;
}
@media only screen and (max-width: 1499px) {
    .jetson-wrapper .jetson-all-screens .screen-wraps .screen-outer .img-wrapper {
        grid-column-gap: 50px;
    }
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetson-all-screens .screen-wraps .screen-outer .img-wrapper {
        display: flex;
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow: hidden;
        overflow-x: scroll;
        grid-column-gap: 0;
    }
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetson-all-screens .screen-wraps .screen-outer .img-wrapper::-webkit-scrollbar {
        height: 8px;
    }
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetson-all-screens .screen-wraps .screen-outer .img-wrapper::-webkit-scrollbar-thumb {
        background-color: #ccc; /* Customize scrollbar color */
        border-radius: 4px;
    }
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetson-all-screens .screen-wraps .screen-outer .img-wrapper::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Customize scrollbar track color */
    }
}
.jetson-wrapper .jetson-all-screens .screen-wraps .screen-outer .img-wrapper .img-wrap {
    text-align: center;
    margin-bottom: 70px;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-all-screens .screen-wraps .screen-outer .img-wrapper .img-wrap {
        margin-bottom: 50px;
    }
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetson-all-screens .screen-wraps .screen-outer .img-wrapper .img-wrap {
        margin-bottom: 10px;
        width: 100%;
        min-width: 50%;
        margin-right: 20px;
    }
}
.jetson-wrapper .jetson-all-screens .screen-wraps .screen-outer .img-wrapper .img-wrap img {
    width: 381px;
}
.jetson-wrapper .jetson-all-screens .screen-wraps .screen-outer .img-wrapper .img-wrap:nth-child(even) {
    margin-top: -130px;
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetson-all-screens .screen-wraps .screen-outer .img-wrapper .img-wrap:nth-child(even) {
        margin-top: 0;
    }
}
.jetson-wrapper .jetson-all-screens:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background-color: #000;
    height: 150px;
    z-index: -1;
}
@media only screen and (min-width: 1200px) and (max-width: 1699px) {
    .jetson-all-screens .web-screen-outer {
        padding-top: 70px;
    }
}

.jetson-all-screens .web-screen-outer .web-wraps {
    position: relative;
}
@media only screen and (max-width: 480px) {
    .jetson-all-screens .web-screen-outer .web-wraps {
        margin-top: 10px;
    }
}
.jetson-wrapper .jetson-all-screens .web-wraps .web-outer {
    width: 89.58%;
    margin: 0 auto;
    max-width: 1720px;
}
@media only screen and (min-width: 1200px) and (max-width: 1699px) {
    .jetson-wrapper .jetson-all-screens .web-wraps .web-outer .img-wrapper .img-one.common-img {
        max-width: 90%;
        margin: 0 auto;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1699px) {
    .jetson-wrapper .jetson-all-screens .web-wraps .web-outer .img-wrapper .img-two.common-img {
        max-width: 90%;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .jetson-wrapper .jetson-all-screens .web-wraps .web-outer .img-wrapper .img-two.common-img {
        margin-top: -125px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1699px) {
    .jetson-wrapper .jetson-all-screens .web-wraps .web-outer .img-wrapper .img-three.common-img {
        max-width: 90%;
        margin-left: auto;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .jetson-wrapper .jetson-all-screens .web-wraps .web-outer .img-wrapper .img-three.common-img {
        margin-top: -125px;
    }
}

.jetson-wrapper .jetson-all-screens .web-wraps .web-outer .img-wrapper .common-img img {
    outline: 7px solid #000000;
    filter: drop-shadow(27.84px 19.09px 42.95px rgba(0, 0, 0, 0.35));
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetson-all-screens .web-wraps .web-outer .img-wrapper .common-img img {
        filter: drop-shadow(10.84px 10.09px 10.95px rgba(0, 0, 0, 0.15));
    }
}

.jetson-wrapper .jetson-all-screens .web-wraps .web-outer .img-wrapper .img-two {
    margin-top: -225px;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-all-screens .web-wraps .web-outer .img-wrapper .img-two {
        margin: 70px auto;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetson-all-screens .web-wraps .web-outer .img-wrapper .img-two {
        margin: 50px auto;
    }
}
.jetson-wrapper .jetson-all-screens .web-wraps .web-outer .img-wrapper .img-three {
    margin-top: -225px;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-all-screens .web-wraps .web-outer .img-wrapper .img-three {
        margin-top: 0;
    }
}

.jetson-wrapper .jetson-techno .row {
    height: 100%;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-techno .row {
        height: auto;
    }
}
.jetson-wrapper .jetson-techno .common-div {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-techno .common-div {
        text-align: center;
        height: auto;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetson-techno .common-div {
        padding: 35px 20px;
    }
}
.jetson-wrapper .jetson-techno .common-div .small-title-text {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 60px;
    padding: 10px 16px;
    display: inline-block;
    margin: 0 0 35px;
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetson-techno .common-div .small-title-text {
        margin: 0 0 20px;
    }
}
.jetson-wrapper .jetson-techno .common-div ul {
    list-style-type: none;
    display: flex;
    gap: 30px;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-techno .common-div ul {
        justify-content: center;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetson-techno .common-div ul {
        gap: 20px;
    }
}
.jetson-wrapper .jetson-techno .common-div ul li img {
    width: 62px;
    aspect-ratio: 1;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-techno .common-div .img-box {
        justify-content: center;
    }
}
.jetson-wrapper .jetson-techno .common-div .img-box .img-wrap {
    flex: 0 0 auto;
}
.jetson-wrapper .jetson-techno .common-div .img-box .img-wrap img {
    width: 64px;
    aspect-ratio: 1;
}
.jetson-wrapper .jetson-techno .common-div .img-box .content-box {
    text-align: left;
}
.jetson-wrapper .jetson-techno .common-div .img-box .content-box .name-text {
    font-size: 20px;
    line-height: 25px;
    margin: 0 0 5px;
}
.jetson-wrapper .jetson-techno .common-div .img-box .content-box .des-text {
    font-size: 14px;
    line-height: 17px;
}
.jetson-wrapper .jetson-techno .common-div.leftside {
    margin-right: 20px;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-techno .common-div.leftside {
        margin-right: 0;
        margin-bottom: 30px;
    }
}
.jetson-wrapper .jetson-techno .common-div.rightside {
    margin-left: -15px;
}
@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-techno .common-div.rightside {
        margin-left: 0;
    }
}

@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-impact .inner-content {
        text-align: center;
    }
}

@media only screen and (max-width: 1199px) {
    .jetson-wrapper .jetson-impact .title-wrap {
        margin: 0;
    }
}

.jetson-wrapper .jetson-impact .impact-outer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    max-width: 1500px;
    border: 1px solid rgba(255, 255, 255, 0.16);
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetson-impact .impact-outer {
        grid-template-columns: 1fr;
    }
}

.jetson-wrapper .jetson-impact .impact-outer .item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
    position: relative;
    border-right: 1px solid rgba(255, 255, 255, 0.16);
    overflow: hidden;
}
@media only screen and (max-width: 767px) {
    .jetson-wrapper .jetson-impact .impact-outer .item {
        padding: 20px 22px;
    }
}
@media only screen and (max-width: 575px) {
    .jetson-wrapper .jetson-impact .impact-outer .item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    }
}

.jetson-wrapper .jetson-impact .impact-outer .item:first-child:after {
    content: "";
    position: absolute;
    background: url("../img/case-study-details/business-learning-app/impact-one-bg.svg") no-repeat center;
    background-size: cover;
    width: 100%;
    height: 100%;
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetson-impact .impact-outer .item:first-child:after {
        display: none;
    }
}

.jetson-wrapper .jetson-impact .impact-outer .item:last-child {
    border-right: 1px solid transparent;
}
.jetson-wrapper .jetson-impact .impact-outer .item:last-child:after {
    content: "";
    position: absolute;
    background: url("../img/case-study-details/business-learning-app/impact-two-bg.svg") no-repeat center;
    background-size: cover;
    width: 100%;
    height: 100%;
    right: 0;
}
@media only screen and (max-width: 991px) {
    .jetson-wrapper .jetson-impact .impact-outer .item:last-child:after {
        display: none;
    }
}
.jetson-wrapper .jetson-impact .impact-outer .item .inner-wrap {
    position: relative;
    z-index: 9;
}
.jetson-wrapper .jetson-impact .impact-outer .item .inner-wrap .numb {
    color: #fa9f18;
}
.jetson-wrapper .jetson-impact .impact-outer .item .inner-wrap p {
    color: #a9a9a9;
}

/*business learning app css ends here*/

/*medical practice management page css starts here*/

@font-face {
    font-family: "Manrope";
    src: url("../portfolio-fonts/medical-practice-management-system/Manrope-ExtraBold.woff2") format("woff2"),
        url("../portfolio-fonts/medical-practice-management-system/Manrope-ExtraBold.woff") format("woff"),
        url("../portfolio-fonts/medical-practice-management-system/Manrope-ExtraBold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("../portfolio-fonts/medical-practice-management-system/Manrope-Light.woff2") format("woff2"),
        url("../portfolio-fonts/medical-practice-management-system/Manrope-Light.woff") format("woff"),
        url("../portfolio-fonts/medical-practice-management-system/Manrope-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("../portfolio-fonts/medical-practice-management-system/Manrope-Bold.woff2") format("woff2"),
        url("../portfolio-fonts/medical-practice-management-system/Manrope-Bold.woff") format("woff"),
        url("../portfolio-fonts/medical-practice-management-system/Manrope-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("../portfolio-fonts/medical-practice-management-system/Manrope-SemiBold.woff2") format("woff2"),
        url("../portfolio-fonts/medical-practice-management-system/Manrope-SemiBold.woff") format("woff"),
        url("../portfolio-fonts/medical-practice-management-system/Manrope-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("../portfolio-fonts/medical-practice-management-system/Manrope-Medium.woff2") format("woff2"),
        url("../portfolio-fonts/medical-practice-management-system/Manrope-Medium.woff") format("woff"),
        url("../portfolio-fonts/medical-practice-management-system/Manrope-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("../portfolio-fonts/medical-practice-management-system/Manrope-Regular.woff2") format("woff2"),
        url("../portfolio-fonts/medical-practice-management-system/Manrope-Regular.woff") format("woff"),
        url("../portfolio-fonts/medical-practice-management-system/Manrope-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.ucheck-wrapper {
    font-weight: 400;
    font-family: "Manrope";
    background-color: #ffffff;
    color: #000000;
    overflow: hidden;
}
.ucheck-wrapper .ucheck-container {
    position: relative;
}
@media only screen and (min-width: 1600px) {
    .ucheck-wrapper .ucheck-container {
        margin: 0 auto;
        width: 100%;
        max-width: 1570px;
        padding: 0;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .ucheck-wrapper .ucheck-container {
        width: calc(100% - 80px);
        max-width: none;
    }
}

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

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

.ucheck-wrapper .ucheck-300 {
    font-weight: 300;
}
.ucheck-wrapper .ucheck-500 {
    font-weight: 500;
}
.ucheck-wrapper .ucheck-600 {
    font-weight: 600;
}
.ucheck-wrapper .ucheck-700 {
    font-weight: 700;
}
.ucheck-wrapper .ucheckbr-30 {
    border-radius: 30px;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheckbr-30 {
        border-radius: 20px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheckbr-30 {
        border-radius: 15px;
    }
}

.ucheck-wrapper .ucheck-white {
    color: #ffffff;
}
.ucheck-wrapper .ucheck-blue {
    color: #1563eb;
}
.ucheck-wrapper .ucheck-blue-gradient {
    background: linear-gradient(-180deg, rgba(21, 99, 235, 1) 0%, rgba(2, 29, 113, 1) 100%);
}
.ucheck-wrapper .ucheckopa-80 {
    opacity: 0.8;
}
.ucheck-wrapper .ucheckopa-60 {
    opacity: 0.6;
}
.ucheck-wrapper .ucheckopa-50 {
    opacity: 0.5;
}
.ucheck-wrapper .ucheck-93 {
    font-size: 93px;
    line-height: 110px;
}
@media only screen and (max-width: 1499px) {
    .ucheck-wrapper .ucheck-93 {
        font-size: 80px;
        line-height: 90px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-93 {
        font-size: 50px;
        line-height: 60px;
    }
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .ucheck-93 {
        font-size: 40px;
        line-height: 50px;
    }
}
.ucheck-wrapper .ucheck-40 {
    font-size: 40px;
    line-height: 50px;
}
@media only screen and (max-width: 1499px) {
    .ucheck-wrapper .ucheck-40 {
        font-size: 38px;
        line-height: 48px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-40 {
        font-size: 36px;
        line-height: 46px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-40 {
        font-size: 30px;
        line-height: 42px;
    }
}

.ucheck-wrapper .ucheck-38 {
    font-size: 38px;
    line-height: 48px;
}

@media only screen and (max-width: 1499px) {
    .ucheck-wrapper .ucheck-38 {
        font-size: 33px;
        line-height: 45px;
    }
}
@media only screen and (max-width: 1199px) {
    .ucheck-wrapper .ucheck-38 {
        font-size: 30px;
        line-height: 42px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-38 {
        font-size: 26px;
        line-height: 36px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-38 {
        font-size: 24px;
        line-height: 34px;
    }
}

.ucheck-wrapper .ucheck-32 {
    font-size: 32px;
    line-height: 44px;
}
@media only screen and (max-width: 1499px) {
    .ucheck-wrapper .ucheck-32 {
        font-size: 30px;
        line-height: 42px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-32 {
        font-size: 26px;
        line-height: 32px;
    }
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .ucheck-32 {
        font-size: 22px;
        line-height: 30px;
    }
}
.ucheck-wrapper .ucheck-30 {
    font-size: 30px;
    line-height: 42px;
}
@media only screen and (max-width: 1499px) {
    .ucheck-wrapper .ucheck-30 {
        font-size: 28px;
        line-height: 38px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-30 {
        font-size: 22px;
        line-height: 30px;
    }
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .ucheck-30 {
        font-size: 18px;
        line-height: 28px;
    }
}
.ucheck-wrapper .ucheck-27 {
    font-size: 27px;
    line-height: 38px;
}
@media only screen and (max-width: 1499px) {
    .ucheck-wrapper .ucheck-27 {
        font-size: 25px;
        line-height: 35px;
    }
}
@media only screen and (max-width: 1199px) {
    .ucheck-wrapper .ucheck-27 {
        font-size: 22px;
        line-height: 32px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-27 {
        font-size: 20px;
        line-height: 28px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-27 {
        font-size: 18px;
        line-height: 28px;
    }
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .ucheck-27 {
        font-size: 16px;
        line-height: 26px;
    }
}

.ucheck-wrapper .ucheck-26 {
    font-size: 22px;
    line-height: 34px;
    color: red;
}

@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-26 {
        font-size: 20px;
        line-height: 28px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-26 {
        font-size: 18px;
        line-height: 28px;
    }
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .ucheck-26 {
        font-size: 16px;
        line-height: 26px;
    }
}
.ucheck-wrapper .ucheck-22 {
    font-size: 22px;
    line-height: 32px;
}
@media only screen and (max-width: 1499px) {
    .ucheck-wrapper .ucheck-22 {
        font-size: 20px;
        line-height: 28px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-22 {
        font-size: 18px;
        line-height: 28px;
    }
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .ucheck-22 {
        font-size: 16px;
        line-height: 26px;
    }
}
.ucheck-wrapper .ucheck-21 {
    font-size: 21px;
    line-height: 30px;
}
@media only screen and (max-width: 1499px) {
    .ucheck-wrapper .ucheck-21 {
        font-size: 18px;
        line-height: 28px;
    }
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .ucheck-21 {
        font-size: 16px;
        line-height: 26px;
    }
}
.ucheck-wrapper .ucheck-20 {
    font-size: 20px;
    line-height: 32px;
}
@media only screen and (max-width: 1499px) {
    .ucheck-wrapper .ucheck-20 {
        font-size: 19px;
        line-height: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-20 {
        font-size: 18px;
        line-height: 28px;
    }
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .ucheck-20 {
        font-size: 16px;
        line-height: 26px;
    }
}
.ucheck-wrapper .ucheck-18 {
    font-size: 18px;
    line-height: 28px;
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .ucheck-18 {
        font-size: 16px;
        line-height: 26px;
    }
}
.ucheck-wrapper .ucheck-17 {
    font-size: 17px;
    line-height: 28px;
}

.ucheck-wrapper .ucheckptb-130 {
    padding: 130px 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .ucheck-wrapper .ucheckptb-130 {
        padding: 110px 0;
    }
}
@media only screen and (max-width: 1199px) {
    .ucheck-wrapper .ucheckptb-130 {
        padding: 90px 0;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheckptb-130 {
        padding: 70px 0;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheckptb-130 {
        padding: 50px 0;
    }
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .ucheckptb-130 {
        padding: 35px 0;
    }
}

.ucheck-wrapper .ucheckpt-130 {
    padding-top: 130px;
}
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .ucheck-wrapper .ucheckpt-130 {
        padding-top: 110px;
    }
}
@media only screen and (max-width: 1199px) {
    .ucheck-wrapper .ucheckpt-130 {
        padding-top: 90px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheckpt-130 {
        padding-top: 70px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheckpt-130 {
        padding-top: 50px;
    }
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .ucheckpt-130 {
        padding-top: 35px;
    }
}

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

.ucheck-wrapper .ucheckmt-70 {
    margin-top: 70px;
}

@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheckmt-70 {
        margin-top: 50px;
    }
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .ucheckmt-70 {
        margin-top: 35px;
    }
}

.ucheck-wrapper .ucheckmt-40 {
    margin-top: 40px;
}

.ucheck-wrapper .title-wrap {
    margin: 0 0 30px;
}
@media only screen and (max-width: 1199px) {
    .ucheck-wrapper .title-wrap {
        margin: 0 0 20px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .title-wrap {
        text-align: center;
    }
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .title-wrap {
        margin: 0 0 15px;
    }
}

@media only screen and (max-width: 991px) {
    .ucheck-wrapper .title-wrap .small-text {
        font-size: 22px;
        line-height: 32px;
    }
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .title-wrap .small-text {
        font-size: 18px;
        line-height: 28px;
    }
}

.ucheck-wrapper .ucheckhead-text {
    font-weight: 600;
    color: #000000;
    font-size: 43px;
    line-height: 58px;
}
@media only screen and (max-width: 1499px) {
    .ucheck-wrapper .ucheckhead-text {
        font-size: 41px;
        line-height: 52px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheckhead-text {
        font-size: 36px;
        line-height: 48px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheckhead-text {
        font-size: 32px;
        line-height: 42px;
    }
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .ucheckhead-text {
        font-size: 28px;
        line-height: 38px;
    }
}
@media only screen and (max-width: 375px) {
    .ucheck-wrapper .ucheckhead-text {
        font-size: 24px;
        line-height: 34px;
    }
}
.ucheck-wrapper .ucheckmb-30 {
    margin: 0 0 30px;
}

.ucheck-wrapper .ucheck-banner-section {
    position: relative;
    background: url("../img/case-study-details/medical-practice-management-system/webp/home-banner.webp") no-repeat left
        top;
    height: 1250px;
    background-size: cover;
}
@media only screen and (max-width: 1599px) {
    .ucheck-wrapper .ucheck-banner-section {
        height: 1000px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-banner-section {
        height: 800px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-banner-section {
        height: 700px;
    }
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .ucheck-banner-section {
        height: 600px;
    }
}
@media only screen and (max-width: 480px) {
    .ucheck-wrapper .ucheck-banner-section {
        height: 450px;
    }
}

.ucheck-wrapper .ucheck-banner-section .screen-wrap {
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 80%;
}

@media only screen and (max-width: 1599px) {
    .ucheck-wrapper .ucheck-banner-section .screen-wrap {
        max-width: 70%;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-banner-section .screen-wrap {
        bottom: 70px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-banner-section .screen-wrap {
        max-width: 70%;
    }
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .ucheck-banner-section .screen-wrap {
        display: none;
    }
}

.ucheck-wrapper .ucheck-banner-section .banner-content {
    position: absolute;
    z-index: 8;
    height: 60%;
    width: 100%;
    left: 90px;
    bottom: 18%;
}
@media only screen and (max-width: 1199px) {
    .ucheck-wrapper .ucheck-banner-section .banner-content {
        left: 50px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-banner-section .banner-content {
        left: 0;
        right: 0;
        margin: 0 auto;
        width: calc(100% - 30px);
    }
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .ucheck-banner-section .banner-content {
        bottom: 0;
    }
}
.ucheck-wrapper .ucheck-banner-section .banner-content .logo-wrap {
    position: relative;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-banner-section .banner-content .logo-wrap {
        margin: 0 auto;
        text-align: center;
    }
}
.ucheck-wrapper .ucheck-banner-section .banner-content .logo-wrap:after {
    content: "";
    position: absolute;
    background: url("../img/case-study-details/medical-practice-management-system/line.svg") no-repeat center;
    width: 2px;
    height: 328px;
    top: 250px;
    left: 50px;
}
@media only screen and (max-width: 1199px) {
    .ucheck-wrapper .ucheck-banner-section .banner-content .logo-wrap:after {
        display: none;
    }
}
.ucheck-wrapper .ucheck-banner-section .banner-content .logo-wrap .img-wrap {
    padding: 20px 30px;
    border-radius: 99em;
    position: relative;
    display: inline-block;
    overflow: hidden;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-banner-section .banner-content .logo-wrap .img-wrap {
        padding: 10px 12px;
    }
}
.ucheck-wrapper .ucheck-banner-section .banner-content .logo-wrap .img-wrap:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(27px);
}

.ucheck-wrapper .ucheck-banner-section .banner-content .logo-wrap .img-wrap img {
    position: relative;
    z-index: 2;
    width: 200px;
    filter: brightness(0) invert(1);
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .ucheck-banner-section .banner-content .logo-wrap .img-wrap img {
        width: 120px;
    }
}

.ucheck-wrapper .ucheck-banner-section .banner-content .bottom-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
    position: absolute;
    bottom: 0;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-banner-section .banner-content .bottom-wrap {
        display: none;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-banner-section .banner-content .bottom-wrap {
        gap: 15px;
    }
}
.ucheck-wrapper .ucheck-banner-section .banner-content .bottom-wrap .icons {
    width: 150px;
    height: 150px;
    border-radius: 99em;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media only screen and (max-width: 1365px) {
    .ucheck-wrapper .ucheck-banner-section .banner-content .bottom-wrap .icons {
        width: 100px;
        height: 100px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-banner-section .banner-content .bottom-wrap .icons {
        width: 80px;
        height: 80px;
    }
}
.ucheck-wrapper .ucheck-banner-section .banner-content .bottom-wrap .icons:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}
.ucheck-wrapper .ucheck-banner-section .banner-content .bottom-wrap .icons img {
    position: relative;
    z-index: 2;
}
@media only screen and (max-width: 1365px) {
    .ucheck-wrapper .ucheck-banner-section .banner-content .bottom-wrap .icons img {
        max-width: 60%;
    }
}

.ucheck-wrapper .ucheck-journey {
    position: relative;
    background: #ffffff;
    margin-top: -150px;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-journey {
        margin-top: -100px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-journey .our-service-wrap {
        padding-top: 50px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-journey .our-service-wrap {
        padding-top: 30px;
    }
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .ucheck-journey .our-service-wrap {
        padding-top: 0;
    }
}
.ucheck-wrapper .ucheck-journey .our-service-wrap .logo-journey {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}
@media only screen and (max-width: 1199px) {
    .ucheck-wrapper .ucheck-journey .our-service-wrap .logo-journey {
        gap: 30px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-journey .our-service-wrap .logo-journey {
        justify-content: center;
        flex-direction: column;
        text-align: center;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-journey .our-service-wrap .logo-journey .img-wrap {
        max-width: 50%;
        margin: 0 auto;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-journey .our-service-wrap .project-lists {
        margin-top: 30px;
        text-align: center;
    }
}
.ucheck-wrapper .ucheck-journey .our-service-wrap .project-lists ul {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-journey .our-service-wrap .project-lists ul {
        justify-content: center;
        gap: 15px;
    }
}

@media only screen and (max-width: 480px) {
    .ucheck-wrapper .ucheck-journey .our-service-wrap .project-lists ul {
        overflow: hidden;
        overflow-x: scroll;
        flex-wrap: nowrap;
        justify-content: start;
        white-space: nowrap;
    }
}
@media only screen and (max-width: 480px) {
    .ucheck-wrapper .ucheck-journey .our-service-wrap .project-lists ul::-webkit-scrollbar {
        height: 8px;
    }
}
@media only screen and (max-width: 480px) {
    .ucheck-wrapper .ucheck-journey .our-service-wrap .project-lists ul::-webkit-scrollbar-thumb {
        background-color: #ccc; /* Customize scrollbar color */
        border-radius: 4px;
    }
}
@media only screen and (max-width: 480px) {
    .ucheck-wrapper .ucheck-journey .our-service-wrap .project-lists ul::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Customize scrollbar track color */
    }
}
.ucheck-wrapper .ucheck-journey .our-service-wrap .project-lists ul li {
    color: #6a6a6a;
    padding: 14px 18px;
    border: 1px solid #c0c0c0;
    border-radius: 99em;
}
@media only screen and (max-width: 1499px) {
    .ucheck-wrapper .ucheck-journey .our-service-wrap .project-lists ul li {
        padding: 12px 16px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-journey .our-service-wrap .project-lists ul li {
        padding: 10px 12px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-journey .our-service-wrap .project-lists ul li {
        padding: 8px 10px;
    }
}
@media only screen and (max-width: 480px) {
    .ucheck-wrapper .ucheck-journey .our-service-wrap .project-lists ul li {
        margin: 0 0 8px;
    }
}
.ucheck-wrapper .ucheck-journey .our-content-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 30px;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-journey .our-content-wrap {
        grid-template-columns: 1fr;
        text-align: center;
    }
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .ucheck-journey .our-content-wrap {
        margin-top: 30px;
    }
}

.ucheck-wrapper .ucheck-journey .our-content-wrap .item p {
    color: #7d7d7d;
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .ucheck-journey .our-content-wrap .item p {
    }
}
.ucheck-wrapper .ucheck-growth {
    background-color: #fbfbfb;
}

.ucheck-wrapper .ucheck-growth .title-wrap {
    margin: 0;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-growth .title-wrap {
        max-width: none;
        margin: 0 auto 20px;
        text-align: center;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-growth .para-text {
        text-align: center;
    }
}

.ucheck-wrapper .ucheck-growth .market-scroll .marquee-animation .marquee-one {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 20px;
    position: relative;
    margin: 0 auto;
    height: 100%;
}

.ucheck-wrapper .ucheck-growth .market-scroll .marquee-animation .marquee-one.top {
    -webkit-transform: translate3d(var(--move-initial), 4px, 4px);
    transform: translate3d(var(--move-initial), 4px, 4px);
    -webkit-animation: 15s linear infinite scrollOne;
    animation: 15s linear infinite scrollOne;
    --offset: 30vw;
    --move-initial: calc(-20% + var(--offset));
    --move-final: calc(-40% + var(--offset));
    margin: 0 0 30px;
}
.ucheck-wrapper .ucheck-growth .market-scroll .marquee-animation .marquee-one.bottom {
    -webkit-transform: translate3d(var(--move-initial), 4px, 4px);
    transform: translate3d(var(--move-initial), 4px, 4px);
    -webkit-animation: 15s linear infinite scrollTwo;
    animation: 15s linear infinite scrollTwo;
    --offset: 30vw;
    --move-initial: calc(-20% + var(--offset));
    --move-final: calc(-40% + var(--offset));
}
@keyframes scrollOne {
    0% {
        transform: translate3d(var(--move-initial), 0, 0);
        -webkit-transform: translate3d(var(--move-initial), 0, 0);
        transform: translate3d(var(--move-initial), 0, 0);
    }
    100% {
        transform: translate3d(var(--move-final), 0, 0);
        -webkit-transform: translate3d(var(--move-final), 0, 0);
        transform: translate3d(var(--move-final), 0, 0);
    }
}
@-webkit-keyframes scrollOne {
    0% {
        transform: translate3d(var(--move-initial), 0, 0);
        -webkit-transform: translate3d(var(--move-initial), 0, 0);
        transform: translate3d(var(--move-initial), 0, 0);
    }
    100% {
        transform: translate3d(var(--move-final), 0, 0);
        -webkit-transform: translate3d(var(--move-final), 0, 0);
        transform: translate3d(var(--move-final), 0, 0);
    }
}
@-moz-keyframes scrollOne {
    0% {
        transform: translate3d(var(--move-initial), 0, 0);
        -webkit-transform: translate3d(var(--move-initial), 0, 0);
        transform: translate3d(var(--move-initial), 0, 0);
    }
    100% {
        transform: translate3d(var(--move-final), 0, 0);
        -webkit-transform: translate3d(var(--move-final), 0, 0);
        transform: translate3d(var(--move-final), 0, 0);
    }
}
@keyframes scrollTwo {
    0% {
        transform: translate3d(var(--move-final), 0, 0);
        -webkit-transform: translate3d(var(--move-final), 0, 0);
        transform: translate3d(var(--move-final), 0, 0);
    }
    100% {
        transform: translate3d(var(--move-initial), 0, 0);
        -webkit-transform: translate3d(var(--move-initial), 0, 0);
        transform: translate3d(var(--move-initial), 0, 0);
    }
}
@-webkit-keyframes scrollTwo {
    0% {
        transform: translate3d(var(--move-final), 0, 0);
        -webkit-transform: translate3d(var(--move-final), 0, 0);
        transform: translate3d(var(--move-final), 0, 0);
    }
    100% {
        transform: translate3d(var(--move-initial), 0, 0);
        -webkit-transform: translate3d(var(--move-initial), 0, 0);
        transform: translate3d(var(--move-initial), 0, 0);
    }
}
@-moz-keyframes scrollTwo {
    0% {
        transform: translate3d(var(--move-final), 0, 0);
        -webkit-transform: translate3d(var(--move-final), 0, 0);
        transform: translate3d(var(--move-final), 0, 0);
    }
    100% {
        transform: translate3d(var(--move-initial), 0, 0);
        -webkit-transform: translate3d(var(--move-initial), 0, 0);
        transform: translate3d(var(--move-initial), 0, 0);
    }
}

.ucheck-wrapper .ucheck-growth .market-scroll .marquee-animation .marquee-one .item-wrap {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border: 0.5px solid #e2e2e2;
    border-radius: 10px;
    max-width: 492px;
}

.ucheck-wrapper .ucheck-growth .market-scroll .marquee-animation .marquee-one .item-wrap .icon-wrap {
    flex: 0 0 auto;
}

.ucheck-wrapper .ucheck-growth .market-scroll .wrap-outer .item-wrap {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border: 0.5px solid #e2e2e2;
    border-radius: 10px;
    min-width: 492px;
}
.ucheck-wrapper .ucheck-growth .market-scroll .wrap-outer .item-wrap .icon-wrap {
    flex: 0 0 auto;
}

.ucheck-wrapper .ucheck-profile .profile-outer {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 40px;
}
@media only screen and (max-width: 1199px) {
    .ucheck-wrapper .ucheck-profile .profile-outer {
        grid-gap: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-profile .profile-outer {
        grid-gap: 20px;
    }
}
.ucheck-wrapper .ucheck-profile .profile-outer .item {
    position: relative;
}
.ucheck-wrapper .ucheck-profile .profile-outer .item:first-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 40px;
}

@media only screen and (max-width: 1199px) {
    .ucheck-wrapper .ucheck-profile .profile-outer .item:first-child {
        grid-gap: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-profile .profile-outer .item:first-child {
        grid-gap: 20px;
    }
}
@media only screen and (max-width: 480px) {
    .ucheck-wrapper .ucheck-profile .profile-outer .item:first-child {
        grid-template-columns: 1fr;
    }
}
.ucheck-wrapper .ucheck-profile .profile-outer .item:last-child {
    position: relative;
}
.ucheck-wrapper .ucheck-profile .profile-outer .item:last-child .short-content {
    position: absolute;
    bottom: 200px;
    left: 60px;
    z-index: 9;
    max-width: 490px;
}
@media only screen and (max-width: 1599px) {
    .ucheck-wrapper .ucheck-profile .profile-outer .item:last-child .short-content {
        left: 40px;
        max-width: 430px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .ucheck-wrapper .ucheck-profile .profile-outer .item:last-child .short-content {
        bottom: 150px;
    }
}
@media only screen and (max-width: 1199px) {
    .ucheck-wrapper .ucheck-profile .profile-outer .item:last-child .short-content {
        bottom: 100px;
        max-width: 400px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-profile .profile-outer .item:last-child .short-content {
        bottom: 0;
        max-width: none;
        left: 0;
        position: relative;
        margin-top: 30px;
        text-align: center;
    }
}
.ucheck-wrapper .ucheck-profile .profile-outer .item:last-child .short-content .ucheckhead-text {
    font-size: 30px;
    line-height: 40px;
    color: #ffffff;
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-profile .profile-outer .item:last-child .short-content .ucheckhead-text {
        font-size: 32px;
        line-height: 42px;
    }
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .ucheck-profile .profile-outer .item:last-child .short-content .ucheckhead-text {
        font-size: 28px;
        line-height: 38px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-profile .profile-outer .item:last-child .short-content span {
        color: #000000;
        opacity: 0.5;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-profile .profile-outer .item:last-child .short-content .ucheckhead-text {
        color: #000000;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-profile .profile-outer .item:last-child .short-content p {
        color: #000000;
        opacity: 0.6;
        font-size: 20px;
        line-height: 28px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-profile .profile-outer .item:last-child .short-content p {
        font-size: 18px;
        line-height: 28px;
    }
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .ucheck-profile .profile-outer .item:last-child .short-content p {
        font-size: 16px;
        line-height: 26px;
    }
}
.ucheck-wrapper .ucheck-profile .profile-outer .item .img-wrap {
    position: relative;
}
.ucheck-wrapper .ucheck-profile .profile-outer .item .img-wrap .logo-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    margin: 0 auto;
    text-align: center;
    transform: translateY(-50%);
}
@media only screen and (max-width: 1365px) {
    .ucheck-wrapper .ucheck-profile .profile-outer .item .img-wrap .logo-wrap img {
        max-width: 60%;
    }
}
.ucheck-wrapper .ucheck-profile .profile-outer .item .img-wrap .bottom-wrap {
    position: absolute;
    width: calc(100% - 100px);
    height: calc(100% - 100px);
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 auto;
    display: flex;
    align-items: end;
    justify-content: space-between;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-profile .profile-outer .item .img-wrap .bottom-wrap {
        width: calc(100% - 30px);
        height: calc(100% - 30px);
    }
}
.ucheck-wrapper .ucheck-profile .profile-outer .item .img-wrap .bottom-wrap .icons {
    width: 100px;
    height: 100px;
    border-radius: 99em;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-profile .profile-outer .item .img-wrap .bottom-wrap .icons {
        width: 80px;
        height: 80px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-profile .profile-outer .item .img-wrap .bottom-wrap .icons {
        width: 70px;
        height: 70px;
    }
}
.ucheck-wrapper .ucheck-profile .profile-outer .item .img-wrap .bottom-wrap .icons:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}

.ucheck-wrapper .ucheck-profile .profile-outer .item .img-wrap .bottom-wrap .icons img {
    position: relative;
    z-index: 2;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-analysis .heading-wrap {
        text-align: center;
    }
}
.ucheck-wrapper .ucheck-analysis .heading-wrap .title-wrap {
    margin: 0;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-analysis .heading-wrap .title-wrap {
        margin: 0 0 20px;
    }
}
.ucheck-wrapper .ucheck-analysis .heading-wrap .para-text p {
    color: #7d7d7d;
}

.ucheck-wrapper .ucheck-analysis .analysis-wrapper .analysis-outer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 40px;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-analysis .analysis-wrapper .analysis-outer {
        grid-gap: 30px;
        grid-template-columns: 1fr;
    }
}

.ucheck-wrapper .ucheck-analysis .analysis-wrapper .analysis-outer .item .topside {
    background-color: #021d71;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 45px 50px 50px;
    border-radius: 30px 30px 0 0;
    min-height: 315px;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-analysis .analysis-wrapper .analysis-outer .item .topside {
        padding: 25px;
        border-radius: 20px 20px 0 0;
        min-height: auto;
        gap: 20px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-analysis .analysis-wrapper .analysis-outer .item .topside {
        border-radius: 15px 15px 0 0;
        padding: 22px 20px 18px;
    }
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .ucheck-analysis .analysis-wrapper .analysis-outer .item .topside {
        gap: 15px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-analysis .analysis-wrapper .analysis-outer .item .topside span {
        text-align: center !important;
    }
}

.ucheck-wrapper .ucheck-analysis .analysis-wrapper .analysis-outer .item:nth-child(2) .topside {
    position: relative;
    overflow: hidden;
}
.ucheck-wrapper .ucheck-analysis .analysis-wrapper .analysis-outer .item:nth-child(2) .topside:after {
    content: "";
    position: absolute;
    background: url("../img/case-study-details/medical-practice-management-system/solutions-bg.svg") no-repeat center;
    background-size: cover;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    right: 0;
    margin: 0 auto;
}
.ucheck-wrapper .ucheck-analysis .analysis-wrapper .analysis-outer .item:nth-child(2) .topside .icon-wrap {
    position: relative;
    z-index: 8;
}
.ucheck-wrapper .ucheck-analysis .analysis-wrapper .analysis-outer .item:nth-child(2) .topside span {
    position: relative;
    z-index: 8;
}
.ucheck-wrapper .ucheck-analysis .analysis-wrapper .analysis-outer .item .topside .icon-wrap {
    width: 140px;
    height: 140px;
    border-radius: 99em;
    border: 2px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-analysis .analysis-wrapper .analysis-outer .item .topside .icon-wrap {
        margin: 0 auto !important;
        width: 100px;
        height: 100px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-analysis .analysis-wrapper .analysis-outer .item .topside .icon-wrap {
        width: 70px;
        height: 70px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-analysis .analysis-wrapper .analysis-outer .item .topside .icon-wrap img {
        max-width: 50%;
    }
}
.ucheck-wrapper .ucheck-analysis .analysis-wrapper .analysis-outer .item .bottomside {
    padding: 25px 52px;
    border-radius: 0 0 30px 30px;
    border: 2px solid #efefef;
    border-top: 2px solid transparent;
    height: calc(100% - 315px);
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-analysis .analysis-wrapper .analysis-outer .item .bottomside {
        padding: 20px 25px;
        height: auto;
        border-radius: 0 0 20px 20px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-analysis .analysis-wrapper .analysis-outer .item .bottomside {
        border-radius: 0 0 15px 15px;
        padding: 22px 20px;
    }
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .ucheck-analysis .analysis-wrapper .analysis-outer .item .bottomside {
        padding: 18px;
    }
}

.ucheck-wrapper .ucheck-analysis .analysis-wrapper .analysis-outer .item .bottomside ul li {
    position: relative;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-analysis .analysis-wrapper .analysis-outer .item .bottomside ul li {
        margin: 0 0 8px;
        padding-left: 15px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-analysis .analysis-wrapper .analysis-outer .item .bottomside ul li:after {
        content: "";
        position: absolute;
        left: 0;
        top: 13px;
        width: 6px;
        height: 6px;
        border-radius: 99em;
        background-color: #000000;
    }
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .ucheck-analysis .analysis-wrapper .analysis-outer .item .bottomside ul li:after {
        top: 10px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-analysis .analysis-wrapper .analysis-outer .item .bottomside ul li:last-child {
        margin: 0;
    }
}
.ucheck-wrapper .ucheck-analysis .analysis-wrapper .analysis-outer .item .bottomside ul li .inner-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: calc(1.8em * 3);
    line-height: 1.5em;
}

@media only screen and (min-width: 992px) and (max-width: 1499px) {
    .ucheck-wrapper .ucheck-analysis .analysis-wrapper .analysis-outer .item .bottomside ul li .inner-text {
        -webkit-line-clamp: 4;
        min-height: calc(1.7em * 4);
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .ucheck-wrapper .ucheck-analysis .analysis-wrapper .analysis-outer .item .bottomside ul li .inner-text {
        font-size: 18px;
        line-height: 28px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-analysis .analysis-wrapper .analysis-outer .item .bottomside ul li .inner-text {
        -webkit-line-clamp: inherit;
        min-height: auto;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-analysis .analysis-wrapper .analysis-outer .item .bottomside ul li .inner-text {
        font-size: 18px;
        line-height: 28px;
    }
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .ucheck-analysis .analysis-wrapper .analysis-outer .item .bottomside ul li .inner-text {
        font-size: 16px;
        line-height: 26px;
    }
}
.ucheck-wrapper .ucheck-analysis .analysis-wrapper .analysis-outer .item:first-child ul li {
    text-align: right;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-analysis .analysis-wrapper .analysis-outer .item ul li {
        text-align: left !important;
    }
}
.ucheck-wrapper .ucheck-analysis .analysis-wrapper .analysis-outer .item:first-child ul li:before {
    content: "";
    position: absolute;
    background: url("../img/case-study-details/medical-practice-management-system/arrow-with-bg.svg") no-repeat center;
    background-size: cover;
    width: 87px;
    height: 37px;
    top: 30%;
    right: -114px;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-analysis .analysis-wrapper .analysis-outer .item:first-child ul li:before {
        display: none;
    }
}
.ucheck-wrapper .ucheck-points:before {
    content: "";
    position: absolute;
    background: url("../img/case-study-details/medical-practice-management-system/keypoint-bg.svg") no-repeat center;
    background-size: cover;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}
@media only screen and (min-width: 992px) and (max-width: 1365px) {
    .ucheck-wrapper .ucheck-points:before {
        background-size: 100% 100%;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-points .heading-wrap {
        text-align: center;
    }
}
.ucheck-wrapper .ucheck-points .heading-wrap .title-wrap {
    margin: 0;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-points .heading-wrap .title-wrap {
        margin: 0 0 20px;
    }
}
.ucheck-wrapper .ucheck-points .heading-wrap .title-wrap .ucheckhead-text {
    color: #ffffff;
}
.ucheck-wrapper .ucheck-points .keypoint-outer .points-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 40px;
}
@media only screen and (max-width: 1199px) {
    .ucheck-wrapper .ucheck-points .keypoint-outer .points-wrapper {
        grid-gap: 30px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-points .keypoint-outer .points-wrapper {
        display: flex;
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow: hidden;
        overflow-x: scroll;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-points .keypoint-outer .points-wrapper::-webkit-scrollbar {
        height: 8px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-points .keypoint-outer .points-wrapper::-webkit-scrollbar-thumb {
        background-color: #ccc; /* Customize scrollbar color */
        border-radius: 4px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-points .keypoint-outer .points-wrapper::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Customize scrollbar track color */
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-points .keypoint-outer .points-wrapper {
        grid-gap: 20px;
    }
}
.ucheck-wrapper .ucheck-points .keypoint-outer .points-wrapper .item {
    border: 0.5px solid #efefef;
    position: relative;
    overflow: hidden;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-points .keypoint-outer .points-wrapper .item {
        width: 100%;
        min-width: 60%;
        margin: 0 0 8px;
    }
}
@media only screen and (max-width: 480px) {
    .ucheck-wrapper .ucheck-points .keypoint-outer .points-wrapper .item {
        min-width: 80%;
    }
}

.ucheck-wrapper .ucheck-points .keypoint-outer .points-wrapper .item .inner-wrap {
    position: relative;
    z-index: 9;
    display: flex;
    flex-direction: column;
    gap: 75px;
    padding: 25px 30px;
}

@media only screen and (max-width: 1199px) {
    .ucheck-wrapper .ucheck-points .keypoint-outer .points-wrapper .item .inner-wrap {
        gap: 30px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-points .keypoint-outer .points-wrapper .item .inner-wrap {
        padding: 20px 25px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-points .keypoint-outer .points-wrapper .item .inner-wrap {
        padding: 22px 20px;
        gap: 20px;
    }
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .ucheck-points .keypoint-outer .points-wrapper .item .inner-wrap {
        padding: 18px;
    }
}

.ucheck-wrapper .ucheck-points .keypoint-outer .points-wrapper .item:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    left: 0;
    right: 0;
    top: 0;
}

.ucheck-wrapper .ucheck-points .keypoint-outer .points-wrapper .item .icon-wrap {
    width: 73px;
    height: 73px;
    background-color: #021d71;
    border-radius: 99em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}

@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-points .keypoint-outer .points-wrapper .item .icon-wrap {
        width: 65px;
        height: 65px;
    }
}

@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-points .keypoint-outer .points-wrapper .item .inner-wrap .short-wrap {
        white-space: normal;
    }
}

.ucheck-wrapper .img-content .item {
    position: relative;
}
.ucheck-wrapper .ucheck-logo-wrap .img-content .item .small-logo {
    position: absolute;
    left: 90px;
    top: 70px;
    max-width: 305px;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-logo-wrap .img-content .item .small-logo {
        left: 30px;
        top: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-logo-wrap .img-content .item .small-logo {
        left: 15px;
        top: 15px;
    }
}
.ucheck-wrapper .ucheck-logo-wrap .img-content .item .small-logo img {
    filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
    -moz-filter: brightness(0) invert(1);
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-logo-wrap .img-content .item .small-logo img {
        max-width: 60%;
    }
}
.ucheck-wrapper .img-content .item .text-wrap {
    position: absolute;
    bottom: 0;
    width: 100%;
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .img-content .item .text-wrap {
        position: relative;
    }
}
.ucheck-wrapper .img-content .item.big-blurr .text-wrap {
    padding: 35px 45px;
}

@media only screen and (max-width: 1499px) {
    .ucheck-wrapper .img-content .item.big-blurr .text-wrap {
        padding: 25px 35px 28px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .img-content .item.big-blurr .text-wrap {
        padding: 20px 25px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .img-content .item.big-blurr .text-wrap {
        padding: 22px 20px;
        text-align: center;
    }
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .img-content .item.big-blurr .text-wrap {
        padding: 18px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .img-content .item.big-blurr .img-wrap {
        border-radius: 15px 15px 0 0;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .img-content .item.big-blurr .img-wrap img {
        border-radius: 15px 15px 0 0;
    }
}

.ucheck-wrapper .img-content .item .text-wrap:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(87px);
    -webkit-backdrop-filter: blur(87px);
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .img-content .item .text-wrap:after {
        backdrop-filter: inherit;
        background-color: rgba(0, 0, 0, 0.7);
    }
}
.ucheck-wrapper .img-content .item .text-wrap p {
    position: relative;
    z-index: 2;
}

.ucheck-wrapper .ucheck-process .title-wrap {
    margin: 0 0 60px;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-process .title-wrap {
        margin: 0 0 30px;
    }
}
.ucheck-wrapper .ucheck-process .process-outer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 30px;
}

@media only screen and (max-width: 1199px) {
    .ucheck-wrapper .ucheck-process .process-outer {
        display: flex;
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow: hidden;
        overflow-x: scroll;
    }
}
@media only screen and (max-width: 1199px) {
    .ucheck-wrapper .ucheck-process .process-outer::-webkit-scrollbar {
        height: 8px;
    }
}
@media only screen and (max-width: 1199px) {
    .ucheck-wrapper .ucheck-process .process-outer::-webkit-scrollbar-thumb {
        background-color: #ccc; /* Customize scrollbar color */
        border-radius: 4px;
    }
}
@media only screen and (max-width: 1199px) {
    .ucheck-wrapper .ucheck-process .process-outer::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Customize scrollbar track color */
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-process .process-outer {
        gap: 20px;
    }
}
.ucheck-wrapper .ucheck-process .process-outer .item {
    border: 0.5px solid #cfcfcf;
    display: flex;
    flex-direction: column;
    gap: 70px;
    padding: 25px;
    position: relative;
}
@media only screen and (max-width: 1199px) {
    .ucheck-wrapper .ucheck-process .process-outer .item {
        width: 100%;
        min-width: 50%;
        margin: 0 0 8px;
        gap: 50px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-process .process-outer .item {
        gap: 35px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-process .process-outer .item {
        gap: 20px;
        padding: 22px 20px;
    }
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .ucheck-process .process-outer .item {
        padding: 18px;
    }
}
@media only screen and (max-width: 480px) {
    .ucheck-wrapper .ucheck-process .process-outer .item {
        min-width: 80%;
    }
}
.ucheck-wrapper .ucheck-process .process-outer .item .arrow-box {
    position: absolute;
    right: -55px;
    top: 120px;
    z-index: 9;
    width: 79px;
    height: 30px;
    background-color: #ffffff;
    border-top: 0.5px solid #cfcfcf;
    border-bottom: 0.5px solid #cfcfcf;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-process .process-outer .item .arrow-box {
        width: 62px;
        height: 22px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-process .process-outer .item .arrow-box {
        display: none;
    }
}
.ucheck-wrapper .ucheck-process .process-outer .item .icon-wrap {
    width: 80px;
    height: 80px;
    border: 0.5px solid #cfcfcf;
    border-radius: 99em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-process .process-outer .item .icon-wrap {
        width: 65px;
        height: 65px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-process .process-outer .item .icon-wrap img {
        max-width: 60%;
    }
}
@media only screen and (max-width: 1199px) {
    .ucheck-wrapper .ucheck-process .process-outer .item .short-wrap {
        white-space: normal;
    }
}

@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-process .process-outer .item .short-wrap h3 {
        font-size: 20px;
        line-height: 30px;
    }
}

.ucheck-wrapper .ucheck-process-wrap .outer-wrap {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
}
.ucheck-wrapper .ucheck-process-wrap .outer-wrap .item {
    display: flex;
    gap: 20px;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-process-wrap .outer-wrap .item {
        flex-wrap: nowrap;
        overflow: hidden;
        overflow-x: scroll;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-process-wrap .outer-wrap .item::-webkit-scrollbar {
        height: 8px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-process-wrap .outer-wrap .item::-webkit-scrollbar-thumb {
        background-color: #ccc; /* Customize scrollbar color */
        border-radius: 4px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-process-wrap .outer-wrap .item::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Customize scrollbar track color */
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-process-wrap .outer-wrap .item .inner-item {
        width: 100%;
        min-width: 80%;
        margin: 0 0 8px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-process-wrap .outer-wrap .item .inner-item span {
        font-size: 20px;
        line-height: 30px;
    }
}
.ucheck-wrapper .ucheck-process-wrap .outer-wrap .item:first-child .inner-item:nth-child(1) {
    width: 40.31%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-between;
}
.ucheck-wrapper .ucheck-process-wrap .outer-wrap .item:first-child .inner-item:nth-child(1) .content-wrap {
    padding: 20px 25px 0;
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-process-wrap .outer-wrap .item:first-child .inner-item:nth-child(1) .content-wrap {
        padding: 22px 20px 0;
    }
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .ucheck-process-wrap .outer-wrap .item:first-child .inner-item:nth-child(1) .content-wrap {
        padding: 18px 18px 0;
    }
}
.ucheck-wrapper .ucheck-process-wrap .outer-wrap .item:first-child .inner-item:nth-child(2) {
    width: 31.59%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    border: none;
}
.ucheck-wrapper .ucheck-process-wrap .outer-wrap .item:first-child .inner-item:nth-child(2) .top {
    padding: 50px 20px;
    position: relative;
    background: url("../img/case-study-details/medical-practice-management-system/webp/doctors-nearby-location.webp")
        no-repeat center;
    background-size: cover;
    border: 0.5px solid #cfcfcf;
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-process-wrap .outer-wrap .item:first-child .inner-item:nth-child(2) .top {
        padding: 22px 20px;
    }
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .ucheck-process-wrap .outer-wrap .item:first-child .inner-item:nth-child(2) .top {
        padding: 18px;
    }
}
.ucheck-wrapper .ucheck-process-wrap .outer-wrap .item:first-child .inner-item:nth-child(2) .bottom {
    border: 0.5px solid #cfcfcf;
}

.ucheck-wrapper .ucheck-process-wrap .outer-wrap .item:first-child .inner-item:nth-child(3) {
    width: 25.6%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-between;
    padding: 20px 10px;
}
.ucheck-wrapper .ucheck-process-wrap .outer-wrap .item:first-child .inner-item:nth-child(3) .content-wrap {
    padding: 0 15px;
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-process-wrap .outer-wrap .item:first-child .inner-item:nth-child(3) .content-wrap {
        padding: 0 10px;
    }
}
.ucheck-wrapper .ucheck-process-wrap .outer-wrap .item:last-child .inner-item:nth-child(1) {
    width: 35.22%;
}
.ucheck-wrapper .ucheck-process-wrap .outer-wrap .item:last-child .inner-item:nth-child(2) {
    width: 40.5%;
    overflow: hidden;
    position: relative;
}
.ucheck-wrapper .ucheck-process-wrap .outer-wrap .item:last-child .inner-item:nth-child(2) .content-wrap {
    position: relative;
    z-index: 3;
    max-width: 380px;
    padding: 20px 25px;
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-process-wrap .outer-wrap .item:last-child .inner-item:nth-child(2) .content-wrap {
        padding: 22px 20px;
    }
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .ucheck-process-wrap .outer-wrap .item:last-child .inner-item:nth-child(2) .content-wrap {
        padding: 18px;
    }
}
@media only screen and (max-width: 375px) {
    .ucheck-wrapper .ucheck-process-wrap .outer-wrap .item:last-child .inner-item:nth-child(2) .content-wrap {
        height: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }
}
.ucheck-wrapper .ucheck-process-wrap .outer-wrap .item:last-child .inner-item:nth-child(2) .img-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
}
@media only screen and (max-width: 375px) {
    .ucheck-wrapper .ucheck-process-wrap .outer-wrap .item:last-child .inner-item:nth-child(2) .img-wrap {
        display: none;
    }
}

.ucheck-wrapper .ucheck-process-wrap .outer-wrap .item:last-child .inner-item:nth-child(3) {
    width: 21.72%;
}
.ucheck-wrapper .ucheck-process-wrap .outer-wrap .item .inner-item {
    border: 0.5px solid #cfcfcf;
    /*border: 1px solid red;*/
    background-color: #fbfbfb;
    overflow: hidden;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-process-wrap .outer-wrap .item .inner-item .img-wrap {
        height: 100%;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-process-wrap .outer-wrap .item .inner-item .img-wrap img {
        min-height: 100%;
        object-fit: cover;
    }
}

.ucheck-wrapper .ucheckimg-multiple .img-content .item .small-logo {
    position: absolute;
    left: 60px;
    top: 60px;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheckimg-multiple .img-content .item .small-logo {
        left: 30px;
        top: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheckimg-multiple .img-content .item .small-logo {
        left: 15px;
        top: 15px;
    }
}
.ucheck-wrapper .ucheckimg-multiple .img-outer {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 40px;
}
@media only screen and (max-width: 1199px) {
    .ucheck-wrapper .ucheckimg-multiple .img-outer {
        grid-gap: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheckimg-multiple .img-outer {
        grid-gap: 20px;
    }
}
.ucheck-wrapper .ucheckimg-multiple .img-outer .img-content:first-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 40px;
}

@media only screen and (max-width: 1199px) {
    .ucheck-wrapper .ucheckimg-multiple .img-outer .img-content:first-child {
        grid-gap: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheckimg-multiple .img-outer .img-content:first-child {
        grid-gap: 20px;
        grid-template-columns: 1fr;
    }
}

.ucheck-wrapper .ucheckimg-multiple .img-outer .img-content .item:nth-child(2) .img-wrap {
    border: 0.5px solid #cfcfcf;
}

.ucheck-wrapper .ucheck-screens-outer {
    background-color: #fbfbfb;
}
.ucheck-wrapper .ucheck-screens-outer .screen-wrap .img-wrapper {
    display: flex;
    flex-wrap: nowrap;
    max-width: 1440px;
    margin: 0 auto;
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-screens-outer .screen-wrap .img-wrapper {
        max-width: none;
        justify-content: center;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-screens-outer .screen-wrap .img-wrapper .img-wrap {
        text-align: center;
    }
}

.ucheck-wrapper .ucheck-screens-outer .screen-wrap .img-wrapper .img-wrap:first-child {
    margin-top: 150px;
}

@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-screens-outer .screen-wrap .img-wrapper .img-wrap:first-child {
        margin-top: 70px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-screens-outer .screen-wrap .img-wrapper .img-wrap:first-child {
        display: none;
    }
}
.ucheck-wrapper .ucheck-screens-outer .screen-wrap .img-wrapper .img-wrap:last-child {
    margin-top: 150px;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-screens-outer .screen-wrap .img-wrapper .img-wrap:last-child {
        margin-top: 70px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-screens-outer .screen-wrap .img-wrapper .img-wrap:last-child {
        display: none;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-screens-outer .screen-wrap .img-wrapper .img-wrap img {
        max-width: 60%;
    }
}
.ucheck-wrapper .ucheck-screens-outer .screen-wrap-bottom {
    width: calc(100% - 70px);
    margin: 50px auto 0;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-screens-outer .screen-wrap-bottom {
        margin: 30px auto 0;
    }
}
.ucheck-wrapper .ucheck-screens-outer .screen-wrap-bottom img {
    filter: drop-shadow(5px 5px 21px rgba(0, 0, 0, 0.04));
}

.ucheck-wrapper .ucheck-detail-wrapper .img-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 30px;
    position: relative;
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-detail-wrapper .img-wrapper {
        grid-gap: 20px;
        grid-template-columns: 1fr;
    }
}
.ucheck-wrapper .ucheck-detail-wrapper .img-wrapper .logo-round {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 177px;
    height: 177px;
    outline: 10px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 99em;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-detail-wrapper .img-wrapper .logo-round {
        width: 100px;
        height: 100px;
        outline: 5px solid #ffffff;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-detail-wrapper .img-wrapper .logo-round {
        width: 80px;
        height: 80px;
        outline: 3px solid #ffffff;
        position: relative;
        top: 0;
        transform: none;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-detail-wrapper .img-wrapper .logo-round img {
        max-width: 60%;
    }
}

.ucheck-wrapper .ucheck-detail-wrapper .img-wrapper .item.first .img-wrap {
    border: 0.5px solid #cfcfcf;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-detail-wrapper .img-wrapper .item.first .img-wrap {
        height: 100%;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-detail-wrapper .img-wrapper .item.first .img-wrap img {
        min-height: 100%;
        object-fit: cover;
    }
}
.ucheck-wrapper .ucheck-detail-wrapper .img-wrapper .item.last {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 30px;
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-detail-wrapper .img-wrapper .item.last {
        grid-gap: 20px;
    }
}

.ucheck-wrapper .ucheck-detail-wrapper .img-wrapper .item.last .img-wrap:nth-child(2) {
    border: 0.5px solid #cfcfcf;
}
.ucheck-wrapper .ucheck-detail-wrapper .img-wrapper .item.last .img-wrap:nth-child(2) img {
    min-height: 100%;
    object-fit: cover;
}

.ucheck-wrapper .ucheck-fingertips {
    position: relative;
    background: url("../img/case-study-details/medical-practice-management-system/webp/fingertips-bg.webp") no-repeat
        right;
    background-size: cover;
    height: 100%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .ucheck-wrapper .ucheck-fingertips {
        background-size: contain;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-fingertips {
        background-image: none;
        padding: 0;
    }
}
.ucheck-wrapper .ucheck-fingertips .inner-content {
    display: flex;
    align-items: end;
    gap: 75px;
    max-width: 1150px;
}
@media only screen and (max-width: 1499px) {
    .ucheck-wrapper .ucheck-fingertips .inner-content {
        gap: 30px;
        max-width: 900px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-fingertips .inner-content {
        flex-wrap: wrap;
        justify-content: center;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-fingertips .inner-content .img-wrap.finger {
        text-align: center;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-fingertips .inner-content .img-wrap.finger img {
        max-width: 60%;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-fingertips .inner-content .right-side {
        text-align: center;
    }
}
.ucheck-wrapper .ucheck-fingertips .inner-content .right-side .content-wrap {
    display: flex;
    flex-direction: column;
    gap: 170px;
}
@media only screen and (max-width: 1499px) {
    .ucheck-wrapper .ucheck-fingertips .inner-content .right-side .content-wrap {
        gap: 100px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-fingertips .inner-content .right-side .content-wrap {
        gap: 30px;
    }
}
.ucheck-wrapper .ucheck-fingertips .inner-content .right-side .doc-lists ul {
    display: flex;
    align-items: center;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-fingertips .inner-content .right-side .doc-lists ul {
        justify-content: center;
    }
}
.ucheck-wrapper .ucheck-fingertips .inner-content .right-side .doc-lists ul li {
    margin-left: -55px;
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-fingertips .inner-content .right-side .doc-lists ul li {
        margin-left: -40px;
    }
}
@media only screen and (max-width: 375px) {
    .ucheck-wrapper .ucheck-fingertips .inner-content .right-side .doc-lists ul li {
        margin-left: -30px;
    }
}
.ucheck-wrapper .ucheck-fingertips .inner-content .right-side .doc-lists ul li:first-child {
    margin-left: 0;
}
.ucheck-wrapper .ucheck-fingertips .inner-content .right-side .doc-lists ul li:first-child .img-wrap {
    border: 6px solid transparent;
}
.ucheck-wrapper .ucheck-fingertips .inner-content .right-side .doc-lists ul li .img-wrap {
    border: 6px solid #ffffff;
    display: block;
    border-radius: 99em;
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-fingertips .inner-content .right-side .doc-lists ul li .img-wrap {
        width: 100px;
        height: 100px;
    }
}
@media only screen and (max-width: 375px) {
    .ucheck-wrapper .ucheck-fingertips .inner-content .right-side .doc-lists ul li .img-wrap {
        width: 65px;
        height: 65px;
    }
}

.ucheck-wrapper .ucheck-fingertips .inner-content .right-side .doc-lists ul li .img-wrap img {
    margin: 0 -1px;
}
.ucheck-wrapper .ucheck-fingertips .inner-content .right-side .doc-lists ul li .last-wrap {
    width: 126px;
    height: 126px;
    border-radius: 99em;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-fingertips .inner-content .right-side .doc-lists ul li .last-wrap {
        width: 100px;
        height: 100px;
    }
}
@media only screen and (max-width: 375px) {
    .ucheck-wrapper .ucheck-fingertips .inner-content .right-side .doc-lists ul li .last-wrap {
        width: 65px;
        height: 65px;
    }
}
@media only screen and (max-width: 375px) {
    .ucheck-wrapper .ucheck-fingertips .inner-content .right-side .doc-lists ul li .last-wrap img {
        max-width: 40%;
    }
}
.ucheck-wrapper .ucheck-appointment .booking-screen-outer {
    position: relative;
    padding: 100px 0;
    background: url("../img/case-study-details/medical-practice-management-system/appointment-bg.svg") no-repeat;
    background-size: cover;
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-appointment .booking-screen-outer {
        background-image: none;
        padding: 50px 0 0;
    }
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .ucheck-appointment .booking-screen-outer {
        padding: 35px 0 0;
    }
}

.ucheck-wrapper .ucheck-appointment .booking-screen-outer .book-screen-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 65px;
    position: relative;
    z-index: 7;
}

@media only screen and (max-width: 1199px) {
    .ucheck-wrapper .ucheck-appointment .booking-screen-outer .book-screen-wrap {
        grid-gap: 35px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-appointment .booking-screen-outer .book-screen-wrap {
        grid-gap: 20px;
        grid-template-columns: 1fr;
    }
}

.ucheck-wrapper .ucheck-appointment .booking-screen-outer .book-screen-wrap .item {
    display: flex;
    align-items: center;
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-appointment .booking-screen-outer .book-screen-wrap .item {
        justify-content: center;
    }
}
.ucheck-wrapper .ucheck-appointment .booking-screen-outer .book-screen-wrap .item:nth-child(2) {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 95px;
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-appointment .booking-screen-outer .book-screen-wrap .item:nth-child(2) {
        display: flex;
        white-space: nowrap;
        overflow: hidden;
        overflow-x: scroll;
        grid-gap: 20px;
        justify-content: start;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-appointment .booking-screen-outer .book-screen-wrap .item:nth-child(2)::-webkit-scrollbar {
        height: 8px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper
        .ucheck-appointment
        .booking-screen-outer
        .book-screen-wrap
        .item:nth-child(2)::-webkit-scrollbar-thumb {
        background-color: #ccc; /* Customize scrollbar color */
        border-radius: 4px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper
        .ucheck-appointment
        .booking-screen-outer
        .book-screen-wrap
        .item:nth-child(2)::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Customize scrollbar track color */
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-appointment .booking-screen-outer .book-screen-wrap .item:nth-child(2) .img-wrap {
        width: 100%;
        min-width: 60%;
        margin: 0 0 8px;
    }
}
.ucheck-wrapper .ucheck-manage-section .item-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 80px;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-manage-section .item-wrapper {
        grid-gap: 70px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-manage-section .item-wrapper {
        grid-gap: 50px;
    }
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .ucheck-manage-section .item-wrapper {
        grid-gap: 30px;
    }
}
@media only screen and (min-width: 1500px) {
    .ucheck-wrapper .ucheck-manage-section .item-wrapper .item-container {
        width: calc((100vw + 1550px) / 2);
    }
}
@media only screen and (min-width: 1500px) {
    .ucheck-wrapper .ucheck-manage-section .item-wrapper .item-container.right {
        margin-left: auto;
        margin-right: 0;
    }
}
@media only screen and (min-width: 1500px) {
    .ucheck-wrapper .ucheck-manage-section .item-wrapper .item-container.left {
        margin-right: auto;
        margin-left: 0;
    }
}

.ucheck-wrapper .ucheck-manage-section .item-wrapper .item-container .item {
    display: flex;
    align-items: center;
    gap: 145px;
    justify-content: space-between;
}
@media only screen and (max-width: 1365px) {
    .ucheck-wrapper .ucheck-manage-section .item-wrapper .item-container .item {
        gap: 100px;
    }
}
@media only screen and (max-width: 1199px) {
    .ucheck-wrapper .ucheck-manage-section .item-wrapper .item-container .item {
        gap: 30px;
        flex-direction: column;
    }
}

.ucheck-wrapper .ucheck-manage-section .item-wrapper .item-container:nth-child(odd) .item {
    flex-direction: row-reverse;
}
@media only screen and (max-width: 1199px) {
    .ucheck-wrapper .ucheck-manage-section .item-wrapper .item-container:nth-child(odd) .item {
        flex-direction: column;
    }
}
.ucheck-wrapper .ucheck-manage-section .item-wrapper .item-container .item .content-wrap {
    flex: 0 0 auto;
}
@media only screen and (max-width: 1199px) {
    .ucheck-wrapper .ucheck-manage-section .item-wrapper .item-container .item .content-wrap {
        max-width: 800px;
        margin-right: auto;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-manage-section .item-wrapper .item-container .item .content-wrap {
        text-align: center;
        margin: 0 auto;
    }
}
.ucheck-wrapper .ucheck-manage-section .item-wrapper .item-container .item .content-wrap .title-outer {
    max-width: 660px;
}

@media only screen and (max-width: 1499px) {
    .ucheck-wrapper .ucheck-manage-section .item-wrapper .item-container .item .content-wrap .title-outer {
        max-width: 560px;
    }
}

@media only screen and (max-width: 1199px) {
    .ucheck-wrapper .ucheck-manage-section .item-wrapper .item-container .item .content-wrap .title-outer {
        max-width: none;
    }
}

.ucheck-wrapper .ucheck-design {
    background-color: #fbfbfb;
}

.ucheck-wrapper .ucheck-design .bigtext-area {
    position: relative;
    padding: 100px 0;
    height: 426px;
}
@media only screen and (max-width: 1365px) {
    .ucheck-wrapper .ucheck-design .bigtext-area {
        height: 326px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-design .bigtext-area {
        height: auto;
        padding: 35px 0;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-design .bigtext-area {
        padding: 35px 0 0;
    }
}

.ucheck-wrapper .ucheck-design .bigtext-area:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    background: url("../img/case-study-details/medical-practice-management-system/manrope.svg") no-repeat center;
    background-size: cover;
    height: 426px;
    opacity: 0.75;
}
@media only screen and (max-width: 1365px) {
    .ucheck-wrapper .ucheck-design .bigtext-area:after {
        height: 326px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-design .bigtext-area:after {
        display: none;
    }
}
.ucheck-wrapper .ucheck-design .bigtext-area .container {
    height: 100%;
}
.ucheck-wrapper .ucheck-design .bigtext-area .container .row {
    height: 100%;
}
.ucheck-wrapper .ucheck-design .bigtext-area .outer-wrap {
    display: flex;
    align-items: center;
    gap: 160px;
    position: relative;
    z-index: 7;
}

@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-design .bigtext-area .outer-wrap {
        gap: 30px;
        justify-content: center;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-design .bigtext-area .outer-wrap {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-design .bigtext-area .outer-wrap .short-wrap {
        text-align: center;
    }
}
.ucheck-wrapper .ucheck-design .manrope-text-area {
    margin-top: 70px;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-design .manrope-text-area {
        margin-top: 30px;
    }
}
.ucheck-wrapper .ucheck-design .manrope-text-area ul.font-lists {
    gap: 100px;
}

@media only screen and (max-width: 1599px) {
    .ucheck-wrapper .ucheck-design .manrope-text-area ul.font-lists {
        gap: 35px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-design .manrope-text-area ul.font-lists {
        flex-wrap: nowrap;
        overflow: hidden;
        overflow-x: scroll;
        justify-content: start !important;
        gap: 30px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-design .manrope-text-area ul.font-lists::-webkit-scrollbar {
        height: 8px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-design .manrope-text-area ul.font-lists::-webkit-scrollbar-thumb {
        background-color: #ccc; /* Customize scrollbar color */
        border-radius: 4px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-design .manrope-text-area ul.font-lists::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Customize scrollbar track color */
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-design .manrope-text-area ul.font-lists {
        gap: 20px;
    }
}
@media only screen and (max-width: 1199px) {
    .ucheck-wrapper .ucheck-design .manrope-text-area ul.font-lists li {
        font-size: 35px;
        line-height: 45px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-design .manrope-text-area ul.font-lists li {
        margin: 0 0 8px;
        font-size: 30px;
        line-height: 40px;
    }
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .ucheck-design .manrope-text-area ul.font-lists li {
        font-size: 24px;
        line-height: 34px;
    }
}

.ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper {
    display: grid;
    grid-template-columns: 1fr;
}
.ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .item {
    padding: 45px 45px 45px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 170px;
}

@media only screen and (max-width: 1365px) {
    .ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .item {
        gap: 100px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .item {
        gap: 50px;
        padding: 20px 25px;
    }
}
.ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .topside {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .topside {
        display: flex;
        flex-wrap: nowrap;
        overflow: hidden;
        overflow-x: scroll;
        margin-bottom: 30px;
        grid-gap: 20px;
    }
}
@media only screen and (max-width: 480px) {
    .ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .topside::-webkit-scrollbar {
        height: 8px;
        grid-gap: 20px;
    }
}
@media only screen and (max-width: 480px) {
    .ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .topside::-webkit-scrollbar-thumb {
        background-color: #ccc; /* Customize scrollbar color */
        border-radius: 4px;
        grid-gap: 20px;
    }
}
@media only screen and (max-width: 480px) {
    .ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .topside::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Customize scrollbar track color */
    }
}
.ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .topside .item:nth-child(1) {
    background-color: #1563eb;
}
.ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .topside .item:nth-child(2) {
    background-color: #021d71;
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .topside .item {
        width: 100%;
        min-width: 80%;
        margin: 0 0 8px;
    }
}
.ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .bottomside .item:nth-child(1) {
    width: 40.12%;
    background-color: #000000;
}

.ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .bottomside {
    display: flex;
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .bottomside {
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow: hidden;
        overflow-x: scroll;
        grid-gap: 20px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .bottomside::-webkit-scrollbar {
        height: 8px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .bottomside::-webkit-scrollbar-thumb {
        background-color: #ccc; /* Customize scrollbar color */
        border-radius: 4px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .bottomside::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Customize scrollbar track color */
    }
}
.ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .bottomside .item:nth-child(1) {
    width: 40.12%;
    background-color: #000000;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .bottomside .item:nth-child(1) {
        width: 35%;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .bottomside .item:nth-child(1) {
        width: 23%;
    }
}
.ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .bottomside .item:nth-child(2) {
    width: 25.73%;
    background-color: #a5a5a5;
    padding: 45px 35px 45px;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .bottomside .item:nth-child(2) {
        padding: 20px 25px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .bottomside .item:nth-child(2) {
        width: 23%;
    }
}

.ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .bottomside .item:nth-child(3) {
    width: 17.07%;
    background-color: #efefef;
    padding: 45px 25px 45px;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .bottomside .item:nth-child(3) {
        padding: 20px 25px;
        width: 19.8%;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .bottomside .item:nth-child(3) {
        width: 23%;
    }
}
.ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .bottomside .item:last-child {
    width: 17.07%;
    background-color: #ffffff;
    padding: 45px 25px 45px;
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .bottomside .item:last-child {
        padding: 20px 25px;
        width: 19.8%;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .bottomside .item:last-child {
        width: 23%;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .bottomside .item {
        width: 23%;
        min-width: 50%;
        margin: 0 0 8px;
    }
}
/* @media only screen and (max-width: 480px) {
    .ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .bottomside .item {
        min-width: 80%;
    }
} */

.ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .item .bottom-text ul {
    display: flex;
    gap: 60px;
}

.ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .bottomside .item:nth-child(2) .bottom-text ul {
    gap: 50px;
}
.ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .bottomside .item:nth-child(3) .bottom-text ul,
.ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .bottomside .item:nth-child(4) .bottom-text ul {
    gap: 15px;
}

@media only screen and (max-width: 1599px) {
    .ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .item:nth-child(1) .bottom-text ul,
    .ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .item:nth-child(2) .bottom-text ul,
    .ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .item:nth-child(3) .bottom-text ul,
    .ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .item:last-child .bottom-text ul {
        flex-wrap: wrap;
        gap: 15px !important;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .item:nth-child(1) .bottom-text ul,
    .ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .item:nth-child(2) .bottom-text ul,
    .ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .item:nth-child(3) .bottom-text ul,
    .ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .item:last-child .bottom-text ul {
        gap: 10px !important;
    }
}
@media only screen and (max-width: 1599px) {
    .ucheck-wrapper .ucheck-design .manrope-text-area .box-wrapper .item .bottom-text ul li {
        font-size: 18px;
        line-height: 28px;
    }
}

.ucheck-wrapper .ucheck-impact .impact-outer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 30px;
    margin-top: 40px;
}

@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-impact .impact-outer {
        display: flex;
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow: hidden;
        overflow-x: scroll;
        margin-top: 30px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-impact .impact-outer::-webkit-scrollbar {
        height: 8px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-impact .impact-outer::-webkit-scrollbar-thumb {
        background-color: #ccc; /* Customize scrollbar color */
        border-radius: 4px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-impact .impact-outer::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Customize scrollbar track color */
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-impact .impact-outer {
        grid-gap: 20px;
    }
}
.ucheck-wrapper .ucheck-impact .impact-outer .item {
    border: 0.5px solid #cfcfcf;
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding: 25px 30px;
}
@media only screen and (max-width: 1199px) {
    .ucheck-wrapper .ucheck-impact .impact-outer .item {
        gap: 30px;
    }
}
@media only screen and (max-width: 991px) {
    .ucheck-wrapper .ucheck-impact .impact-outer .item {
        white-space: normal;
        margin: 0 0 8px;
        width: 100%;
        min-width: 60%;
        padding: 20px 25px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-impact .impact-outer .item {
        gap: 20px;
        padding: 22px 20px;
    }
}
@media only screen and (max-width: 575px) {
    .ucheck-wrapper .ucheck-impact .impact-outer .item {
        padding: 18px;
    }
}
@media only screen and (max-width: 480px) {
    .ucheck-wrapper .ucheck-impact .impact-outer .item {
        min-width: 80%;
    }
}
.ucheck-wrapper .ucheck-impact .impact-outer .item .icon-wrap {
    width: 80px;
    height: 80px;
    border: 0.5px solid #cfcfcf;
    border-radius: 99em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-impact .impact-outer .item .icon-wrap {
        width: 65px;
        height: 65px;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-impact .impact-outer .item .icon-wrap img {
        max-width: 80%;
    }
}
@media only screen and (max-width: 767px) {
    .ucheck-wrapper .ucheck-impact .impact-outer .item .short-wrap h3 {
        font-size: 20px;
        line-height: 30px;
    }
}

/*medical practice management page css ends here*/

/*teerival page css starts here*/

@font-face {
    font-family: "Google Sans Regular";
    src: url("../portfolio-fonts/teerival/GoogleSans-Regular.woff") format("woff"),
        url("../portfolio-fonts/teerival/GoogleSans-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Google Sans Bold";
    src: url("../portfolio-fonts/teerival/GoogleSans-Bold.woff") format("woff"),
        url("../portfolio-fonts/teerival/GoogleSans-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Google Sans Medium";
    src: url("../portfolio-fonts/teerival/GoogleSans-Medium.woff") format("woff"),
        url("../portfolio-fonts/teerival/GoogleSans-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    --teeblue: #25182f;
    --teeskyblue: #25adcc;
    --teelightblue: #2d1044;
    --teedarkblue: #1c274c;
    --teeblack: #111;
    --teegray: #666;
    --teewhite: #fff;
    --teelightpurple: #eee9ff;
}

.teerival-wrapper {
    width: 100%;
    height: 100%;
    background-color: var(--teelightpurple);
}
.teerival-wrapper h1,
.teerival-wrapper h2,
.teerival-wrapper h3,
.teerival-wrapper h4,
.teerival-wrapper h5,
.teerival-wrapper h6,
.teerival-wrapper p,
.teerival-wrapper ul,
.teerival-wrapper li,
.teerival-wrapper a {
    margin: 0;
    padding: 0;
}
.teerival-wrapper .c-container {
    /*border: 1px solid red;*/
}
@media only screen and (min-width: 1500px) {
    .teerival-wrapper .c-container {
        max-width: 1440px;
        padding: 0;
    }
}
@media only screen and (min-width: 576px) and (max-width: 991px) {
    .teerival-wrapper .c-container {
        max-width: 90%;
    }
}
.teerival-wrapper .teefont-regular {
    font-family: "Google Sans Regular", sans-serif;
    font-weight: normal;
}
.teerival-wrapper .teefont-medium {
    font-family: "Google Sans Medium", sans-serif;
    font-weight: 500;
}
.teerival-wrapper .teefont-bold {
    font-family: "Google Sans Bold", sans-serif;
    font-weight: bold;
}
.teerival-wrapper .teefont-16 {
    font-size: 16px;
    line-height: 26px;
}
.teerival-wrapper .teefont-18 {
    font-size: 18px;
    line-height: 28px;
}
@media screen and (max-width: 767px) {
    .teerival-wrapper .teefont-18 {
        font-size: 16px;
        line-height: 26px;
    }
}
.teerival-wrapper .teefont-20 {
    font-size: 20px;
    line-height: 28px;
}
@media screen and (max-width: 767px) {
    .teerival-wrapper .teefont-20 {
        font-size: 18px;
        line-height: 28px;
    }
}
.teerival-wrapper .teefont-22 {
    font-size: 22px;
    line-height: 30px;
}
@media screen and (max-width: 1499px) {
    .teerival-wrapper .teefont-22 {
        font-size: 20px;
        line-height: 28px;
    }
}
@media screen and (max-width: 1199px) {
    .teerival-wrapper .teefont-22 {
        font-size: 18px;
        line-height: 28px;
    }
}
.teerival-wrapper .teefont-24 {
    font-size: 24px;
    line-height: 30px;
}
@media screen and (max-width: 1499px) {
    .teerival-wrapper .teefont-24 {
        font-size: 22px;
        line-height: 28px;
    }
}
@media screen and (max-width: 1199px) {
    .teerival-wrapper .teefont-24 {
        font-size: 20px;
        line-height: 28px;
    }
}
.teerival-wrapper .teefont-32 {
    font-size: 32px;
    line-height: 35px;
}
@media screen and (max-width: 1499px) {
    .teerival-wrapper .teefont-32 {
        font-size: 22px;
        line-height: 30px;
    }
}
.teerival-wrapper .teefont-48 {
    font-size: 48px;
    line-height: 50px;
    letter-spacing: -2px;
}
@media screen and (max-width: 1600px) {
    .teerival-wrapper .teefont-48 {
        font-size: 42px;
        line-height: 46px;
        letter-spacing: 0;
    }
}
@media screen and (max-width: 1199px) {
    .teerival-wrapper .teefont-48 {
        font-size: 38px;
        line-height: 42px;
        letter-spacing: 0;
    }
}
@media screen and (max-width: 767px) {
    .teerival-wrapper .teefont-48 {
        font-size: 32px;
        line-height: 36px;
        letter-spacing: 0;
    }
}
.teerival-wrapper .teefont-52 {
    font-size: 52px;
    line-height: 58px;
    letter-spacing: -2px;
}
@media screen and (max-width: 767px) {
    .teerival-wrapper .teefont-52 {
        font-size: 32px;
        line-height: 35px;
        letter-spacing: -1px;
    }
}
.teerival-wrapper .teefont-68 {
    font-size: 64px;
    line-height: 76px;
    letter-spacing: -2px;
}
@media screen and (max-width: 1600px) {
    .teerival-wrapper .teefont-68 {
        font-size: 60px;
        line-height: 68px;
        letter-spacing: -1.5px;
    }
}
@media screen and (max-width: 1199px) {
    .teerival-wrapper .teefont-68 {
        font-size: 50px;
        line-height: 56px;
        letter-spacing: -1.5px;
    }
}
@media screen and (max-width: 991px) {
    .teerival-wrapper .teefont-68 {
        font-size: 40px;
        line-height: 46px;
        letter-spacing: -1.5px;
    }
}
@media screen and (max-width: 575px) {
    .teerival-wrapper .teefont-68 {
        font-size: 36px;
        line-height: 44px;
        letter-spacing: -1.2px;
    }
}
.teerival-wrapper .teeblue {
    color: var(--teeblue);
}
.teerival-wrapper .teedarkblue {
    color: var(--teedarkblue);
}
.teerival-wrapper .teebg-blue {
    background-color: var(--teeblue);
}
.teerival-wrapper .teebg-white {
    background-color: var(--teewhite);
}
.teerival-wrapper .teeblack {
    color: var(--teeblack);
}
.teerival-wrapper .teebg-purple {
    background-color: var(--teelightpurple);
}
.teerival-wrapper .teelightblue {
    color: var(--teelightblue);
}
.teerival-wrapper .teeskyblue {
    color: var(--teeskyblue);
}
.teerival-wrapper .teebg-skyblue {
    background-color: var(--teeskyblue);
}
.teerival-wrapper .teebg-lightblue {
    background-color: var(--teelightblue);
}
.teerival-wrapper .teegray {
    color: var(--teegray);
}
.teerival-wrapper .teewhite {
    color: var(--teewhite);
}
.teerival-wrapper .teeopa-70 {
    opacity: 0.7;
}
.teerival-wrapper .teeopa-60 {
    opacity: 0.6;
}
.teerival-wrapper .cs-tr-ptb-100 {
    padding-top: 100px;
    padding-bottom: 100px;
}
@media only screen and (min-width: 1366px) and (max-width: 1600px) {
    .teerival-wrapper .cs-tr-ptb-100 {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .teerival-wrapper .cs-tr-ptb-100 {
        padding-top: 70px;
        padding-bottom: 70px;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .cs-tr-ptb-100 {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .cs-tr-ptb-100 {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}
.teerival-wrapper img {
    image-rendering: smooth;
}
.teerival-wrapper .section-teerival-banner {
    position: relative;
}
.teerival-wrapper .section-teerival-banner .banner-small-text {
    color: #222222;
}
.teerival-wrapper .section-teerival-banner .banner-heading {
    color: #222222;
}
.teerival-wrapper .section-teerival-banner .three-border {
    display: flex;
    align-items: center;
}
.teerival-wrapper .section-teerival-banner .video-container-main {
    margin-top: 50px;
}
@media only screen and (max-width: 1600px) {
    .teerival-wrapper .section-teerival-banner .video-container-main {
        margin-top: 20px;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-teerival-banner .video-container-main {
        margin-top: 20px;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-teerival-banner .video-container-main {
        margin-top: 10px;
    }
}
.teerival-wrapper .section-teerival-banner .video-container {
    position: relative;
    overflow: hidden;
    padding: 0;
    height: 100%;
    line-height: 0;
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-teerival-banner .video-container {
        margin: 0;
    }
}
.teerival-wrapper .section-teerival-banner .video-container .video {
    height: 100%;
    width: 100%;
    border-radius: 80px;
}
@media only screen and (max-width: 1600px) {
    .teerival-wrapper .section-teerival-banner .video-container .video {
        border-radius: 60px;
    }
}
@media only screen and (max-width: 1365px) {
    .teerival-wrapper .section-teerival-banner .video-container .video {
        border-radius: 40px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-teerival-banner .video-container .video {
        border-radius: 20px;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-teerival-banner .video-container .video {
        border-radius: 10px;
    }
}
.teerival-wrapper .section-teerival-banner .video-container .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.05);
    opacity: 1;
    transition: opacity 0.3s ease;
    border-radius: 80px;
    cursor: pointer;
}
@media only screen and (max-width: 1600px) {
    .teerival-wrapper .section-teerival-banner .video-container .video-overlay {
        border-radius: 60px;
    }
}
@media only screen and (max-width: 1365px) {
    .teerival-wrapper .section-teerival-banner .video-container .video-overlay {
        border-radius: 40px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-teerival-banner .video-container .video-overlay {
        border-radius: 20px;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-teerival-banner .video-container .video-overlay {
        border-radius: 10px;
    }
}
.teerival-wrapper .section-teerival-banner .video-container .icon {
    color: white;
    transition: opacity 0.3s ease;
    cursor: pointer;
    width: 100px;
    height: 100px;
}
@media only screen and (max-width: 1600px) {
    .teerival-wrapper .section-teerival-banner .video-container .icon {
        width: 90px;
        height: 90px;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-teerival-banner .video-container .icon {
        width: 80px;
        height: 80px;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-teerival-banner .video-container .icon {
        width: 50px;
        height: 50px;
    }
}
.teerival-wrapper .section-teerival-banner .cs-tr-tntroduction-main {
    padding: 80px 0 0;
}
@media only screen and (max-width: 1600px) {
    .teerival-wrapper .section-teerival-banner .cs-tr-tntroduction-main {
        padding: 60px 0 0;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-teerival-banner .cs-tr-tntroduction-main {
        padding: 40px 0 0;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-teerival-banner .cs-tr-tntroduction-main {
        padding: 30px 0 0;
    }
}
.teerival-wrapper .section-teerival-banner:before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50%;
    border-radius: 99em 99em 0 0;
    background-color: #311f3f;
    z-index: 0;
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-teerival-banner:before {
        border-radius: 0;
        height: 55vh;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-teerival-banner:before {
        border-radius: 0;
        height: 60vh;
    }
}
@media only screen and (max-width: 375px) {
    .teerival-wrapper .section-teerival-banner:before {
        height: 70vh;
    }
}
.teerival-wrapper .section-teerival-banner-two {
    position: relative;
    background: #311f3f url("../img/case-study-details/teerival/introduction-bg.svg");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
    padding-bottom: 210px;
    border-radius: 0 0 60px 60px;
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
    .teerival-wrapper .section-teerival-banner-two {
        padding-bottom: 150px;
    }
}
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
    .teerival-wrapper .section-teerival-banner-two {
        border-radius: 0 0 40px 40px;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-teerival-banner-two {
        padding-bottom: 40px;
        border-radius: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-teerival-banner-two {
        padding-bottom: 40px;
        border-radius: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
}

@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-teerival-banner-two .introduction-in .intro-title {
        opacity: 1 !important;
    }
}

.teerival-wrapper .section-teerival-banner-two .introduction-in .intro-card {
    background-color: #fff;
    padding: 30px;
    border-radius: 30px;
    position: absolute;
    top: 80px;
    width: 100%;
    z-index: 0;
}
.teerival-wrapper .section-teerival-banner-two .introduction-in .intro-card .introduction-logo {
    width: 247px;
    aspect-ratio: auto 247 / 60;
    height: auto;
}
.teerival-wrapper .section-teerival-banner-two .introduction-in .intro-card .introduction-illustrator {
    width: 257px;
    aspect-ratio: auto 257 / 257;
    height: auto;
}
.teerival-wrapper .section-teerival-banner-two .introduction-other {
    display: flex;
    gap: 30px;
    justify-content: end;
    top: 30px;
    right: 0;
    z-index: 1;
    position: relative;
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-teerival-banner-two .introduction-other {
        gap: 20px;
        margin-top: 30px;
        top: 0;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-teerival-banner-two .introduction-other {
        margin-top: 30px;
        display: block;
        gap: 0;
        top: 0;
    }
}
.teerival-wrapper .section-teerival-banner-two .introduction-other .challenges {
    border-radius: 30px;
    border: 8px solid var(--teeblue);
    width: 510px;
    background-color: #ddf9ff;
    padding: 30px;
    position: relative;
}
@media only screen and (max-width: 1600px) {
    .teerival-wrapper .section-teerival-banner-two .introduction-other .challenges {
        width: 450px;
        padding: 30px;
    }
}
@media only screen and (max-width: 1400px) {
    .teerival-wrapper .section-teerival-banner-two .introduction-other .challenges {
        width: 390px;
        padding: 20px;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-teerival-banner-two .introduction-other .challenges {
        width: 50%;
        padding: 20px;
        border-radius: 15px;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-teerival-banner-two .introduction-other .challenges {
        width: 100%;
        padding: 20px;
        border: 4px solid var(--teeblue);
        border-radius: 15px;
    }
}
.teerival-wrapper .section-teerival-banner-two .introduction-other .challenges:nth-child(1) {
    margin-top: 90px;
    background-color: #ddf9ff;
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-teerival-banner-two .introduction-other .challenges:nth-child(1) {
        margin-top: 0;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-teerival-banner-two .introduction-other .challenges:nth-child(1) {
        margin-top: 0;
        margin-bottom: 30px;
    }
}
.teerival-wrapper .section-teerival-banner-two .introduction-other .challenges:nth-child(1) .intro-title {
    color: #a1d2de;
}
.teerival-wrapper .section-teerival-banner-two .introduction-other .challenges:nth-child(2) {
    margin-top: -110px;
    background-color: #ddd6f9;
    height: max-content;
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-teerival-banner-two .introduction-other .challenges:nth-child(2) {
        margin-top: 0;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-teerival-banner-two .introduction-other .challenges:nth-child(2) {
        margin-top: 0;
    }
}
.teerival-wrapper .section-teerival-banner-two .introduction-other .challenges:nth-child(2) .intro-title {
    color: #b5aae1;
}
.teerival-wrapper .section-teerival-banner-two .introduction-other .challenges .impact-right .intro-title {
    position: absolute;
    transform: rotate(-90deg);
    left: -90px;
    top: 100px;
    width: 230px;
    display: flex;
    justify-content: end;
}
@media only screen and (max-width: 1600px) {
    .teerival-wrapper .section-teerival-banner-two .introduction-other .challenges .impact-right .intro-title {
        left: -100px;
    }
}
@media only screen and (max-width: 1400px) {
    .teerival-wrapper .section-teerival-banner-two .introduction-other .challenges .impact-right .intro-title {
        position: inherit;
        left: 0;
        top: 33px;
        bottom: auto;
        position: absolute;
        transform: initial;
        justify-content: start;
        width: auto;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-teerival-banner-two .introduction-other .challenges .impact-right .intro-title {
        position: inherit;
        left: 0;
        top: 33px;
        bottom: auto;
        position: absolute;
        transform: initial;
    }
}
.teerival-wrapper .section-teerival-banner-two .introduction-other .challenges .impact-right .intro-icon {
    margin-bottom: 30px;
    margin-left: auto;
    display: table;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .teerival-wrapper .section-teerival-banner-two .introduction-other .challenges .impact-right .intro-icon img {
        width: 70px;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-teerival-banner-two .introduction-other .challenges .impact-right .intro-icon {
        margin-bottom: 0;
    }
}
.teerival-wrapper .section-teerival-banner-two .introduction-other .challenges .impact-right .intro-collapse {
    width: 330px;
    margin-left: auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
    .teerival-wrapper .section-teerival-banner-two .introduction-other .challenges .impact-right .intro-collapse {
        width: 290px;
    }
}
@media only screen and (max-width: 1400px) {
    .teerival-wrapper .section-teerival-banner-two .introduction-other .challenges .impact-right .intro-collapse {
        width: 100%;
    }
}
.teerival-wrapper
    .section-teerival-banner-two
    .introduction-other
    .challenges
    .impact-right
    .intro-collapse
    .accordion
    .accordion-item {
    border: none;
    border-bottom: 1px dashed var(--teegray);
    background-color: transparent;
    border-radius: 0;
}
.teerival-wrapper
    .section-teerival-banner-two
    .introduction-other
    .challenges
    .impact-right
    .intro-collapse
    .accordion
    .accordion-item:last-child {
    border-bottom: none;
}
.teerival-wrapper
    .section-teerival-banner-two
    .introduction-other
    .challenges
    .impact-right
    .intro-collapse
    .accordion
    .accordion-item
    .accordion-header {
    border: none;
}
.teerival-wrapper
    .section-teerival-banner-two
    .introduction-other
    .challenges
    .impact-right
    .intro-collapse
    .accordion
    .accordion-item
    .accordion-header
    .accordion-button {
    background-color: transparent;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
    padding: 1.1rem 0 0.9rem;
}
.teerival-wrapper
    .section-teerival-banner-two
    .introduction-other
    .challenges
    .impact-right
    .intro-collapse
    .accordion
    .accordion-item
    .accordion-header
    .accordion-button:after {
    content: none;
}
.teerival-wrapper
    .section-teerival-banner-two
    .introduction-other
    .challenges
    .impact-right
    .intro-collapse
    .accordion
    .accordion-item
    .accordion-header
    .accordion-button:not(.collapsed) {
    color: var(--teeblue);
}
.teerival-wrapper
    .section-teerival-banner-two
    .introduction-other
    .challenges
    .impact-right
    .intro-collapse
    .accordion
    .accordion-item
    .accordion-body {
    padding: 0 0 0.8rem 0;
}
.teerival-wrapper .section-approach {
    background-color: var(--teelightpurple);
    position: relative;
}
.teerival-wrapper .section-approach .cs-heading-main {
    z-index: 1;
}
.teerival-wrapper .section-approach .approach-main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 934px;
    margin: 70px auto 85px;
    z-index: 3;
    position: relative;
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-approach .approach-main {
        margin: 50px auto 50px;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-approach .approach-main {
        justify-content: center;
        gap: 30px;
    }
}
@media only screen and (max-width: 575px) {
    .teerival-wrapper .section-approach .approach-main {
        margin: 35px auto 35px;
    }
}
@media only screen and (max-width: 480px) {
    .teerival-wrapper .section-approach .approach-main {
        justify-content: start;
        flex-wrap: nowrap;
        overflow: hidden;
        overflow-x: scroll;
    }
}
@media only screen and (max-width: 480px) {
    .teerival-wrapper .section-approach .approach-main::-webkit-scrollbar {
        height: 8px;
    }
}
@media only screen and (max-width: 480px) {
    .teerival-wrapper .section-approach .approach-main::-webkit-scrollbar-thumb {
        background-color: #ccc;
        /* Customize scrollbar color */
        border-radius: 4px;
    }
}
@media only screen and (max-width: 480px) {
    .teerival-wrapper .section-approach .approach-main::-webkit-scrollbar-track {
        background-color: #f1f1f1;
        /* Customize scrollbar track color */
    }
}
.teerival-wrapper .section-approach .approach-screens {
    width: calc(50% - 45px);
    margin-bottom: 100px;
    position: relative;
    z-index: 1;
}
@media only screen and (max-width: 1365px) {
    .teerival-wrapper .section-approach .approach-screens {
        margin-bottom: 70px;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-approach .approach-screens {
        margin-bottom: 50px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-approach .approach-screens {
        margin-bottom: 0;
    }
}
@media only screen and (max-width: 480px) {
    .teerival-wrapper .section-approach .approach-screens {
        width: 100%;
        min-width: 80%;
        margin: 0 0 8px;
    }
}
.teerival-wrapper .section-approach .approach-screens:nth-child(2) {
    margin-top: 225px;
}
@media only screen and (max-width: 1365px) {
    .teerival-wrapper .section-approach .approach-screens:nth-child(2) {
        margin-top: 150px;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-approach .approach-screens:nth-child(2) {
        margin-top: 100px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-approach .approach-screens:nth-child(2) {
        margin-top: 0;
    }
}
.teerival-wrapper .section-approach .approches-inner {
    display: flex;
    justify-content: space-between;
    gap: 50px;
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-approach .approches-inner {
        flex-direction: column;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-approach .approches-inner {
        gap: 35px;
    }
}
.teerival-wrapper .section-approach .approches-inner .services {
    background-color: #ddd6f9;
    border-radius: 40px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 80px;
    width: calc(50%);
    justify-content: space-between;
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-approach .approches-inner .services {
        width: 100%;
        padding: 30px;
        gap: 50px;
        border-radius: 30px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-approach .approches-inner .services {
        padding: 20px;
        gap: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-approach .approches-inner .services {
        border-radius: 15px;
    }
}
@media only screen and (max-width: 375px) {
    .teerival-wrapper .section-approach .approches-inner .services .tech-services {
        flex-wrap: nowrap;
        overflow: hidden;
        overflow-x: scroll;
        display: flex;
        white-space: nowrap;
    }
}
.teerival-wrapper .section-approach .approches-inner .services .tech-services li {
    padding: 12px 20px;
    display: inline-block;
    background-color: #fff;
    margin: 0 15px 15px 0;
    border: 1px solid #eeeeee;
    border-radius: 30px;
}

@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-approach .approches-inner .services .tech-services li {
        padding: 10px 18px;
        font-size: 18px;
        line-height: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-approach .approches-inner .services .tech-services li {
        padding: 8px 14px;
        font-size: 16px;
        line-height: 28px;
    }
}
@media only screen and (max-width: 375px) {
    .teerival-wrapper .section-approach .approches-inner .services .tech-services li {
        margin: 0 15px 8px 0;
    }
}
.teerival-wrapper .section-approach .approches-inner .services .tech-services li a {
    text-decoration: none;
    color: #311f3f;
}
@media only screen and (max-width: 375px) {
    .teerival-wrapper .section-approach .approches-inner .services .tech-services li:last-child {
        margin: 0 0px 8px 0;
    }
}
@media only screen and (max-width: 375px) {
    .teerival-wrapper .section-approach .approches-inner .services .tech-services::-webkit-scrollbar {
        height: 8px;
    }
}
@media only screen and (max-width: 375px) {
    .teerival-wrapper .section-approach .approches-inner .services .tech-services::-webkit-scrollbar-thumb {
        background-color: #ccc;
        /* Customize scrollbar color */
        border-radius: 4px;
    }
}
@media only screen and (max-width: 375px) {
    .teerival-wrapper .section-approach .approches-inner .services .tech-services::-webkit-scrollbar-track {
        background-color: #f1f1f1;
        /* Customize scrollbar track color */
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-approach .approches-inner .services .tech-stack {
        flex-wrap: nowrap !important;
        overflow: hidden;
        overflow-x: scroll;
    }
}
.teerival-wrapper .section-approach .approches-inner .services .tech-stack li {
    height: 180px;
    width: 180px;
    display: inline-flex;
    background-color: #fff;
    margin: 15px 15px 0 0;
    border: 1px solid #eeeeee;
    border-radius: 30px;
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-approach .approches-inner .services .tech-stack li {
        width: 150px;
        height: 150px;
        margin-top: 0;
        border-radius: 20px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-approach .approches-inner .services .tech-stack li {
        width: 100%;
        min-width: 33.33%;
        margin: 0 15px 8px 0;
        border-radius: 10px;
    }
}
@media only screen and (max-width: 480px) {
    .teerival-wrapper .section-approach .approches-inner .services .tech-stack li {
        min-width: 60%;
    }
}
@media only screen and (max-width: 375px) {
    .teerival-wrapper .section-approach .approches-inner .services .tech-stack li {
        min-width: 80%;
    }
}
.teerival-wrapper .section-approach .approches-inner .services .tech-stack li .tech-wrap {
    text-decoration: none;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.teerival-wrapper .section-approach .approches-inner .services .tech-stack li .tech-wrap span {
    display: block;
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-approach .approches-inner .services .tech-stack li .tech-wrap span img {
        max-width: 80%;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-approach .approches-inner .services .tech-stack li:last-child {
        margin-right: 0;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-approach .approches-inner .services .tech-stack::-webkit-scrollbar {
        height: 8px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-approach .approches-inner .services .tech-stack::-webkit-scrollbar-thumb {
        background-color: #ccc;
        /* Customize scrollbar color */
        border-radius: 4px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-approach .approches-inner .services .tech-stack::-webkit-scrollbar-track {
        background-color: #f1f1f1;
        /* Customize scrollbar track color */
    }
}
.teerival-wrapper .section-approach .approch-bg-effect {
    background-color: #fff;
    border-radius: 80px;
    position: absolute;
    width: 100%;
    height: 43.5vw;
    top: 20px;
}
@media only screen and (max-width: 1599px) {
    .teerival-wrapper .section-approach .approch-bg-effect {
        border-radius: 60px;
    }
}
@media only screen and (max-width: 1365px) {
    .teerival-wrapper .section-approach .approch-bg-effect {
        border-radius: 40px;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-approach .approch-bg-effect {
        border-radius: 0;
        top: 0;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-approach .approch-bg-effect {
        background-color: transparent;
    }
}
.teerival-wrapper .section-approach .approch-bg-effect:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -115px;
    z-index: 0;
    width: 100%;
    background: url("../img/case-study-details/teerival/approach-lines.svg") no-repeat bottom;
    background-size: cover;
    height: 599px;
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-approach .approch-bg-effect:after {
        display: none;
    }
}
.teerival-wrapper .section-process {
    background-color: #fff;
    border-radius: 50px 50px 0 0;
}
@media only screen and (max-width: 1365px) {
    .teerival-wrapper .section-process {
        border-radius: 40px 40px 0 0;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-process {
        border-radius: 0;
    }
}
.teerival-wrapper .section-process .process-main {
    display: flex;
    justify-content: space-between;
    margin-top: 80px;
}
@media only screen and (max-width: 1600px) {
    .teerival-wrapper .section-process .process-main {
        margin-top: 60px;
    }
}
@media only screen and (max-width: 1366px) {
    .teerival-wrapper .section-process .process-main {
        margin-top: 50px;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-process .process-main {
        margin-top: 35px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-process .process-main {
        margin-top: 25px;
        flex-direction: row;
        overflow-x: auto;
        white-space: nowrap;
        margin-bottom: 10px;
    }
}
.teerival-wrapper .section-process .process-main .process-steps {
    padding: 80px;
    border-radius: 80px;
    width: 100%;
}
@media only screen and (max-width: 1500px) {
    .teerival-wrapper .section-process .process-main .process-steps {
        border-radius: 40px;
        padding: 40px;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-process .process-main .process-steps {
        border-radius: 20px;
        padding: 30px;
        margin-bottom: 10px;
        min-width: 220px;
        margin-right: 15px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-process .process-main .process-steps {
        border-radius: 10px;
        padding: 20px;
    }
}
.teerival-wrapper .section-process .process-main .process-steps:last-child {
    margin-right: 0;
}
.teerival-wrapper .section-process .process-main .process-steps ul li {
    padding: 8px 0;
}
.teerival-wrapper .section-process .process-main .process-steps:nth-child(even) {
    background-color: #ddd6f9;
}
.teerival-wrapper .section-process .process-main .process-steps:nth-child(odd) {
    background-color: var(--teelightpurple);
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-process .process-main::-webkit-scrollbar {
        height: 8px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-process .process-main::-webkit-scrollbar-thumb {
        background-color: #ccc;
        /* Customize scrollbar color */
        border-radius: 4px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-process .process-main::-webkit-scrollbar-track {
        background-color: #f1f1f1;
        /* Customize scrollbar track color */
    }
}
.teerival-wrapper .section-teerival-objective {
    background: var(--teelightblue) url("../img/case-study-details/teerival/objective-bg.svg") no-repeat center top;
    background-size: cover;
}
.teerival-wrapper .section-teerival-objective .teerival-objective-main {
    width: calc(100% - 120px);
    margin: auto;
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-teerival-objective .teerival-objective-main {
        width: calc(100% - 70px);
    }
}
@media only screen and (max-width: 575px) {
    .teerival-wrapper .section-teerival-objective .teerival-objective-main {
        width: calc(100% - 30px);
    }
}
.teerival-wrapper .section-teerival-objective .objective-points {
    background-color: #25adcc;
    border-radius: 30px;
    padding: 40px;
    max-width: 1280px;
    margin: 0 auto;
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-teerival-objective .objective-points {
        padding: 30px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-teerival-objective .objective-points {
        padding: 20px;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-teerival-objective .objective-points {
        border-radius: 15px;
    }
}
.teerival-wrapper .section-teerival-objective .objective-points .objective-title {
    display: flex;
    align-items: center;
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-teerival-objective .objective-points .objective-title {
        flex-wrap: wrap;
    }
}
.teerival-wrapper .section-teerival-objective .objective-points .objective-title .objective-heading {
    width: max-content;
    padding-right: 40px;
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-teerival-objective .objective-points .objective-title .objective-heading {
        padding-right: 0;
    }
}
.teerival-wrapper .section-teerival-objective .objective-points .objective-title ul {
    display: flex;
    text-align: left;
    gap: 40px;
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-teerival-objective .objective-points .objective-title ul {
        gap: 30px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-teerival-objective .objective-points .objective-title ul {
        margin-top: 20px;
        flex-wrap: wrap;
        gap: 5px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-teerival-objective .objective-points .objective-title ul li {
        width: 100%;
        padding-left: 12px;
        position: relative;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-teerival-objective .objective-points .objective-title ul li:before {
        content: "";
        position: absolute;
        left: 0;
        top: 10px;
        width: 5px;
        height: 5px;
        border-radius: 99em;
        background-color: var(--teeblue);
    }
}
.teerival-wrapper .section-teerival-objective .objective-screen-main {
    position: relative;
}
.teerival-wrapper .section-teerival-objective .objective-screen-main:before,
.teerival-wrapper .section-teerival-objective .objective-screen-main:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    max-width: 1440px;
    margin: 0 auto;
    border-radius: 0 0 80px 80px;
    height: 70px;
    z-index: 1;
    background-color: #301347;
}
@media only screen and (max-width: 1599px) {
    .teerival-wrapper .section-teerival-objective .objective-screen-main:before,
    .teerival-wrapper .section-teerival-objective .objective-screen-main:after {
        border-radius: 0 0 60px 60px;
    }
}
@media only screen and (max-width: 1365px) {
    .teerival-wrapper .section-teerival-objective .objective-screen-main:before,
    .teerival-wrapper .section-teerival-objective .objective-screen-main:after {
        border-radius: 0 0 40px 40px;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-teerival-objective .objective-screen-main:before,
    .teerival-wrapper .section-teerival-objective .objective-screen-main:after {
        border-radius: 0 0 30px 30px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-teerival-objective .objective-screen-main:before,
    .teerival-wrapper .section-teerival-objective .objective-screen-main:after {
        height: 50px;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-teerival-objective .objective-screen-main:before,
    .teerival-wrapper .section-teerival-objective .objective-screen-main:after {
        border-radius: 0 0 15px 15px;
    }
}
@media only screen and (max-width: 575px) {
    .teerival-wrapper .section-teerival-objective .objective-screen-main:before,
    .teerival-wrapper .section-teerival-objective .objective-screen-main:after {
        height: 40px;
    }
}
.teerival-wrapper .section-teerival-objective .objective-screen-main:after {
    top: auto;
    bottom: 0;
    border-radius: 80px 80px 0 0;
    background-color: #301347;
}
@media only screen and (max-width: 1599px) {
    .teerival-wrapper .section-teerival-objective .objective-screen-main:after {
        border-radius: 60px 60px 0 0;
    }
}
@media only screen and (max-width: 1365px) {
    .teerival-wrapper .section-teerival-objective .objective-screen-main:after {
        border-radius: 40px 40px 0 0;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-teerival-objective .objective-screen-main:after {
        border-radius: 30px 30px 0 0;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-teerival-objective .objective-screen-main:after {
        border-radius: 15px 15px 0 0;
    }
}
.teerival-wrapper .section-teerival-objective .objective-screen-main .objective-screen {
    border-radius: 60px;
    margin: 0 auto;
}
.teerival-wrapper .section-teerival-objective .objective-content {
    max-width: 1280px;
    margin: 0 auto;
}
.teerival-wrapper .section-teerival-objective .objective-content .obj-tab-wrapper ul.object {
    max-width: 380px;
    background-color: #fff;
    border-radius: 40px;
    padding: 48px 39px;
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-teerival-objective .objective-content .obj-tab-wrapper ul.object {
        padding: 30px;
        border-radius: 30px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-teerival-objective .objective-content .obj-tab-wrapper ul.object {
        max-width: none;
        white-space: nowrap;
        overflow: hidden;
        overflow-x: scroll;
        padding: 0;
        background-color: transparent;
        border-radius: 0;
    }
}
.teerival-wrapper .section-teerival-objective .objective-content .obj-tab-wrapper ul.object li {
    margin-bottom: 25px;
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-teerival-objective .objective-content .obj-tab-wrapper ul.object li {
        margin: 0 15px 8px 0;
        padding: 8px 16px;
        background-color: var(--teewhite);
        border-radius: 15px;
    }
}
@media only screen and (max-width: 575px) {
    .teerival-wrapper .section-teerival-objective .objective-content .obj-tab-wrapper ul.object li {
        padding: 6px 16px;
        border-radius: 10px;
    }
}
@media only screen and (max-width: 375px) {
    .teerival-wrapper .section-teerival-objective .objective-content .obj-tab-wrapper ul.object li {
        padding: 4px 16px;
    }
}
.teerival-wrapper .section-teerival-objective .objective-content .obj-tab-wrapper ul.object li .nav-link {
    width: 100%;
    border: none;
    text-align: left;
    border-radius: 0;
    opacity: 0.7;
    padding: 6px 0;
}

@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-teerival-objective .objective-content .obj-tab-wrapper ul.object li .nav-link {
        font-size: 18px;
        line-height: 28px;
    }
}
@media only screen and (max-width: 575px) {
    .teerival-wrapper .section-teerival-objective .objective-content .obj-tab-wrapper ul.object li .nav-link {
        font-size: 16px;
        line-height: 28px;
    }
}

.teerival-wrapper .section-teerival-objective .objective-content .obj-tab-wrapper ul.object li .nav-link.active {
    color: var(--teeskyblue);
    font-size: 32px;
    line-height: 35px;
    opacity: 1;
}
@media only screen and (max-width: 1499px) {
    .teerival-wrapper .section-teerival-objective .objective-content .obj-tab-wrapper ul.object li .nav-link.active {
        font-size: 22px;
        line-height: 28px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-teerival-objective .objective-content .obj-tab-wrapper ul.object li .nav-link.active {
        font-size: 18px;
        line-height: 28px;
    }
}
@media only screen and (max-width: 575px) {
    .teerival-wrapper .section-teerival-objective .objective-content .obj-tab-wrapper ul.object li .nav-link.active {
        font-size: 16px;
        line-height: 28px;
    }
}
.teerival-wrapper .section-teerival-objective .objective-content .obj-tab-wrapper ul.object li .nav-link:hover,
.teerival-wrapper .section-teerival-objective .objective-content .obj-tab-wrapper ul.object li .nav-link:focus {
    color: var(--teeskyblue);
    opacity: 1;
    outline: none;
}
.teerival-wrapper .section-teerival-objective .objective-content .obj-tab-wrapper ul.object li:last-child {
    margin-bottom: 0;
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-teerival-objective .objective-content .obj-tab-wrapper ul.object li:last-child {
        margin: 0 0 8px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-teerival-objective .objective-content .obj-tab-wrapper ul.object::-webkit-scrollbar {
        height: 8px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper
        .section-teerival-objective
        .objective-content
        .obj-tab-wrapper
        ul.object::-webkit-scrollbar-thumb {
        background-color: #ccc;
        /* Customize scrollbar color */
        border-radius: 4px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper
        .section-teerival-objective
        .objective-content
        .obj-tab-wrapper
        ul.object::-webkit-scrollbar-track {
        background-color: #f1f1f1;
        /* Customize scrollbar track color */
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-teerival-objective .objective-content .obj-tab-wrapper .tab-content {
        padding-left: 15px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-teerival-objective .objective-content .obj-tab-wrapper .tab-content {
        padding-left: 0;
    }
}
.teerival-wrapper .section-teerival-objective .objective-content .obj-tab-wrapper .obj-lists {
    max-width: 820px;
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-teerival-objective .objective-content .obj-tab-wrapper .obj-lists {
        max-width: none;
        margin-top: 30px;
    }
}
.teerival-wrapper .section-teerival-objective .objective-content .obj-tab-wrapper .obj-lists ul li {
    display: flex;
    text-align: left;
    gap: 12px;
    margin: 0 0 45px;
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-teerival-objective .objective-content .obj-tab-wrapper .obj-lists ul li {
        margin: 0 0 25px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-teerival-objective .objective-content .obj-tab-wrapper .obj-lists ul li {
        margin: 0 0 15px;
    }
}
.teerival-wrapper .section-teerival-objective .objective-content .obj-tab-wrapper .obj-lists ul li .icon-wrap {
    flex: 0 0 auto;
    margin-top: 2px;
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-teerival-objective .objective-content .obj-tab-wrapper .obj-lists ul li .icon-wrap {
        margin-top: 4px;
    }
}
.teerival-wrapper .section-teerival-objective .objective-content .obj-tab-wrapper .obj-lists ul li .short-wrap {
    margin-top: 6px;
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-teerival-objective .objective-content .obj-tab-wrapper .obj-lists ul li .short-wrap {
        margin-top: 0;
    }
}
.teerival-wrapper .section-teerival-objective .objective-content .obj-tab-wrapper .obj-lists ul li:last-child {
    margin-bottom: 0;
}
.teerival-wrapper .section-competitive-analysis .competitive-data-main {
    margin-top: 80px;
    background-color: #fff;
    border-radius: 80px;
    padding: 60px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
@media only screen and (max-width: 1599px) {
    .teerival-wrapper .section-competitive-analysis .competitive-data-main {
        margin-top: 60px;
        border-radius: 60px;
    }
}
@media only screen and (max-width: 1365px) {
    .teerival-wrapper .section-competitive-analysis .competitive-data-main {
        margin-top: 50px;
        border-radius: 40px;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-competitive-analysis .competitive-data-main {
        margin-top: 35px;
        padding: 30px;
        border-radius: 30px;
        gap: 30px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-competitive-analysis .competitive-data-main {
        padding: 20px;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-competitive-analysis .competitive-data-main {
        border-radius: 15px;
    }
}
.teerival-wrapper .section-competitive-analysis .competitive-data-main .comp-outer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-competitive-analysis .competitive-data-main .comp-outer {
        gap: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-competitive-analysis .competitive-data-main .comp-outer {
        flex-wrap: nowrap;
        overflow: hidden;
        overflow-x: scroll;
    }
}
.teerival-wrapper .section-competitive-analysis .competitive-data-main .comp-outer .competitive-analysis-data {
    width: 25%;
    box-sizing: border-box;
    margin-bottom: 80px;
    max-width: 220px;
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-competitive-analysis .competitive-data-main .comp-outer .competitive-analysis-data {
        width: calc(50% - 30px);
        max-width: none;
        margin: 0;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-competitive-analysis .competitive-data-main .comp-outer .competitive-analysis-data {
        width: 100%;
        min-width: 80%;
        padding-bottom: 15px;
        margin: 0;
        border-right: 1px solid rgba(37, 24, 47, 0.04);
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper
        .section-competitive-analysis
        .competitive-data-main
        .comp-outer
        .competitive-analysis-data:last-child {
        border-right: none;
    }
}
.teerival-wrapper
    .section-competitive-analysis
    .competitive-data-main
    .comp-outer
    .competitive-analysis-data
    .analysis-data {
    margin-top: 25px;
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper
        .section-competitive-analysis
        .competitive-data-main
        .comp-outer
        .competitive-analysis-data
        .analysis-data {
        margin-top: 20px;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper
        .section-competitive-analysis
        .competitive-data-main
        .comp-outer
        .competitive-analysis-data
        .analysis-data {
        margin-top: 15px;
    }
}
.teerival-wrapper
    .section-competitive-analysis
    .competitive-data-main
    .comp-outer
    .competitive-analysis-data:nth-child(4) {
    border-bottom: none;
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper
        .section-competitive-analysis
        .competitive-data-main
        .comp-outer
        .competitive-analysis-data:nth-child(4) {
        border-bottom: none;
        padding-bottom: 0;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-competitive-analysis .competitive-data-main .comp-outer::-webkit-scrollbar {
        height: 8px;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-competitive-analysis .competitive-data-main .comp-outer::-webkit-scrollbar-thumb {
        background-color: #ccc;
        /* Customize scrollbar color */
        border-radius: 4px;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-competitive-analysis .competitive-data-main .comp-outer::-webkit-scrollbar-track {
        background-color: #f1f1f1;
        /* Customize scrollbar track color */
    }
}
.teerival-wrapper .section-competitive-analysis .competitive-data-main .competitive-logo-data-main {
    padding: 60px;
    background: var(--teelightblue);
    border-radius: 60px;
    width: 100%;
}
@media only screen and (max-width: 1365px) {
    .teerival-wrapper .section-competitive-analysis .competitive-data-main .competitive-logo-data-main {
        border-radius: 40px;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-competitive-analysis .competitive-data-main .competitive-logo-data-main {
        padding: 30px;
        border-radius: 30px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-competitive-analysis .competitive-data-main .competitive-logo-data-main {
        padding: 20px;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-competitive-analysis .competitive-data-main .competitive-logo-data-main {
        border-radius: 15px;
    }
}
@media only screen and (max-width: 575px) {
    .teerival-wrapper .section-competitive-analysis .competitive-data-main .competitive-logo-data-main {
        padding: 15px;
    }
}
@media only screen and (max-width: 480px) {
    .teerival-wrapper .section-competitive-analysis .competitive-data-main .competitive-logo-data-main {
        overflow: hidden;
    }
}
.teerival-wrapper .section-competitive-analysis .competitive-data-main .competitive-logo-data-main .teerival-logo {
    margin: 0 0 40px -5px;
}
.teerival-wrapper
    .section-competitive-analysis
    .competitive-data-main
    .competitive-logo-data-main
    .competitive-analysis-data-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap:25px;
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper
        .section-competitive-analysis
        .competitive-data-main
        .competitive-logo-data-main
        .competitive-analysis-data-inner {
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
    }
}
@media only screen and (max-width: 480px) {
    .teerival-wrapper
        .section-competitive-analysis
        .competitive-data-main
        .competitive-logo-data-main
        .competitive-analysis-data-inner {
        flex-wrap: nowrap;
        overflow: hidden;
        overflow-x: scroll;
        white-space: nowrap;
        justify-content: start;
        margin-top: 15px;
        gap: 15px;
    }
}
.teerival-wrapper
    .section-competitive-analysis
    .competitive-data-main
    .competitive-logo-data-main
    .competitive-analysis-data-inner
    .analysis-data {
    box-sizing: border-box;
    line-height: 24px;
    padding: 0 0 0 32px;
    background: url("../img/case-study-details/teerival/golf-ball.svg") no-repeat left 1px;
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper
        .section-competitive-analysis
        .competitive-data-main
        .competitive-logo-data-main
        .competitive-analysis-data-inner
        .analysis-data {
        width: calc(33.33% - 15px);
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper
        .section-competitive-analysis
        .competitive-data-main
        .competitive-logo-data-main
        .competitive-analysis-data-inner
        .analysis-data {
        width: calc(50% - 15px);
    }
}
@media only screen and (max-width: 480px) {
    .teerival-wrapper
        .section-competitive-analysis
        .competitive-data-main
        .competitive-logo-data-main
        .competitive-analysis-data-inner
        .analysis-data {
        width: 100%;
        margin: 0 0 8px;
    }
}
.teerival-wrapper
    .section-competitive-analysis
    .competitive-data-main
    .competitive-logo-data-main
    .competitive-analysis-data-inner
    .analysis-data
    span {
    display: block;
}
@media only screen and (max-width: 480px) {
    .teerival-wrapper
        .section-competitive-analysis
        .competitive-data-main
        .competitive-logo-data-main
        .competitive-analysis-data-inner::-webkit-scrollbar {
        height: 8px;
    }
}
@media only screen and (max-width: 480px) {
    .teerival-wrapper
        .section-competitive-analysis
        .competitive-data-main
        .competitive-logo-data-main
        .competitive-analysis-data-inner::-webkit-scrollbar-thumb {
        background-color: #ccc;
        /* Customize scrollbar color */
        border-radius: 4px;
    }
}
@media only screen and (max-width: 480px) {
    .teerival-wrapper
        .section-competitive-analysis
        .competitive-data-main
        .competitive-logo-data-main
        .competitive-analysis-data-inner::-webkit-scrollbar-track {
        background-color: #f1f1f1;
        /* Customize scrollbar track color */
    }
}
.teerival-wrapper .section-personas .personas-main {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 100px;
    margin-top: 80px;
}
@media only screen and (max-width: 1599px) {
    .teerival-wrapper .section-personas .personas-main {
        margin-top: 60px;
    }
}
@media only screen and (max-width: 1499px) {
    .teerival-wrapper .section-personas .personas-main {
        grid-gap: 50px;
    }
}
@media only screen and (max-width: 1365px) {
    .teerival-wrapper .section-personas .personas-main {
        margin-top: 50px;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-personas .personas-main {
        display: flex;
        flex-wrap: nowrap;
        overflow: hidden;
        overflow-x: scroll;
        margin-top: 35px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-personas .personas-main {
        gap: 30px;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-personas .personas-main .personas-inner {
        width: 100%;
        min-width: 40%;
        margin: 0 0 8px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-personas .personas-main .personas-inner {
        min-width: 41%;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-personas .personas-main .personas-inner {
        min-width: 44%;
    }
}
@media only screen and (max-width: 480px) {
    .teerival-wrapper .section-personas .personas-main .personas-inner {
        min-width: 80%;
    }
}
.teerival-wrapper .section-personas .personas-main .personas-inner .personas-pic {
    display: block;
    border-radius: 120px 120px 120px 0;
}
@media only screen and (max-width: 1599px) {
    .teerival-wrapper .section-personas .personas-main .personas-inner .personas-pic {
        border-radius: 60px 60px 60px 0;
    }
}
@media only screen and (max-width: 1365px) {
    .teerival-wrapper .section-personas .personas-main .personas-inner .personas-pic {
        border-radius: 40px 40px 40px 0;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-personas .personas-main .personas-inner .personas-pic {
        border-radius: 30px 30px 30px 0;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-personas .personas-main .personas-inner .personas-pic {
        border-radius: 15px 15px 0px 0;
    }
}
@media only screen and (max-width: 375px) {
    .teerival-wrapper .section-personas .personas-main .personas-inner .personas-pic {
        border-radius: 15px 15px 0px 0;
    }
}
.teerival-wrapper .section-personas .personas-main .personas-inner .personas-about {
    display: inline-block;
    padding: 10px 30px 10px;
    border-radius: 0 0 99px 99px;
    min-width: 300px;
}
@media only screen and (max-width: 1599px) {
    .teerival-wrapper .section-personas .personas-main .personas-inner .personas-about {
        border-radius: 0 0 60px 60px;
    }
}
@media only screen and (max-width: 1499px) {
    .teerival-wrapper .section-personas .personas-main .personas-inner .personas-about {
        min-width: 250px;
    }
}
@media only screen and (max-width: 1365px) {
    .teerival-wrapper .section-personas .personas-main .personas-inner .personas-about {
        border-radius: 0 0 40px 40px;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-personas .personas-main .personas-inner .personas-about {
        border-radius: 0 0 30px 30px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-personas .personas-main .personas-inner .personas-about {
        min-width: 230px;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-personas .personas-main .personas-inner .personas-about {
        border-radius: 0 0 15px 15px;
        min-width: 100%;
        padding: 10px 30px 10px 15px;
    }
}
@media only screen and (max-width: 375px) {
    .teerival-wrapper .section-personas .personas-main .personas-inner .personas-about {
        min-width: 100%;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-personas .personas-main::-webkit-scrollbar {
        height: 8px;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-personas .personas-main::-webkit-scrollbar-thumb {
        background-color: #ccc;
        /* Customize scrollbar color */
        border-radius: 4px;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-personas .personas-main::-webkit-scrollbar-track {
        background-color: #f1f1f1;
        /* Customize scrollbar track color */
    }
}
.teerival-wrapper .section-golf-assets {
    background: var(--teelightblue) url("../img/case-study-details/teerival/user-persona-bg.svg") no-repeat center top;
    background-size: cover;
    position: relative;
}
.teerival-wrapper .section-golf-assets .golf-score-main {
    display: flex;
    justify-content: space-between;
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-golf-assets .golf-score-main {
        display: block;
    }
}
.teerival-wrapper .section-golf-assets .golf-score-main .golf-screen {
    width: calc(50% - 40px);
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-golf-assets .golf-score-main .golf-screen:nth-child(1) {
        margin-bottom: 25px;
    }
}
@media only screen and (max-width: 1600px) {
    .teerival-wrapper .section-golf-assets .golf-score-main .golf-screen {
        width: calc(50% - 30px);
    }
}
@media only screen and (max-width: 1365px) {
    .teerival-wrapper .section-golf-assets .golf-score-main .golf-screen {
        width: calc(50% - 25px);
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-golf-assets .golf-score-main .golf-screen {
        width: calc(50% - 15px);
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-golf-assets .golf-score-main .golf-screen {
        width: 100%;
    }
}
.teerival-wrapper .section-golf-assets .golf-score-main .golf-screen .golf-screens {
    border-radius: 80px;
}
@media only screen and (max-width: 1599px) {
    .teerival-wrapper .section-golf-assets .golf-score-main .golf-screen .golf-screens {
        border-radius: 60px;
    }
}
@media only screen and (max-width: 1365px) {
    .teerival-wrapper .section-golf-assets .golf-score-main .golf-screen .golf-screens {
        border-radius: 40px;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-golf-assets .golf-score-main .golf-screen .golf-screens {
        border-radius: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-golf-assets .golf-score-main .golf-screen .golf-screens {
        border-radius: 15px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .teerival-wrapper .section-onboarding-screens {
        padding-bottom: 100px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-onboarding-screens .onboard-heading .cs-heading {
        text-align: center;
    }
}
.teerival-wrapper .section-onboarding-screens .onboard-heading .cs-heading span {
    color: rgba(45, 16, 18, 0.04);
    font-size: 16.5rem;
    line-height: 20.625rem;
}
@media only screen and (max-width: 1499px) {
    .teerival-wrapper .section-onboarding-screens .onboard-heading .cs-heading span {
        font-size: 12.5rem;
        line-height: 16.625rem;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-onboarding-screens .onboard-heading .cs-heading span {
        font-size: 8.5rem;
        line-height: 10.625rem;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-onboarding-screens .onboard-heading .cs-heading span {
        font-size: 5.5rem;
        line-height: 6rem;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-onboarding-screens .onboard-heading .cs-heading span {
        font-size: 4.5rem;
        line-height: 5.625rem;
        color: rgba(45, 16, 18, 1);
    }
}
@media only screen and (max-width: 575px) {
    .teerival-wrapper .section-onboarding-screens .onboard-heading .cs-heading span {
        font-size: 3.5rem;
        line-height: 4.625rem;
    }
}
@media only screen and (max-width: 375px) {
    .teerival-wrapper .section-onboarding-screens .onboard-heading .cs-heading span {
        font-size: 2.5rem;
        line-height: 3.25rem;
    }
}
.teerival-wrapper .section-onboarding-screens .main-onboard-screens {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1350px;
    margin: -250px auto 0;
    gap: 50px;
    z-index: 3;
    position: relative;
    background-color: 0;
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-onboarding-screens .main-onboard-screens {
        margin: 0 auto;
        gap: 30px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-onboarding-screens .main-onboard-screens {
        flex-wrap: nowrap;
        overflow: hidden;
        overflow-x: scroll;
        margin-top: 20px;
    }
}
.teerival-wrapper .section-onboarding-screens .main-onboard-screens .onboard-screens {
    width: calc(33.33% - 50px);
    margin-bottom: 100px;
    position: relative;
    z-index: 1;
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-onboarding-screens .main-onboard-screens .onboard-screens {
        margin-bottom: 50px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-onboarding-screens .main-onboard-screens .onboard-screens {
        margin-bottom: 8px;
        width: 100%;
        min-width: 45%;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-onboarding-screens .main-onboard-screens .onboard-screens {
        min-width: 60%;
    }
}
@media only screen and (max-width: 480px) {
    .teerival-wrapper .section-onboarding-screens .main-onboard-screens .onboard-screens {
        min-width: 70%;
    }
}
@media only screen and (max-width: 375px) {
    .teerival-wrapper .section-onboarding-screens .main-onboard-screens .onboard-screens {
        min-width: 80%;
    }
}
.teerival-wrapper .section-onboarding-screens .main-onboard-screens .onboard-screens .onboard-screens-content {
    height: 100%;
    display: flex;
    align-items: center;
}
.teerival-wrapper .section-onboarding-screens .main-onboard-screens .onboard-screens .onboard-screens-content.first {
    align-items: start;
}
.teerival-wrapper .section-onboarding-screens .main-onboard-screens .onboard-screens .onboard-screens-content.first p {
    margin-top: 70px;
}
.teerival-wrapper .section-onboarding-screens .main-onboard-screens .onboard-screens .onboard-screens-content.second p {
    margin-top: 100px;
}
.teerival-wrapper .section-onboarding-screens .main-onboard-screens .onboard-screens .onboard-screens-images.rotate {
    transform: rotate(25deg);
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper
        .section-onboarding-screens
        .main-onboard-screens
        .onboard-screens
        .onboard-screens-images.rotate {
        transform: none;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-onboarding-screens .main-onboard-screens .onboard-screens.hide-div {
        display: none;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-onboarding-screens .main-onboard-screens::-webkit-scrollbar {
        height: 8px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-onboarding-screens .main-onboard-screens::-webkit-scrollbar-thumb {
        background-color: #ccc;
        /* Customize scrollbar color */
        border-radius: 4px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-onboarding-screens .main-onboard-screens::-webkit-scrollbar-track {
        background-color: #f1f1f1;
        /* Customize scrollbar track color */
    }
}

.teerival-wrapper .section-onboarding-screens .seven-e {
    width: calc(66.66% - 25px) !important;
    margin-bottom: 100px;
    position: relative;
    z-index: 1;
}
.teerival-wrapper .section-onboarding-screens .nine-odd {
    position: absolute;
    margin-top: 260px;
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-onboarding-screens .nine-odd {
        position: relative;
        margin-top: 0;
    }
}
.teerival-wrapper .section-teerival-admin {
    border-radius: 80px;
}
@media only screen and (max-width: 1599px) {
    .teerival-wrapper .section-teerival-admin {
        border-radius: 60px;
    }
}
@media only screen and (max-width: 1365px) {
    .teerival-wrapper .section-teerival-admin {
        border-radius: 40px;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-teerival-admin {
        border-radius: 0;
    }
}
.teerival-wrapper .section-teerival-design-system {
    background-color: var(--teelightblue);
    border-radius: 80px;
    position: relative;
    z-index: 1;
}
@media only screen and (max-width: 1600px) {
    .teerival-wrapper .section-teerival-design-system {
        border-radius: 60px;
    }
}
@media only screen and (max-width: 1365px) {
    .teerival-wrapper .section-teerival-design-system {
        border-radius: 40px;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-teerival-design-system {
        border-radius: 0;
    }
}
.teerival-wrapper .section-teerival-design-system .border-dashed {
    height: 1px;
    background-image: linear-gradient(90deg, #ffffff7c, #ffffff7c 75%, transparent 25%, transparent 50%);
    background-size: 20px 1px;
    border: none;
    width: 100%;
    height: 0.5px;
    display: block;
    margin: 35px 0 30px;
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-teerival-design-system .border-dashed {
        margin: 20px 0 20px;
    }
}
.teerival-wrapper .section-teerival-design-system .teerival-fonts-main {
    margin-top: 25px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 80px;
    gap: 25px;
}
@media only screen and (max-width: 1366px) {
    .teerival-wrapper .section-teerival-design-system .teerival-fonts-main {
        gap: 20px;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-teerival-design-system .teerival-fonts-main {
        display: block;
        margin-bottom: 35px;
        gap: 0;
    }
}
.teerival-wrapper .section-teerival-design-system .teerival-fonts-main .font-details ul {
    margin: 35px 0 100px 0;
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-teerival-design-system .teerival-fonts-main .font-details ul {
        margin: 15px 0 25px 0;
    }
}
.teerival-wrapper .section-teerival-design-system .teerival-fonts-main .font-details ul li {
    display: inline-block;
    margin-right: 50px;
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-teerival-design-system .teerival-fonts-main .font-details ul li {
        margin-right: 25px;
    }
}
.teerival-wrapper .section-teerival-design-system .teerival-fonts-main .font-details ul li:last-child {
    margin-right: 0;
}
.teerival-wrapper .section-teerival-design-system .teerival-fonts-main .font-styles {
    max-width: 480px;
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-teerival-design-system .teerival-fonts-main .font-styles {
        display: none;
    }
}

.teerival-wrapper .section-teerival-design-system .teerival-color-palette .cp {
    position: absolute;
    top: 0;
    left: 0;
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-teerival-design-system .teerival-color-palette .cp {
        position: initial;
    }
}
.teerival-wrapper .section-golf-score {
    background-color: #8958af;
    position: relative;
    border-radius: 0 0 80px 80px;
}
@media only screen and (max-width: 1599px) {
    .teerival-wrapper .section-golf-score {
        border-radius: 0 0 60px 60px;
    }
}
@media only screen and (max-width: 1365px) {
    .teerival-wrapper .section-golf-score {
        border-radius: 0 0 40px 40px;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-golf-score {
        border-radius: 0;
    }
}
.teerival-wrapper .section-golf-score::before {
    content: "";
    position: absolute;
    top: -100px;
    width: 100%;
    left: 0;
    right: 0;
    height: 100px;
    background-color: #8958af;
    z-index: 0;
}
.teerival-wrapper .section-golf-score .golf-score-main {
    display: flex;
    justify-content: space-between;
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-golf-score .golf-score-main {
        display: block;
    }
}
.teerival-wrapper .section-golf-score .golf-score-main .golf-screen {
    width: calc(50% - 40px);
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-golf-score .golf-score-main .golf-screen:nth-child(1) {
        margin-bottom: 25px;
    }
}
@media only screen and (max-width: 1600px) {
    .teerival-wrapper .section-golf-score .golf-score-main .golf-screen {
        width: calc(50% - 30px);
    }
}
@media only screen and (max-width: 1365px) {
    .teerival-wrapper .section-golf-score .golf-score-main .golf-screen {
        width: calc(50% - 25px);
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-golf-score .golf-score-main .golf-screen {
        width: calc(50% - 15px);
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-golf-score .golf-score-main .golf-screen {
        width: 100%;
    }
}
.teerival-wrapper .section-golf-score .golf-score-main .golf-screen .golf-screens {
    border-radius: 80px;
}
@media only screen and (max-width: 1599px) {
    .teerival-wrapper .section-golf-score .golf-score-main .golf-screen .golf-screens {
        border-radius: 60px;
    }
}
@media only screen and (max-width: 1365px) {
    .teerival-wrapper .section-golf-score .golf-score-main .golf-screen .golf-screens {
        border-radius: 40px;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-golf-score .golf-score-main .golf-screen .golf-screens {
        border-radius: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-golf-score .golf-score-main .golf-screen .golf-screens {
        border-radius: 15px;
    }
}
.teerival-wrapper .section-upgrade-game {
    background-color: var(--teelightpurple);
    justify-content: space-between;
    position: relative;
}
.teerival-wrapper .section-upgrade-game:after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 37.5%;
    border-radius: 0 0 50px 50px;
    background-color: var(--teelightblue);
    mix-blend-mode: hard-light;
}
@media only screen and (max-width: 1365px) {
    .teerival-wrapper .section-upgrade-game:after {
        border-radius: 0 0 40px 40px;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-upgrade-game:after {
        border-radius: 0;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-upgrade-game:after {
        display: none;
    }
}
.teerival-wrapper .section-upgrade-game:before {
    content: "";
    position: absolute;
    bottom: 160px;
    width: 100%;
    height: 37.5%;
    border-radius: 80px 80px 99em 99em;
    background-color: #fafeff;
    z-index: 2;
}
@media only screen and (max-width: 1599px) {
    .teerival-wrapper .section-upgrade-game:before {
        border-radius: 60px 60px 99em 99em;
    }
}
@media only screen and (max-width: 1365px) {
    .teerival-wrapper .section-upgrade-game:before {
        border-radius: 40px 40px 99em 99em;
        bottom: 100px;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-upgrade-game:before {
        border-radius: 0;
        height: 35.5%;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-upgrade-game:before {
        display: none;
    }
}
.teerival-wrapper .section-upgrade-game .bg-div {
    position: absolute;
    bottom: 0;
    opacity: 0.5;
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-upgrade-game .bg-div {
        display: none;
    }
}
.teerival-wrapper .section-upgrade-game .upgrade-main {
    margin-top: 80px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 20px;
}
@media only screen and (max-width: 1599px) {
    .teerival-wrapper .section-upgrade-game .upgrade-main {
        margin-top: 60px;
    }
}
@media only screen and (max-width: 1365px) {
    .teerival-wrapper .section-upgrade-game .upgrade-main {
        margin-top: 50px;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-upgrade-game .upgrade-main {
        grid-template-columns: 1fr 1fr;
        margin-top: 35px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-upgrade-game .upgrade-main {
        grid-gap: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-upgrade-game .upgrade-main {
        display: flex;
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow: hidden;
        overflow-x: scroll;
        grid-gap: 15px;
    }
}
.teerival-wrapper .section-upgrade-game .upgrade-main .upgrade-details {
    border-radius: 24px;
    background-color: var(--teewhite);
    border: 1px solid #d5d5d5;
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-upgrade-game .upgrade-main .upgrade-details {
        border-radius: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-upgrade-game .upgrade-main .upgrade-details {
        min-width: 80%;
        margin: 0 0 8px;
        border-radius: 15px;
    }
}
@media only screen and (max-width: 375px) {
    .teerival-wrapper .section-upgrade-game .upgrade-main .upgrade-details {
        min-width: 90%;
    }
}
.teerival-wrapper .section-upgrade-game .upgrade-main .upgrade-details .upgrade-pic img {
    border-radius: 24px 24px 0 0;
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-upgrade-game .upgrade-main .upgrade-details .upgrade-pic img {
        border-radius: 30px 30px 0 0;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-upgrade-game .upgrade-main .upgrade-details .upgrade-pic img {
        height: 450px;
        object-fit: cover;
        object-position: top;
        border-radius: 15px 15px 0 0;
    }
}
@media only screen and (max-width: 480px) {
    .teerival-wrapper .section-upgrade-game .upgrade-main .upgrade-details .upgrade-pic img {
        height: 400px;
    }
}
.teerival-wrapper .section-upgrade-game .upgrade-main .upgrade-details .short-wrap {
    position: relative;
    margin-top: -50px;
    padding: 33px 40px;
    background-color: var(--teewhite);
    border-radius: 24px;
}
@media only screen and (max-width: 1365px) {
    .teerival-wrapper .section-upgrade-game .upgrade-main .upgrade-details .short-wrap {
        padding: 30px;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-upgrade-game .upgrade-main .upgrade-details .short-wrap {
        border-radius: 30px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-upgrade-game .upgrade-main .upgrade-details .short-wrap {
        padding: 20px;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-upgrade-game .upgrade-main .upgrade-details .short-wrap {
        white-space: normal;
        margin-top: 0;
        border-radius: 0 0 15px 15px;
    }
}
.teerival-wrapper .section-upgrade-game .upgrade-main .upgrade-details .short-wrap p {
    color: #1c274c;
}
.teerival-wrapper .section-upgrade-game .upgrade-main .upgrade-item {
    padding: 40px 40px 0 40px;
    background-color: #f0ddff;
    border-radius: 24px;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    gap: 30px;
    overflow: hidden;
}
@media only screen and (max-width: 1365px) {
    .teerival-wrapper .section-upgrade-game .upgrade-main .upgrade-item {
        padding: 30px 30px 0 30px;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-upgrade-game .upgrade-main .upgrade-item {
        border-radius: 30px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-upgrade-game .upgrade-main .upgrade-item {
        padding: 20px 20px 0 20px;
        gap: 20px;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-upgrade-game .upgrade-main .upgrade-item {
        flex-direction: column;
        min-width: 80%;
        margin: 0 0 8px;
        padding: 0;
        justify-content: start;
        gap: 0;
        border-radius: 0 0 15px 15px;
    }
}
@media only screen and (max-width: 375px) {
    .teerival-wrapper .section-upgrade-game .upgrade-main .upgrade-item {
        min-width: 90%;
    }
}
.teerival-wrapper .section-upgrade-game .upgrade-main .upgrade-item .upgrade-img img {
    border-radius: 24px 24px 0 0;
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-upgrade-game .upgrade-main .upgrade-item .upgrade-img img {
        height: 450px;
        object-fit: cover;
        object-position: top;
    }
}
@media only screen and (max-width: 480px) {
    .teerival-wrapper .section-upgrade-game .upgrade-main .upgrade-item .upgrade-img img {
        height: 400px;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-upgrade-game .upgrade-main .upgrade-item .short-wrap {
        white-space: normal;
        padding: 20px;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-upgrade-game .upgrade-main::-webkit-scrollbar {
        height: 8px;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-upgrade-game .upgrade-main::-webkit-scrollbar-thumb {
        background-color: #ccc;
        /* Customize scrollbar color */
        border-radius: 4px;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-upgrade-game .upgrade-main::-webkit-scrollbar-track {
        background-color: #f1f1f1;
        /* Customize scrollbar track color */
    }
}
.teerival-wrapper .section-upgrade-game .main-upgrade-screens {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1350px;
    margin: 115px auto 0;
    gap: 50px;
    z-index: 3;
    position: relative;
    padding-bottom: 150px;
}
@media only screen and (max-width: 1365px) {
    .teerival-wrapper .section-upgrade-game .main-upgrade-screens {
        padding-bottom: 50px;
    }
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-upgrade-game .main-upgrade-screens {
        gap: 30px;
        margin: 100px auto 0;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-upgrade-game .main-upgrade-screens {
        flex-wrap: nowrap;
        max-width: none;
        overflow: hidden;
        overflow-x: scroll;
        margin: 50px auto 0;
        padding-bottom: 0;
    }
}
@media only screen and (max-width: 575px) {
    .teerival-wrapper .section-upgrade-game .main-upgrade-screens {
        margin: 35px auto 0;
    }
}
.teerival-wrapper .section-upgrade-game .main-upgrade-screens .upgrade-screens {
    width: calc(33.33% - 50px);
    margin-bottom: 100px;
    position: relative;
    z-index: 1;
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-upgrade-game .main-upgrade-screens .upgrade-screens {
        margin-bottom: 50px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-upgrade-game .main-upgrade-screens .upgrade-screens {
        margin-bottom: 8px;
        width: 100%;
        min-width: 45%;
    }
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-upgrade-game .main-upgrade-screens .upgrade-screens {
        min-width: 60%;
    }
}
@media only screen and (max-width: 480px) {
    .teerival-wrapper .section-upgrade-game .main-upgrade-screens .upgrade-screens {
        min-width: 70%;
    }
}
@media only screen and (max-width: 375px) {
    .teerival-wrapper .section-upgrade-game .main-upgrade-screens .upgrade-screens {
        min-width: 80%;
    }
}
.teerival-wrapper .section-upgrade-game .main-upgrade-screens .upgrade-screens .upgrade-screens-content {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-upgrade-game .main-upgrade-screens .upgrade-screens .upgrade-screens-content {
        display: none;
    }
}
.teerival-wrapper .section-upgrade-game .main-upgrade-screens .upgrade-screens .upgrade-screens-content p {
    max-width: 368px;
}
.teerival-wrapper .section-upgrade-game .main-upgrade-screens .upgrade-screens .upgrade-screens-content.middle {
    align-items: start;
}
.teerival-wrapper .section-upgrade-game .main-upgrade-screens .upgrade-screens .upgrade-screens-content.middle p {
    margin-top: 90px;
    max-width: 280px;
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-upgrade-game .main-upgrade-screens .upgrade-screens .upgrade-screens-content.middle p {
        margin-top: 0;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-upgrade-game .main-upgrade-screens .upgrade-screens.hide-div {
        display: none;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-upgrade-game .main-upgrade-screens::-webkit-scrollbar {
        height: 8px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-upgrade-game .main-upgrade-screens::-webkit-scrollbar-thumb {
        background-color: #ccc;
        /* Customize scrollbar color */
        border-radius: 4px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-upgrade-game .main-upgrade-screens::-webkit-scrollbar-track {
        background-color: #f1f1f1;
        /* Customize scrollbar track color */
    }
}
.teerival-wrapper .section-upgrade-game .sss {
    margin-top: -350px;
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-upgrade-game .sss {
        margin-top: -150px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-upgrade-game .sss {
        margin-top: 0;
    }
}
.teerival-wrapper .section-impact {
    position: relative;
}
.teerival-wrapper .section-impact:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    background: url("../img/case-study-details/teerival/impact-bg.svg") no-repeat center bottom;
    background-size: cover;
    bottom: 0;
    width: 100%;
    height: 516px;
}
@media only screen and (max-width: 767px) {
    .teerival-wrapper .section-impact:after {
        display: none;
    }
}
.teerival-wrapper .section-impact .impact-main {
    display: flex;
    gap: 40px;
    margin-top: 80px;
    position: relative;
    z-index: 2;
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-impact .impact-main {
        margin-top: 60px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-impact .impact-main {
        margin-top: 40px;
        display: block;
    }
}
.teerival-wrapper .section-impact .impact-main .impact-left {
    display: flex;
    flex-direction: column;
    width: 260px;
    row-gap: 30px;
    justify-content: space-between;
}
@media only screen and (max-width: 1199px) {
    .teerival-wrapper .section-impact .impact-main .impact-left {
        justify-content: start;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-impact .impact-main .impact-left {
        flex-direction: row;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 10px;
        margin-bottom: 15px;
        flex-direction: row;
        width: 100%;
        row-gap: 0;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-impact .impact-main .impact-left::-webkit-scrollbar {
        height: 8px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-impact .impact-main .impact-left::-webkit-scrollbar-thumb {
        background-color: #ccc;
        /* Customize scrollbar color */
        border-radius: 4px;
    }
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-impact .impact-main .impact-left::-webkit-scrollbar-track {
        background-color: #f1f1f1;
        /* Customize scrollbar track color */
    }
}
.teerival-wrapper .section-impact .impact-main .impact-number {
    background-color: var(--teelightblue);
    border-radius: 30px;
    padding: 28px 30px;
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-impact .impact-main .impact-number {
        display: inline-flex;
        flex-direction: column;
        margin-right: 10px;
        border-radius: 10px;
    }
    .teerival-wrapper .section-impact .impact-main .impact-number:last-child {
        margin-right: 0;
    }
}
.teerival-wrapper .section-impact .impact-main .impact-right {
    flex: 1;
    background-color: var(--teelightpurple);
    padding: 15px 30px;
    border-radius: 30px;
}
@media only screen and (max-width: 991px) {
    .teerival-wrapper .section-impact .impact-main .impact-right {
        border-radius: 10px;
        padding: 0 15px;
    }
}
.teerival-wrapper .section-impact .impact-main .impact-right .intro-icon {
    margin-bottom: 30px;
}
.teerival-wrapper .section-impact .impact-main .impact-right .intro-icon img {
    width: 100px;
    aspect-ratio: auto 100 / 100;
    height: auto;
}
.teerival-wrapper .section-impact .impact-main .impact-right .impact-details {
    border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
    padding: 20px 0;
}
.teerival-wrapper .section-impact .impact-main .impact-right .impact-details:last-child {
    border-bottom: none;
}
.teerival-wrapper .section-impact .impact-main .impact-right .impact-details p {
    margin-bottom: 0;
}

/*teerival page css ends here*/