/* work different section */
.different-section {
    padding-block: 120px 0;
}

.different-section .different-main {
    max-width: 575px;
    margin-inline: auto;
    position: relative;
}

.different-section .different-left,
.different-section .different-right {
    position: absolute;
    top: 50px;
    left: -124px;
    max-width: 195px;
    height: auto;
}

.different-section .different-right {
    top: unset;
    bottom: 20px;
    left: unset;
    right: -75px;
    max-width: 118px;
}

.different-section .different-left img,
.different-section .different-right img {
    width: 100%;
    object-fit: contain;
}

.different-section .different-content h2 {
    text-align: center;
    font-family: var(--fontDisplay);
    font-size: 50px;
    font-style: normal;
    font-weight: 100;
    line-height: 107%;
}

.different-section .different-content h2 strong {
    font-family: var(--fontFrank);
}

.different-section .different-content p {
    color: var(--blue);
    text-align: center;
    font-size: 16.617px;
    font-style: normal;
    font-weight: 300;
    line-height: 151%;
    max-width: 425px;
    margin-inline: auto;
    margin-block: 30px 28px;
}

.different-section .different-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px 11px;
}

.different-section .different-tags span {
    border-radius: 27.504px;
    background: #FFF;
    padding: 11.5px 20px;
    display: inline-block;
    color: var(--blue);
    text-align: center;
    font-size: 13.752px;
    font-style: normal;
    font-weight: 500;
    line-height: 84%;
    letter-spacing: 0.413px;
}

.work-with-us-services .services__grid .service-card__title {
    max-width: max-content;
}

/*call to action section*/
.call-to-action-section a.btnWithIcon:hover span.btnText {
    background: #fff;
}

.call-to-action-section a.btnWithIcon:hover .btnIcon {
    background: #fff;
}

.page-template-workwithus-page-template .services {
    margin-top: 0;
        padding-bottom: 40px;
}

/* work penni section */
.penni-section {
    padding-block: 0 30px;
    overflow: hidden;
}

.penni-section .penni-wrapper {
    max-width: 980px;
    margin-inline: auto;
    display: flex;
    align-items: center;
}

.penni-section .penni-image {
    margin-right: -120px;
    position: relative;
    z-index: 1;
    border-radius: 26px;
    overflow: hidden;
}

.penni-section .penni-image img {
    width: 100%;
    object-fit: cover;
}

.penni-section .penni-content {
    border-radius: 17px;
    background: var(--lightBlue);
        padding: 60px 60px 60px 150px;
    max-width: 720px;
}

.penni-section .penni-content h2 {
    font-family: var(--fontDisplay);
    font-size: 35.155px;
    font-style: normal;
    font-weight: 100;
    line-height: 109%;
}

.penni-section .penni-content p {
    color: var(--blue);
    font-size: 16.617px;
    font-style: normal;
    font-weight: 300;
    line-height: 151%;
    margin-block: 18px 0;
}

.penni-section .penni-content .btn {
    min-width: 112px;
    margin-block: 18px 0;
}

.penni-section .penni-content .btn:hover {
    background: var(--grey);
    color: var(--blue);
}

/* work approach section */
.approach-section {
    padding-block: 65px 0;
}

.approach-section .approach-main {
    display: grid;
    grid-template-columns: 1fr 430px;
    align-items: center;
    gap: 50px;
    max-width: 800px;
    margin-inline: auto;
}

.approach-section .approach-content h2 {
    text-align: center;
    font-family: var(--fontDisplay);
    font-size: 35.155px;
    font-style: normal;
    font-weight: 100;
    line-height: 109%;
}

.approach-section .approach-content p {
    color: var(--blue);
    text-align: center;
    font-size: 16.617px;
    font-style: normal;
    font-weight: 300;
    line-height: 151%;
    margin-block: 18px 0;
}

.approach-section .approach-image,
.approach-section .approach-image img {
    width: 100%;
    object-fit: cover;
}

/* work process section */
.process-section {
    padding-block: 55px 75px;
}

.process-section .process-main {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px 50px;
    max-width: 960px;
    margin-inline: auto;
}

.process-section .process-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.process-section .process-row:last-child {
    margin-bottom: 0;
}

.process-section .process-tag {
    border-radius: 9.886px;
    background: #FFF;
    color: var(--blue);
    text-align: center;
    font-family: var(--fontDisplay);
    font-size: 18.674px;
    font-style: normal;
    font-weight: 100;
    line-height: 19.223px;
    padding: 9px 14px;
}

.process-section .process-tag.active {
    background: var(--lightBlue);
    font-family: var(--fontFrank);
}

.process-section .plus {
    color: var(--blue);
    font-family: var(--fontDisplay);
    font-size: 18.674px;
    font-weight: 700;
    line-height: 19.223px;
}

/* work team banner section */
.team-banner .team-banner__image {
    aspect-ratio: 2.78 / 1;
    max-width: 960px;
    margin-inline: auto;
    border-radius: 21px;
    background: #D9D9D9;
    overflow: hidden;
}

.team-banner .team-banner__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* work clients section */
.workClient.top-jobs {
    padding-block: 65px 80px;
    overflow: hidden;
}

.workClient.top-jobs .container {
    max-width: 100%;
}

.workClient.top-jobs .top-jobs__wrapper {
    grid-template-columns: 260px calc(100% - 275px);
}

.workClient.top-jobs .job-card {
    justify-content: center;
    padding: 32px 15px 28px 30px;
}

.workClient.top-jobs .section-title {
    font-family: var(--fontDisplay);
    font-size: 35.155px;
    font-weight: 100;
    line-height: 109%;
    max-width: 225px;
    margin-left: auto;
}

