.client,
.member,
.project {
    text-align: center;
    position: absolute
}

.about-section .about-content,
.loops-img .loops-image {
    position: relative;
    top: 10.125rem
}

.about-section {
    width: auto;
    height: 80vh;
    background: #031421;
    position: relative
}

.about-section .about-content h3 {
    font-family: var(--primaryFont1);
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    color: #737373;
    text-transform: capitalize
}

.about-section .about-content h2 {
    font-family: var(--primaryFont1);
    font-size: 42px;
    font-weight: 300;
    line-height: 50.4px;
    text-align: left;
    color: #fff
}

.about-section .about-content p,
.cards-section p {
    font-family: var(--primaryFont2);
    letter-spacing: .005em
}

.about-section .about-content p {
    font-size: 18px;
    font-weight: 500;
    line-height: 23.15px;
    text-align: left;
    color: #fffFFF99
}

.loops-img .loops-image {
    height: 100vh;
    background-repeat: no-repeat;
    margin-left: 8.169rem
}

.member .counter,
.member .plus {
    font-family: var(--primaryFont1);
    font-size: 33.18px;
    font-weight: 700;
    line-height: 39.81px;
    text-align: center;
    color: #fff
}

.client p,
.member p,
.project p {
    font-family: var(--primaryFont1);
    font-size: 19.91px;
    font-weight: 500;
    line-height: 23.89px;
    text-align: left;
    color: #fff
}

.client .counter,
.client .plus,
.project .counter,
.project .plus {
    font-family: var(--primaryFont1);
    font-size: 33.18px;
    font-weight: 700;
    line-height: 39.81px;
    text-align: left;
    color: #fff
}

.member {
    top: 45px;
    left: 110px
}

.client,
.project {
    top: 187px
}

.project {
    left: 29px
}

.client {
    left: 203px
}

.second-section {
    position: relative;
    top: 5.625rem;
    margin-bottom: 9.625rem
}

.second-section-content {
    position: relative;
    top: 0
}

.second-section-content h3 {
    font-family: var(--primaryFont1);
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    color: #737373
}

.how-we-work .hhw-heading h2,
.second-section-content h2,
.three-blocks h2 {
    font-family: var(--primaryFont1);
    font-size: 42px;
    font-weight: 500;
    line-height: 50.4px;
    text-align: left;
    color: #191919
}

.second-section-content p {
    font-family: var(--primaryFont1);
    font-size: 16px;
    font-weight: 400;
    line-height: 19.2px;
    text-align: left;
    margin-top: 15px;
    color: #5c5c5c
}

.awards h2,
.awards p {
    font-weight: 500;
    font-family: var(--primaryFont1);
    text-align: left
}

.trophy {
    display: flex;
    margin-top: 60px
}

.trophy img {
    width: 86.43px;
    height: 145px
}

.awards {
    margin-left: 2rem
}

.awards h2 {
    font-size: 95px;
    line-height: 153.6px;
    color: #191919;
    margin-top: -35px
}

.awards p {
    font-size: 32px;
    line-height: 38.4px;
    color: #5c5c5c;
    margin-top: -20px;
    margin-left: 15px
}

.brands {
    background: #031421;
    height: auto
}

.brands-slider-btns-x,
.brands-slider-btns-y {
    background: 0 0;
    border: none;
    margin-top: -180px
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center
}

.swiper-slide img {
    object-fit: cover
}

#brandsliderBtns {
    width: 100%;
    display: flex;
    justify-content: space-between
}

.brands-slider-btns-x {
    margin-left: -40px
}

.brands-slider-btns-y {
    margin-right: -30px
}



.left-section {
    background: #1958a4;
    padding: 60px 140px;
    position: relative;
    transition: .2s
}
.left-section:hover{
	background:#154c8f;
}
.right-section-mission {
    transition: .2s;
    background: #1958a4;
    padding: 60px 140px
}

.cards-section h2,
.mission .left-section h2,
.mission .right-section-mission h2 {
    font-family: var(--primaryFont1);
    font-size: 42px;
    font-weight: 500;
    line-height: 50.4px;
    text-align: left;
    color: #fff
}

