@import url(../css/variable.css);

/* Portfolio Banner */
.work-detail-banner.common-padding {
    padding-top: 190px;
}

.prev-next-btn {
    display: var(--display-none);
}

.portfolio-content {
    position: relative;
    z-index: 0;
}

.portfolio-content::after {
    content: '';
    position: absolute;
    bottom: -100px;
    left: -130px;
    background: url(../images/ellipse.svg) no-repeat center;
    background-size: cover;
    width: 556px;
    height: 556px;
    z-index: -1;
}

.portfolio-content .heading_four {
    color: var(--primary-color);
    margin-bottom: 12px;
}

.portfolio-content h1 {
    font-size: var(--global-inner-h1-size);
    line-height: 54px;
    text-align: left;
    margin-bottom: 30px;
}

.portfolio-content>p {
    margin-bottom: 40px;
}

.portfolio-content .industry-banner {
    display: var(--display-none);
}

.industry-details {
    display: var(--display-flex);
    align-items: var(--flex-align-center);
    /* flex-wrap: wrap; */
    /* padding: 20px 15px; */
    margin-bottom: var(--zero-spacing);
}

.develop-apps-list-box {
    position: relative;
    padding-right: 60px;
}

.industry-details .develop-apps-list-box:last-child {
    padding-right: var(--zero-spacing);
}

.develop-apps-list-box::after {
    content: '';
    position: absolute;
    top: 0;
    right: 30px;
    width: 1px;
    height: 100%;
    background-color: var(--secondary-color);
}

.industry-details .develop-apps-list-box:last-child::after {
    display: var(--display-none);
}

.develop-apps-list-box .heading_five {
    margin-bottom: 4px;
}

.industry-banner {
    display: var(--display-flex);
    align-items: var(--flex-align-center);
    justify-content: var(--flex-justify-center);
}

/* Portfolio Banner End */

/* Key Feature */
.key-feature {
    margin-bottom: -20px;
}

.key-feature-col {
    margin-bottom: 20px;
}

.key-feature-box {
    padding: 24px;
    background-color: #F8F9FA;
    min-height: 150px;
    transition: var(--transition);
    height: 100%;
}

.key-feature-box:hover {
    background-color: #FBEEEE;
    transition: var(--transition);
}

.key-feature-box .heading_five {
    margin-bottom: 8px;
}

/* Key Feature End */

/* They Trusted Us */
.they-trusted-us {
    background: #E2ECFF;
}

.they-trusted-us-content {
    padding: 0 100px;
    position: relative;
    z-index: 0;
}

.they-trusted-us-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 70px;
    height: 70px;
    background: url('../images/icon_quote.svg') no-repeat center;
    background-size: contain;
}

.they-trusted-us-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 70px;
    height: 70px;
    background: url('../images/icon_quote.svg') no-repeat center;
    transform: rotate(180deg);
    background-size: contain;
}

.client-box {
    display: var(--display-flex);
    align-items: var(--flex-align-center);
    margin-bottom: var(--zero-spacing);
    gap: 15px;
}

.client-detail {
    display: var(--display-flex);
    align-items: var(--flex-align-center);
    margin-right: 10px;
    margin-bottom: var(--zero-spacing);
}

.client-detail .heading_five {
    margin-right: 20px;
    margin-bottom: var(--zero-spacing);
    padding-right: 20px;
    color: var(--primary-color);
    position: relative;
}

.client-detail .heading_five::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 0;
    width: 1px;
    height: 50%;
    background-color: var(--primary-color);
}

/* They Trusted Us End */

/* Product Design */
.product-slider {
    padding: 40px 0;
}