.workClient.top-jobs .jobs-slider {
    display: flex;
    align-items: center;
    gap: 32px;
}

.workClient.top-jobs .job-card .workQuote {
    max-width: 20px;
}

.workClient.top-jobs .job-card__description {
    font-size: 16px;
    font-weight: 300;
    line-height: 151%;
    letter-spacing: 0.16px;
    margin-block: 18px 20px;
    max-height: 245px;
    overflow: auto;
    padding-right: 12px;
}

.workClient.top-jobs .clientName {
    font-size: 14px;
    font-weight: 500;
    line-height: 136%;
    letter-spacing: 1.68px;
    text-transform: uppercase;
}

/* responsive css start here */

@media(max-width:1279px) {

    /* work different section */
    .different-section {
        padding-block: 80px 0;
    }

    /*work top job section*/
    .workClient.top-jobs .top-jobs__wrapper {
        grid-template-columns: 200px calc(100% - 215px);
    }
}

@media(max-width:989px) {

    /* work different section */
    .different-section {
        padding-block: 60px 0;
    }

    /* work penni section */
    .penni-section .penni-image {
        margin-right: -200px;
    }

    .penni-section .penni-content {
        padding: 80px 20px 80px 235px;
        max-width: 600px;
    }

    /* work process section */
    .process-section .process-main {
        gap: 22px 18px;
    }

    /* work top job section */
    .workClient.top-jobs {
        padding-block: 60px 70px;
    }

    .workClient.top-jobs .jobs-slider {
        gap: 22px;
    }
}

@media(max-width:749px) {

    /* work different section */
    .different-section {
        padding-block: 50px 0;
    }

    .different-section .different-content h2 {
        font-size: 28px;
        max-width: 230px;
        margin-inline: auto;
    }

    .different-section .different-content p {
        font-size: 14px;
        max-width: 360px;
    }

    .different-section .different-left {
        top: -40px;
        left: -100px;
        max-width: 180px;
    }

    .different-section .different-right {
        bottom: unset;
        top: 85px;
        right: -12px;
        max-width: 65px;
    }

    .different-section .different-content p {
        font-size: 14px;
        max-width: 360px;
        margin-block: 40px 35px;
    }

    .different-section .different-tags {
        gap: 8px 6px;
    }

    .different-section .different-tags span {
        font-size: 10.178px;
        letter-spacing: 0.305px;
        padding: 9px 12px;
    }

    /* work penni section */
    .penni-section {
        padding-block: 50px 0;
    }

    .penni-section .container {
        padding-inline: 0;
    }

    .penni-section .penni-wrapper {
        flex-direction: row-reverse;
    }

    .penni-section .penni-image {
        margin-right: -26px;
        aspect-ratio: 0.88 / 1;
        width: 100%;
        min-width: 200px;
        border-radius: 17px 0 0 17px;
        max-width: 200px;
    }

    .penni-section .penni-content h2 {
        font-size: 30px;
    }

    .penni-section .penni-content p {
        font-size: 14px;
        margin-block: 20px 0;
    }

    .penni-section .penni-content {
        padding: 20px 68px 20px 20px;
        margin-right: -56px;
        border-radius: 0 15px 15px 0;
    }

    .penni-section .penni-content .btn {
        font-size: 10px;
        min-width: fit-content;
    }

    /* work approach section */
    .approach-section {
        padding-block: 50px 0;
    }

    .approach-section .approach-main {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .approach-section .approach-content h2 {
        font-size: 30px;
    }

    .approach-section .approach-content p {
        font-size: 14px;
        max-width: 350px;
        margin-inline: auto;
        margin-block: 10px 0;
    }

    /* work process section */
    .process-section {
        padding-block: 55px 50px;
    }

    .process-section .process-tag {
        font-size: 12.981px;
        line-height: 13.363px;
        padding: 7px 11px;
        border-radius: 6px;
    }

    .process-section .process-row {
        gap: 7px 5px;
    }

    .process-section .process-main {
        gap: 15px 15px;
    }

    /* work team banner section */
    .team-banner .container {
        padding-inline: 0;
    }

    .team-banner .team-banner__image {
        border-radius: 0;
        aspect-ratio: 2.3 / 1;
    }

    /* work top jobs section */
    

    .workClient.top-jobs {
        padding-block: 50px 50px;
    }

    .workClient.top-jobs .section-title {
        margin-inline: auto;
        font-size: 25px;
    }

    .workClient.top-jobs .job-card__description {
        font-size: 14px;
        max-height: 190px;
    }

    .workClient.top-jobs .clientName {
        font-size: 12px;
    }

    .workClient.top-jobs .job-card {
        padding: 20px;
    }

    .workClient.top-jobs .jobs-slider {
        gap: 15px;
    }

    .workClient.top-jobs .top-jobs__wrapper {
        gap: 30px;
    }

    /*call to action section*/
    .call-to-action-section {
        margin-top: 35px;
    }


    .page-template-workwithus-page-template .work-with-us-services .service-card{
        padding-bottom: 0px;
    }
}

@media(max-width:389px) {

    /* work penni section */
    .penni-section .penni-image {
        min-width: 180px;
        max-width: 180px;
    }

    .penni-section .penni-content p {
        font-size: 13px;
        margin-block: 16px 0;
    }

    .penni-section .penni-content h2 {
        font-size: 28px;
    }

    /* work top jobs section */
    .workClient.top-jobs .job-card__description {
        font-size: 13px;
    }

    .workClient.top-jobs .clientName {
        font-size: 11px;
    }
}