.mission .left-section p,
.mission .right-section-mission p {
    font-family: var(--primaryFont1);
    font-size: 16px;
    font-weight: 400;
    line-height: 19.2px;
    text-align: left;
    color: #fff;
    margin-top: 20px
}

.three-blocks .three-heading {
    padding: 60px 0 20px
}

.three-blocks {
    background: #f7f7f7
}

.first p,
.heading-five p,
.heading-four p,
.heading-one p,
.heading-three p,
.heading-two p,
.how-we-work .hhw-heading p,
.second p,
.third p,
.three-blocks p {
    font-family: var(--primaryFont1);
    font-size: 16px;
    font-weight: 400;
    line-height: 19.2px;
    text-align: left;
    color: #5c5c5c
}

.first,
.second,
.third {
    background: #fff;
    padding: 30px 22px;
    margin-bottom: 65px;
    transition: .4s
}

.first,
.second {
    border-right: 15px solid #f7f7f7
}

.first h2,
.heading-five h2,
.heading-four h2,
.heading-one h2,
.heading-three h2,
.heading-two h2,
.second h2,
.third h2 {
    font-family: var(--primaryFont1);
    font-size: 24px;
    font-weight: 500;
    line-height: 28.8px;
    text-align: left;
    color: #191919
}

.how-we-work {
    margin-bottom: 80px
}

.how-we-work .hhw-heading {
    padding: 40px 0 20px;
    margin-left: 10px
}

.heading-four,
.heading-one,
.heading-three,
.heading-two {
    margin-bottom: 30px
}

.service-cards {
    background: #031421;
    padding-bottom: 35px
}

.cards-section {
    padding: 80px 0 30px
}

.cards-section p {
    font-family: Quicksand;
    font-size: 18px;
    font-weight: 500;
    line-height: 23.15px;
    text-align: left;
    color: #fffFFF99
}

.fifth-col,
.first-col,
.fourth-col,
.second-col,
.sixth-col,
.third-col {
    background: #fff;
    padding: 40px;
    margin-bottom: 21px
}

.fifth-col img,
.first-col img,
.fourth-col img,
.second-col img,
.sixth-col img,
.third-col img {
    width: 100px;
    height: 100px
}

.fifth-col h2,
.first-col h2,
.fourth-col h2,
.second-col h2,
.sixth-col h2,
.third-col h2 {
    font-family: var(--primaryFont2);
    font-size: 24px;
    font-weight: 500;
    line-height: 28.8px;
    text-align: center;
    color: #191919;
    margin-top: 20px
}

.fifth-col p,
.first-col p,
.fourth-col p,
.second-col p,
.sixth-col p,
.third-col p {
    font-family: var(--primaryFont1);
    font-size: 16px;
    font-weight: 400;
    line-height: 19.2px;
    text-align: center;
    color: #5c5c5c
}

.center-div {
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto
}



.what-we-do-about p {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 7em;
    transition: .9s
}

.what-we-do-about:hover p {
    -webkit-line-clamp: 40;
    max-height: 40em
}

.what-we-do-about:hover img {
    transform: scale(1.1);
    transition: .2s
}

.left-section::before,
.right-section-mission::after {
    content: "";
    position: absolute;
    -webkit-box-shadow: 0 15px 10px #777;
    -moz-box-shadow: 0 15px 10px #777;
    box-shadow: 0 15px 10px #777;
    height: 26px;
    width: 296px;
    z-index: -1;
    bottom: 11px;
    opacity: 0;
    transition: .5s
}

.left-section::before {
    left: 0
}

.right-section-mission::after {
    right: 0
}

@media screen and (max-width:576px) {
    .about-section {
        width: auto;
        background: #031421;
        position: relative;
        height: 59rem
    }
    .loops-img .loops-image {
        background-size: contain;
        top: 12.125rem;
        margin-left: .169rem
    }
    .member .counter,
    .member .plus {
        font-size: 28.18px
    }
    .member p {
        font-size: 15.91px
    }
    .client .counter,
    .client .plus,
    .project .counter,
    .project .plus {
        font-size: 26.18px
    }
    .project p {
        font-size: 13.91px
    }
    .client p {
        font-size: 16.91px
    }
    .about-section .about-content h2 {
        font-size: 26px;
        text-align: center;
        line-height: normal
    }

    .left-section,
    .right-section-mission {
        padding: 40px 25px
    }
    .mt-top {
        margin-top: 30px
    }
    .awards h2 {
        font-size: 60px
    }
    .awards p {
        font-size: 20px
    }
    .cards-section h2 {
        font-size: 40px
    }
    .cards-section p {
        font-family: var(--primaryFont2);
        font-size: 16px
    }

    .how-we-work {
        overflow: hidden !important
    }
    .project {
        left: 31px
    }
}

