.solution-body {
    padding: 0px;
    color: #202020;
}

.underline-title-solution-body {
    background: linear-gradient(264.44deg, #2bb673 0%, #2b3990 100%);
    width: calc(100% - 32px);
    max-width: 320px;
    height: 2px;
    margin: 0 auto;
    margin-top: 8px;
}

.solution-body-content {
    margin: 0 auto;
    max-width: 896px;
    font-family: Frutiger;
    font-size: 16px;
}

.solution-body-content.background-content {
    background: url(../../images/plan-background-img.png) #003359;
    position: relative;
    color: #fff;
    padding: 32px 16px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.solution-body-content.background-content > h4 {
    margin-bottom: 32px;
    text-align: center;
    font-family: Frutiger55Roman;
    color: #2bb673;
    position: relative;
    font-size: 22px;
}

.solution-body-content > p {
    margin-bottom: 0;
}

.solution-body-content.background-content .left-text {
    text-align: justify;
    padding-left: 48px;
    padding-right: 32px;
}

.solution-body-content.background-content .right-text {
    padding-right: 48px;
    padding-left: 32px;
}

.solution-body-content.background-content .right-text > p,
.solution-body-content.background-content .left-text > p {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .solution-body-content.background-content .right-text,
    .solution-body-content.background-content .left-text {
        padding: 0 16px;
    }
}

.content-inner-title {
    color: #2bb673;
    font-size: 22px;
    font-family: Frutiger55Roman;
    line-height: 120%;
    margin-bottom: 16px;
    text-align: center;
}

.solution-title-part {
    font-family: Frutiger;
    margin-bottom: 0px;
    text-align: center;
    margin-top: 40px;
    padding: 0 15px;
}

#img-solution-2 {
    margin-top: 32px;
    width: 100%;
}

.solution-footer-title > h4 {
    font-family: Frutiger55Roman;
    font-size: 23px;
    line-height: 120%;
    margin-bottom: 32px;
    /* padding: 0 15px; */
}


.solution-projects-container > div {
    /* padding: 0 15px; */
}

.solution-projects-container > div > div {
    width: 100%;
    height: 422px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.solution-projects-container > div:nth-child(1) > div {
    background-image: url(../../images/news-image-3.jpg);
}

.solution-projects-container > div:nth-child(2) > div {
    background-image: url(../../images/news-image-1.jpg);
}

.solution-projects-container > div:nth-child(3) > div {
    background-image: url(../../images/news-image-2.jpg);
}

.item-text-container {
    padding: 16px;
    padding-top: 24px;
    background: rgba(0, 51, 89, 0.85);
    color: #fff;
    font-family: Frutiger55Roman;
    font-size: 18px;
    height: 134px;
    width: 100%;
}

.item-text-container .item-tag {
    background-color: #0b654a;
    color: #fff;
    padding: 4px 8px;
    margin-right: 8px;
    padding-bottom: 2px;
    font-size: 10px;
}

.solution-body-content-footer {
/*     margin-top: 90px; */
    padding: 0;
}

.solution-projects-container ~ .swiper-pagination {
    display: none;
}

.solution-body-content-footer .swiper-pagination-bullet {
    width: 15px;
    height: 15px;
    outline: none;
    text-align: center;
    line-height: 20px;
    font-size: 10px;
    margin: 0 6px !important ;
    opacity: 1;
    background: #8b8d8e;
    border: 0.772px solid #8b8d8e;
    transform: matrix(1, 0, 0, -1, 0, 0);
}

.solution-body-content-footer .swiper-pagination-bullet-active {
    background: linear-gradient(90deg, #2b3990 0%, #2bb673 100%);
    transform: matrix(1, 0, 0, -1, 0, 0);
}

#img-solution-1 {
    width: 100%;
    max-width: 568px;
    height: 100%;
}

.solution-projects-container .item-projects {
    background: #f8fafb;
    transition: all 0.3s ease-in-out;
    position: relative;
    /* box-shadow: 0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04) */
}

.solution-projects-container .item-projects:hover {
    cursor: pointer;
}

.solution-projects-container .item-projects > a {
    display: block;
    width: 100%;
}
.solution-projects-container .item-projects img {
    /* height: calc(27vw * 0.75); */
    height: 100%;
    object-fit: cover;
    min-height: 442px;
    object-position: center;
    width: 100%;
}

.item-projects .contain-inner-text {
    background: rgba(0, 51, 89, 0.85);
    position: absolute;
    bottom: 0;
    width: 100%;
    transition: all 0.5s ease-in-out;
    height: 31%;
    /* height: 100%; */
}

.item-projects .contain-inner-text > .project-content-description {
    /*border-top: 1px solid rgb(248 250 251 / 0.6);*/
    padding: 24px 0;
    margin: 0 16px;
    font-size: 18px;
    font-family: Frutiger;
    line-height: 150%;
    color: #f8fafb;
}

.item-projects .contain-inner-text > .project-content-description > p {
    overflow: hidden;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
}

.item-projects .contain-inner-text:hover {
    height: 100%;
}

.item-projects .contain-inner-text:hover > p.content-text {
    margin-bottom: 24px;
}

.item-projects .status-contain {
    font-size: 12px;
    margin: 16px;
}

.item-projects .status-contain > .status-projects {
    background-color: #0b654a;
    color: #fff;
    padding: 4px 8px;
    margin-right: 8px;
    padding-bottom: 2px;
}

.item-projects .status-contain > .date-projects {
    color: #9b9b9b;
}

.item-projects .content-text {
    padding: 0 16px;
    font-size: 22px;
    line-height: 120%;
    color: #fff;
    padding-bottom: 24px;
    margin-bottom: 0px;
    transition: margin 0.4s ease-in-out;
    height: 96px;
    width: 100%;
    border-bottom: 1px solid rgb(248 250 251/0.6);   
}

.item-projects .content-text a {
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}


@media (min-width: 992px) {
    /* .solution-body-content .left-text {
        padding-right: 32px;
        
    } */

    .solution-body-content .right-text {
        display: flex;
        justify-content: center;
        align-items: start;
    }

    /* #img-solution-1 {
        width: calc(50% + 32px);
        max-width: 568px;
        height: 100%;
        position: absolute;
        left: calc(50% + 32px);
    } */
}

.solution-body-content-footer > .swiper-container {
    padding-bottom: 45px;
}

.solution-body-content-text.custom-font-fami-size {
    font-size: 16px;
    font-family: Frutiger;
}

.solution-body-content-text.custom-font-fami-size > a {
    font-size: 18px;
    font-family: Frutiger55Roman;
}

.solution-body-content .aligncenter {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

@media (max-width: 1169px) {
    .solution-body-content-footer {
        padding: 0 0;
    }
    .solution-body {
        padding: 0px 24px;
    }
}

@media (max-width: 768px) {
    .solution-body-content.background-content .left-text > p {
        margin-bottom: 32px;
    }

    .solution-body-content-text {
        text-align: center !important;
    }
    /* .solution-header-container > .content-header > p {
        display: none;
    } */

    .solution-body-content-footer > .swiper-container {
        padding-bottom: 116px;
    }

    .solution-body-content-footer > .swiper-container > .swiper-pagination-bullets {
        bottom: 48px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* .solution-header-container > .content-header > button {
        display: none;
    } */

    .solution-projects-container ~ .swiper-pagination {
        display: block;
    }

    .solution-body-content-footer {
        margin-top: 90px;
    }

    .solution-footer-title > h4 {
        margin-bottom: 32px;
    }
}
.solution-projects-container > div > div img {
        height: 100%;
}
@media only screen and (max-width: 1280px) and (min-width: 1040px) {
    .solution-projects-container > div > div {
        height: 350px;
    }
}

@media only screen and (max-width: 1024px) and (min-width: 770px) {
    .solution-projects-container > div > div {
        height: 350px;
    }
}