.services-title {
    font-family: LTBukra-Bold, sans-serif;
    font-size: 36px;
    line-height: 46px;
    color: var(--primary-blue-color);
}
.services-subtitle {
    font-family: LTBukra-Bold, sans-serif;
    font-size: 24px;
    line-height: 32px;
    color: var(--primary-blue-color);
}
.services-desc {
    font-family: LTBukra-Regular, sans-serif;
    font-size: 18px;
    line-height: 27px;
    color: #4b4b4b;
}

.services-collapse-wrapper {
    background-color: #fff;
    overflow: hidden;
    border: 1px solid rgba(222, 222, 222, 0.4);
}

.services-card-collapse {
    box-sizing: border-box;
    background: transparent;
    padding: 18px 24px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--primary-green-color);
    cursor: pointer;
    max-height: 63px;
    height: 100%;
    transition: 0.4s;
}

.services-card-collapse:not(:first-child) {
    border-top: 1px solid #e6e6e6;
}

.services-card-title {
    font-family: LTBukra-Regular, sans-serif;
    font-size: 18px;
    line-height: 26px;
    color: var(--primary-blue-color);
    margin: 0;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.services-card-text {
    font-family: LTBukra-Regular, sans-serif;
    font-size: 14px;
    line-height: 24px;
    color: #4b4b4b;
    margin: 30px 0 0;
    pointer-events: none;
}

.services-card-collapse.active {
    background-color: #fff;
    box-shadow: inset 4px 0px 0px 0px var(--accent-color);
}

.services-card-collapse.active .services-card-title {
    border-bottom: 1px solid #dedede;
    padding-bottom: 15px;
}
.faq-toggle {
    transform: rotate(225deg);
    z-index: 11;
    display: block;
    width: 14px;
    height: 14px;
    border-top: 4px solid var(--primary-blue-color);
    border-left: 4px solid var(--primary-blue-color);
    transition: 0.3s;
}
.services-card-collapse.active{
    max-height: 400px;
    transition: 1.2s
}
.services-card-collapse.active .faq-toggle {
    transition: 0.3s;
    transform: rotate(45deg);
    border-color: var(--primary-green-color);
}
.services-title-wrapper.col-card {
    flex-direction: column;
    align-items: start;
}
.services-title.col-card {
    font-size: 18px;
    line-height: 26px;
    color: black;
}
.services-desc.col-card {
    font-size: 14px;
    line-height: 24px;
}
.devops-slider {
    height: 513px;
}
.devops-slider .swiper-slide {
    opacity: 0.2;
}
.devops-slider .swiper-button-next,
.devops-slider .swiper-button-prev {
    top: 100% !important;
}

.devops-slider .swiper-slide-active {
    opacity: 1;
}

.devops-slider .swiper-pagination-bullet {
    width: 12px !important;
    height: 12px !important;
    opacity: 0.2;
}

.devops-slider .swiper-pagination-bullet-active {
    background: var(--primary-blue-color);
    opacity: 1;
}
.swipper-events-controls-wrapper {
    bottom: 15%;
}
.devops-project-bg {
    width: 100%;
    height: 100%;
    padding: 150px 0 220px 0;
    background-image: url("../images/bg/devops-project-bg.svg");
    background-repeat: no-repeat;
    background-size: cover;
}
.get-subtitle {
    font-family: LTBukra-Bold, sans-serif;
    font-size: 36px;
    line-height: 46px;
    color: var(--primary-blue-color);
}
.services-title.size {
    font-size: 20px;
    color: #000;
}
.how-work-bg {
    background-image: url(../images/bg/green-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    padding: 150px 0;
}
.how-work-title,
.risk-title,
.web-dev-title {
    font-family: LTBukra-Bold, sans-serif;
    font-size: 28px;
    line-height: 38px;
    color: var(--primary-blue-color);
    text-align: center;
    /* text-transform: capitalize; */
}
.how-work-desc,
.risk-desc,
.web-dev-desc {
    font-family: LTBukra-Regular, sans-serif;
    font-size: 18px;
    line-height: 26px;
    color: #4b4b4b;
    margin: 18px auto;
    text-align: center;
    max-width: 65%;
}
.risk-title,
.risk-desc {
    text-align: initial;
    margin: 32px 0 0 0;
    max-width: 100%;
}
.web-dev-title {
    text-align: initial;
}
.web-dev-desc {
    max-width: 100%;
    text-align: initial;
}
.prod-text {
    font-family: LTBukra-Regular, sans-serif;
    font-size: 17px;
    line-height: 24px;
    color: #4b4b4b;
    text-align: initial;
}
.how-work-wrapper.devops {
    width: 100%;
    height: 1040px;
    background-image: url(../images/DevOps-BG.svg);
    background-repeat: no-repeat;
    background-size: cover;
}
.how-work-wrapper.mob {
    width: 100%;
    height: 1960px;
    background-image: url(../images/Mobile-development.svg);
    background-repeat: no-repeat;
    background-size: cover;
}
.how-work-wrapper .content-wrapper {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
}
.how-work-wrapper .content-wrapper > div {
    position: relative;
    max-width: 50%;
}
.content .title {
    font-family: LTBukra-Bold, sans-serif;
    font-size: 20px;
    line-height: 26px;
    color: #000;
}
.content .txt {
    font-family: LTBukra-Regular, sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #4b4b4b;
    max-width: 90%;
}
.how-work-wrapper-mob {
    display: none;
}
.how-work-wrapper-mobile {
    display: none;
}
.devops-img-div {
    width: 450px;
    height: 450px;
}
.devops-img-div img {
    width: 100%;
    height: 100%;
}
.t1 {
    right: unset;
    left: 110px;
}
.t2 {
    top: 2%;
    right: 70px;
}
.t3 {
    top: 7%;
    left: 20%;
}
.t4 {
    top: 4%;
    right: 0;
}
.mob .t3,
.mob .t4 {
    top: 2%;
}
.mob .t5 {
    top: 2%;
    left: 15%;
}
.mob .t6 {
    top: 2%;
    right: 7%;
}
.mob .t7 {
    top: 2%;
    left: 7%;
}

.arti-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    height: 100%;
    background: #ffffff;
    border-left: 4px solid #fbae2b;
    padding: 24px 24px 74px 24px;
}
.arti-card .title {
    font-family: LTBukra-Bold, sans-serif;
    font-size: 20px;
    line-height: 26px;
    color: #000000;
    margin: 0;
    /* text-transform: capitalize; */
}
.arti-card .text {
    font-family: LTBukra-Regular, sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #4b4b4b;
    margin: 0;
}
.why-nad-img-div,
.ui-ux-img-div {
    width: 536px;
    height: 478px;
    float: right;
}
.why-nad-img-div img,
.ui-ux-img-div img {
    width: 100%;
    height: 100%;
}
.ui-ux-img-div {
    float: left;
}
.ui-ux-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 156px 24px 24px;
    gap: 16px;
    background: #ffffff;
    border: 1px solid #dedede;
    width: 100%;
    height: 100%;
}
.ui-ux-card-img-div {
    position: absolute;
    top: -50px;
}
.ui-ux-card-img-div.mob {
    width: 110px;
    height: 171px;
}
.ui-ux-card-img-div.app {
    width: 172px;
    height: 162px;
}
.ui-ux-card-img-div.web {
    width: 167px;
    height: 155px;
}
.ui-ux-card-img-div.design {
    width: 167px;
    height: 155px;
}
.ui-ux-card-img-div img {
    width: 100%;
    height: 100%;
}
.ui-ux-card-info .title {
    font-family: LTBukra-Bold, sans-serif;
    font-size: 20px;
    line-height: 26px;
    color: #000;
    text-align: center;
    /* text-transform: capitalize; */
}
.ui-ux-card-info .text {
    font-family: LTBukra-Regular, sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #4b4b4b;
    text-align: center;
}
.checklist-wrapper.risk {
    text-align: initial;
    margin-top: 16px;
}
.checklist-wrapper.risk .point-div {
    align-items: start;
}
.technologies-bg {
    background-image: url("../images/bg/circle-bg.svg");
    background-size: inherit;
    background-repeat: no-repeat;
    background-position: top right;
    width: 100%;
    height: 100%;
    padding: 80px 0;
}
.tech-title {
    font-family: LTBukra-Bold, sans-serif;
    font-size: 36px;
    line-height: 48px;
    color: #25245b;
}
.tech-text {
    font-family: LTBukra-Regular, sans-serif;
    font-size: 18px;
    line-height: 27px;
    color: #4b4b4b;
}
.tech-wrapper {
    display: flex;
    gap: 32px;
    max-width: 70%;
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
    float: right;
}
.init{
    max-width: 64%;  
}
.tech-img-div {
    width: 64px;
    height: 64px;
}
.tech-img-div img {
    width: 100%;
    height: auto;
}
.web-dev-img-div {
    width: 461px;
    height: 461px;
}
.web-dev-img-div img {
    width: 100%;
    height: 100%;
}
.web-dev-img-div.right {
    float: right;
}
.mt-sec {
    margin-top: 150px;
}
@media only screen and (min-width: 240px) and (max-width: 767px) {
    .flex-reverse-col {
        flex-direction: column-reverse;
    }
    .devops-img-div {
        width: 350px;
        height: 350px;
        margin: auto;
    }
    .devops-img-div img {
        width: 100%;
        height: 100%;
    }
    .how-work-wrapper.devops {
        display: none;
    }
    .how-work-wrapper-mobile {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .nad-work-div {
        display: flex;
        position: relative;
        gap: 20px;
    }
    .nad-work-img-div {
        max-width: 80px;
        width: 100%;
        height: 80px;
    }
    .nad-work-img-div img {
        width: 100%;
    }
    .web-dev-img-div {
        width: auto;
        height: auto;
    }
    .banner-subtitle {
        font-size: 38px;
        line-height: 50px;
    }
    .ui-ux-card-img-div {
        width: 120px;
        height: 130px !important;
        top: 0;
    }
    .how-work-desc,
    .risk-desc,
    .web-dev-desc {
        max-width: 100%;
    }
    .why-nad-img-div, .ui-ux-img-div{width: 100%;}
    .how-work-wrapper.mob{display: none;}
    .how-work-bg{padding:90px 0 50px 0;}
    .tech-wrapper ,.init{
        width: 100%!important;
        max-width:100%!important;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .flex-reverse-col {
        flex-direction: column-reverse;
    }
    .devops-img-div {
        width: 350px;
        height: 350px;
        margin: auto;
    }
    .devops-img-div img {
        width: 100%;
        height: 100%;
    }
    .portfolio-desc-view-wrapper {
        flex-direction: column;
    }
    .portfolio-desc-view-wrapper p {
        max-width: 1000%;
    }
    .get-in-touch-bg {
        text-align: center;
    }
    .get-in-touch-bg .section-title {
        margin: auto;
    }
    .how-work-wrapper.devops {
        display: none;
    }
    .how-work-wrapper-mobile {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .nad-work-div {
        display: flex;
        position: relative;
        gap: 20px;
    }
    .nad-work-img-div {
        max-width: 80px;
        width: 100%;
        height: 80px;
    }
    .nad-work-img-div img {
        width: 100%;
    }
    .banner-subtitle {
        font-size: 38px;
        line-height: 50px;
    }
    .web-dev-img-div{margin: auto;}
    .web-dev-img-div.right{float: none;}
    .how-work-bg{padding: 90px 0 50px 0;}
    .tech-wrapper ,.init{
        width: 100%!important;
        max-width:100%!important;
    }
}