@media screen and (min-width:577px) and (max-width:767px) {
    .about-section .about-content h2 {
        font-size: 32px
    }

    .loops-img .loops-image {
        top: 13.125rem;
        margin-left: -.831rem
    }
    .left-section {
        padding: 50px 60px
    }
    .right-section-mission {
        padding: 50px
    }
    .mt-top {
        margin-top: 40px
    }
    .fifth-col,
    .first-col,
    .fourth-col,
    .second-col,
    .sixth-col,
    .third-col {
        border-right: none;
        border-bottom: none;
        margin-bottom: 15px
    }

    .about-section {
        height: 800px
    }
}

@media screen and (min-width:768px) and (max-width:991px) {
    .about-section .about-content h2 {
        font-size: 40px;
        width: auto
    }
    .second-section-content {
        top: 20px
    }
    .second-section-content h2 {
        font-size: 38px
    }
    .second-section-content p {
        font-size: 13px
    }
    .trophy {
        display: flex
    }
    .awards p {
        font-size: 20px !important;
        margin-left: 10px
    }
    .left-section,
    .right-section-mission {
        padding: 25px 75px
    }
  
    .extra-height-more {
        height: 690px;
        width: 100%;
        object-fit: contain;
        margin-bottom: 20px
    }
}

@media screen and (min-width:992px) and (max-width:1200px) {
    .loops-img .loops-image {
        margin-left: 5.169rem
    }
    .about-section {
        height: 100vh
    }
    .second-section-content {
        top: -.75rem
    }
    .trophy {
        margin-top: 30px
    }
    .left-section,
    .right-section-mission {
        padding: 30px 100px
    }

}

@media screen and (min-width:1201px) and (max-width:1399px) {
    .about-section {
        height: 90vh
    }
    .left-section {
        padding: 60px 110px
    }

}

@media screen and (max-width:1024px) {
    .how-we-work .hhw-heading h2,
    .second-section-content h2,
    .three-blocks h2 {
        font-size: 36px;
        line-height: 40px
    }
    .awards h2 {
        font-size: 68px;
        line-height: 92.6px;
        margin-top: 6px
    }
    .fifth-col img,
    .first-col img,
    .fourth-col img,
    .second-col img,
    .sixth-col img,
    .third-col img {
        width: 90px;
        height: 90px
    }
}

@media screen and (max-width:991px) {
    .first,
    .second,
    .third {
        margin-bottom: 65px
    }
    .cards-section h2,
    .mission .left-section h2,
    .mission .right-section-mission h2 {
        font-size: 32px;
        line-height: 38px
    }
    .about-section {
        height: auto
    }
    .about-section .about-content,
    .loops-img .loops-image {
        top: auto;
        margin-bottom: 33px
    }
    .loops-img .loops-image {
        height: 364px;
        width: 354px;
        margin: auto;
        top: 30px
    }
    .trophy {
        margin: auto;
        width: 100%;
        max-width: 300px
    }
}

@media screen and (max-width:540px) {
    .second-section-content {
        margin-top: 18px
    }
    .how-we-work .hhw-heading h2,
    .three-blocks h2 {
        font-size: 26px;
        line-height: normal
    }
    .cards-section,
    .three-blocks .three-heading {
        padding: 40px 13px 8px
    }
    .first,
    .second,
    .third {
        margin-bottom: 16px
    }
}

@media screen and (max-width:414px) {
    .member {
        top: 24px;
        left: 85px
    }
    .project {
        left: 31px;
        top: 146px
    }
    .client {
        left: 144px;
        top: 136px
    }
    .loops-img .loops-image {
        height: 305px;
        width: 253px;
        background-size: contain;
        margin-top: 43px
    }
}