.product-slider .swiper-slide {
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.product-slider .swiper-slide:hover,
.product-slider .swiper-slide:focus,
.product-slider .swiper-slide:active {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
}

.product-slider .swiper-pagination {
    bottom: 0;
}

.swiper-pagination-bullet-active {
    background: var(--primary-color);
}

/* Product Design End */

/* Technologies */
.technologies-details {
    display: var(--display-flex);
    align-items: var(--flex-align-center);
    margin-bottom: var(--zero-spacing);
    justify-content: var(--flex-justify-space-between);
}

.technologies-details li {
    display: var(--display-flex);
    align-items: var(--flex-align-center);
    flex-direction: column;
}

.technologies-details svg {
    display: inline-flex;
    vertical-align: bottom;
    width: 170px;
    height: 170px;
}

.technologies-details circle {
    stroke-width: 8px;
    stroke-dasharray: 0;
    fill: none;
}

.technologies-details .meter {
    stroke-width: 8px;
    fill: none;
    transition: stroke-dashoffset 2s cubic-bezier(0.43, 0.41, 0.22, 0.91);
    transform-origin: center center;
    transform: rotate(-90deg) scaleX(-1);
}

.technologies-details text {
    fill: var(--secondary-color);
    font-weight: var(--global-font-weight-semi-bold);
}

.technologies-details .progress-blue circle {
    stroke: #F0FAFF;
}

.technologies-details .progress-blue .meter {
    stroke: #009EE3;
}

.technologies-details .progress-green circle {
    stroke: #E6FAF0;
}

.technologies-details .progress-green .meter {
    stroke: #68CE9B;
}

.technologies-details .progress-yellow circle {
    stroke: #FFF6D4;
}

.technologies-details .progress-yellow .meter {
    stroke: #F1C51C;
}

.technologies-details .progress-purple circle {
    stroke: #ECF2FE;
}

.technologies-details .progress-purple .meter {
    stroke: #728EC6;
}

.technologies-details .progress-pink circle {
    stroke: #FBEEEE;
}

.technologies-details .progress-pink .meter {
    stroke: #F8AFAF;
}

.technologies-details .heading_five {
    margin-top: 12px;
    margin-bottom: var(--zero-spacing);
}

/* Technologies End */

/* Responsive */
@media only screen and (max-width: 1199px) {
    .develop-apps-list-box {
        padding-right: 30px;
    }

    .develop-apps-list-box::after {
        right: 15px;
    }

    .portfolio-content::after {
        bottom: 0;
        left: 0;
        width: 370px;
        height: 370px;
    }
}

@media only screen and (max-width: 991px) {
    .portfolio-content h1 {
        font-size: var(--golbal-tablet-h1-size);
        line-height: normal;
    }

    .portfolio-content .industry-banner {
        display: var(--display-block);
        margin-bottom: 20px;
    }

    .portfolio-content .industry-banner img {
        max-width: 600px;
        width: 100%;
    }

    .portfolio-content>p {
        margin-bottom: 30px;
    }

    .develop-apps-list-box {
        padding-right: 50px;
    }

    .develop-apps-list-box::after {
        right: 25px;
    }

    .industry-banner {
        display: none;
    }

    .technologies-details {
        flex-wrap: wrap;
        justify-content: var(--flex-justify-center);
    }

    .technologies-details li {
        padding: 0 10px 15px;
    }
}

@media only screen and (max-width: 767px) {
    .work-detail-banner.common-padding {
        padding-top: 170px;
    }

    .portfolio-content h1 {
        margin-bottom: 20px;
    }

    .they-trusted-us-content {
        padding: 0 70px;
    }

    .they-trusted-us-content::before {
        width: 40px;
        height: 40px;
    }

    .they-trusted-us-content::after {
        width: 40px;
        height: 40px;
    }
}

@media only screen and (max-width: 575px) {
    .work-detail-banner.common-padding {
        padding-top: 125px;
    }

    .portfolio-content::after {
        width: 300px;
        height: 300px;
    }

    .portfolio-content h1 {
        font-size: var(--golbal-mobile-h1-size);
    }

    .develop-apps-list-box {
        padding-right: 40px;
    }

    .develop-apps-list-box::after {
        right: 20px;
    }

    .key-feature-col:last-child {
        margin-bottom: var(--zero-spacing);
    }

    .key-feature {
        margin-bottom: var(--zero-spacing);
    }

    .key-feature-box {
        padding: 15px;
        min-height: 120px;
    }

    .they-trusted-us-content {
        padding: 0 30px;
    }

    .they-trusted-us-content::before {
        width: 25px;
        height: 25px;
    }

    .they-trusted-us-content::after {
        width: 25px;
        height: 25px;
    }

    .technologies-details svg {
        width: 130px;
        height: 130px;
    }
}

@media only screen and (max-width: 480px) {
    .industry-details {
        flex-wrap: wrap;
    }

    .develop-apps-list-box {
        padding-right: 0;
        padding-bottom: 12px;
        width: 50%;
    }

    .industry-details .develop-apps-list-box:last-child {
        padding-bottom: var(--zero-spacing);
    }

    .develop-apps-list-box h5 {
        font-size: 16px;
        margin-bottom: 0;
    }

    .develop-apps-list-box p {
        font-size: 12px;
    }

    .develop-apps-list-box::after {
        display: none;
    }
}

/* Responsive End */