a:hover {
    text-decoration: none;
}
.banner figure figcaption p {
    font: 25px/38px "SF Pro Display" !important;
    color: #fff;
    margin-bottom: 0;
    font-style: italic !important;
    text-shadow: #00000047 2px 2px 2px;
}
.banner figure figcaption p span {
    font-family: SFProDisplay-Bold;
    margin-right: 2px;
}
.brand-story-box {
    padding: 30px 0;
    border-bottom: 1px solid #e1e1e1;
}
.brand-story.approaches .brand-box .brand-story-image::after {
    display: none;
}
.brand-story.approaches .brand-box .brand-story-cont h3 {
    padding-bottom: 0;
    margin-bottom: 20px;
    font: 20px/20px SFProDisplay-Bold;
}
.brand-story.approaches .brand-box .brand-story-cont img {
    margin-bottom: 20px;
}
.we-build {
    background: url(../images/background-lines.png) 0 0 no-repeat;
    background-size: cover;
    padding: 75px 0 !important;
    position: relative;
    margin-bottom: 100px;
}
.we-build img {
    margin: 0 auto;
    display: block;
}
.banner.margin-bottom {
    margin-bottom: 70px;
}
.we-build-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    text-align: center;
    padding-top: 80px;
}
.inner-box {
    width: 24%;
    display: inline-block;
    text-align: left;
}
.we-build-inner h2 {
    font: 100px/80px SFProDisplay-Bold;
    margin-bottom: 35px;
}
.we-build-inner p {
    font: 20px/20px "SF Pro Display";
    color: #47464f;
    margin-bottom: 40px;
}
.inner-box h4 {
    font: 20px/20px SFProDisplay-Bold;
    color: #1c2227;
    padding: 0;
    margin: 0 0 25px 0;
}
.inner-box img {
    margin-bottom: 35px;
    margin-left: 0;
}
.we-build:before {
    position: absolute;
    content: "";
    background: url(../images/orangebuttonline.png) 0 0 no-repeat;
    top: -125px;
    right: 0;
    margin: 0 auto;
    width: 52px;
    height: 200px;
    left: 0;
}
.we-build:after {
    position: absolute;
    content: "";
    background: url(../images/orangebuttonline.png) 0 0 no-repeat;
    top: auto;
    right: 0;
    margin: 0 auto;
    width: 52px;
    height: 415px;
    left: 0;
    bottom: -310px;
    z-index: 9999;
}
.test-box.testi img {
    margin-bottom: 35px;
}
.date-category-red {
    color: #022a5e;
    font: 14px/14px SFProDisplay-Bold;
    text-transform: uppercase;
}
.date-category {
    color: #022a5e;
    font: 14px/14px SFProDisplay-Bold;
    text-transform: uppercase;
    padding-bottom: 18px;
}
.banner figure figcaption p.grey {
    color: #586270;
}
.committed_people.how-we-are-built {
    background: url(../images/how-we-are-built-background.jpg) 0 0 no-repeat;
    background-size: cover;
}
.committed_people.how-we-are-built p {
    color: #fff;
}
.committed_people.how-we-are-built .circle {
    background: 0 0;
    border-radius: 100%;
}
.committed_people.how-we-are-built .circle figure {
    border: 1px solid #f1f1f136;
    padding: 15px;
    border-radius: 50%;
}
.committed_people.how-we-are-built .circle figure img {
    width: 100%;
}
.committed_people.how-we-are-built .circle-1 {
    top: 10px;
}
.committed_people.how-we-are-built .circle-5 {
    top: 10px;
}
.committed_people.how-we-are-built .circle-7 {
    bottom: 5px;
}
.committed_people.how-we-are-built .circle-9 {
    bottom: 5px;
}
.how-we-help {
    padding: 65px 0 !important;
    float: left;
    width: 100%;
    border-bottom: 1px solid #e9e9e9;
}
.how-we-help-left {
    float: left;
    width: 40%;
    display: inline-block;
    padding-right: 70px;
}
.how-we-help-right {
    float: left;
    width: 60%;
    display: inline-block;
    margin-bottom: 0;
}
.how-we-help-right p {
    color: #56606e;
    font: 17px/26px "SF Pro Display";
}
.layer-image img {
    width: 100%;
}
.partner-with {
    float: left;
    width: 100%;
    padding: 70px 0 !important;
    border-top: 1px solid #e9e9e9;
}
.partner {
    width: 85%;
    margin: 0 auto;
}
.partner-left {
    float: left;
    width: 55%;
    display: inline-block;
    position: relative;
}
.partner-left:before {
    position: absolute;
    content: "";
    width: 5px;
    height: 75px;
    background: url(../images/gradient-partner.jpg) 0 0 no-repeat;
    top: 0;
    left: -30px;
}
.partner-left p {
    color: #022a5e;
    font: 30px/38px "SF Pro Display";
}
.partner-right {
    float: right;
    width: 45%;
    display: inline-block;
}
.partner-right a.free-estimate {
    padding: 10px 45px 10px 45px;
    margin-top: 0;
}
.partner-right a.free-estimate:after {
    position: absolute;
    display: block;
    content: "";
    width: 16px;
    height: 16px;
    top: 12px;
    left: 23px;
    z-index: -1;
    pointer-events: none;
    background-color: transparent;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: inset 0 0 0 4px #f13e42;
    box-shadow: inset 0 0 0 4px #f13e42;
    z-index: 9;
}
.partner-right a.contact-number {
    font: 14px/20px SFProDisplay-Bold;
    color: #022a5e;
    background: #023575;
    display: inline-block;
    position: relative;
    margin-right: 8px;
    margin-top: 0;
    text-transform: uppercase;
    border-radius: 40px;
    text-decoration: none;
    color: #fff !important;
    padding: 11px 20px 10px 45px;
    overflow: inherit;
}
.partner-right a {
    font: 14px/20px SFProDisplay-Bold;
    color: #022a5e;
    background: #023575;
    display: inline-block;
    position: relative;
    margin-right: 8px;
    margin-top: 15px;
    text-transform: uppercase;
    border-radius: 40px;
    text-decoration: none;
    color: #fff !important;
    padding: 10px 20px 10px 20px;
    overflow: inherit;
}
.partner-right a:hover {
    background: #023575;
}
.partner-right a:before,
.partner-right a:hover:before {
    left: 23px;
}
.partner-right a.hire-developer {
    background: #f13e42;
    vertical-align: top;
    margin-top: 0;
}
.project-left.services-left {
    width: 60%;
}
.project-left.services-right {
    width: 40%;
}
.project-left.services-left .box span {
    position: relative;
    display: inline-block;
    color: #fff;
}
.project-left.services-left .box span:before {
    background: #f13e42;
    position: absolute;
    content: "";
    display: block;
    left: -30px;
    top: 40%;
    width: 20px;
    height: 3px;
}
.project-left.services-left:after {
    display: none;
}
.how-we-work {
    float: left;
    width: 100%;
    padding: 70px 0 80px !important;
    border-bottom: 1px solid #e5e5e6;
}
.how-we-works h3 {
    color: #022a5e;
}
.how-we-works h4 {
    font: 35px/35px SFProDisplay-Bold;
    color: #022a5e;
}
.how-we-works {
    margin-bottom: 30px;
}
.workflow {
    clear: left;
}
#myTabContent .tab-inner h4 {
    font: 25px/35px SFProDisplay-Bold;
    margin: 0 0 20px;
    color: #022a5e;
}
#myTabContent .tab-inner p {
    font: 17px/27px "SF Pro Display";
    margin: 0 0 20px;
    color: #7c8085;
    width: 630px;
}
#myTabContent .tab-inner span {
    font: 15px/27px "SF Pro Display";
    margin: 0 0 40px;
    color: #7c8085;
    display: inline-block;
    width: 630px;
}
.phase-boxes h5 {
    color: #022a5e;
    font: 16px/20px SFProDisplay-Bold;
    text-transform: uppercase;
    margin-bottom: 30px;
}
.phase-boxes .box {
    vertical-align: top;
    display: inline-block;
    width: 22%;
    height: 104px;
    margin-bottom: 20px;
    margin-right: 20px;
    -webkit-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.15);
    position: relative;
}
.phase-boxes .box a {
    display: inline-block;
    width: 100%;
}
.phase-boxes .box a:hover {
    text-decoration: none;
}
.phase-boxes .box span {
    font: 15px/20px "SF Pro Display";
    display: inline-block;
    color: #56606e;
}
.work-tab #myTab .nav-link {
    border: none !important;
    color: #010101;
    font: 15px/20px "SF Pro Display";
    text-transform: uppercase;
    letter-spacing: 1px;
    height: 66px;
    align-items: center;
    display: flex;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.work-tab #myTab .nav-link.active {
    border: none !important;
}
.work-tab #myTab li {
    margin-right: 64px;
    position: relative;
}
.work-tab #myTab li.nav-item.item1 .outer {
    background: #61308f;
    -webkit-box-shadow: 0 4px 6px rgba(255, 183, 46, 0.16);
    box-shadow: 0 4px 6px rgba(255, 183, 46, 0.16);
}
.work-tab #myTab li.nav-item .inner {
    opacity: 0;
    width: 28px;
    height: 28px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 100px;
    border: 2px solid transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    -webkit-transition: all ease-in-out 0.2s;
    -o-transition: all ease-in-out 0.2s;
    transition: all ease-in-out 0.2s;
}
#myTab {
    border-bottom: none;
    height: 142px;
}
.work-tab #myTab li.nav-item .active .inner {
    opacity: 1;
}
.work-tab #myTab li.nav-item.item1 .inner {
    border-color: rgba(128, 75, 178, 0.97);
}
.work-tab #myTab li.nav-item.item2 .outer {
    background: #ee2d27;
    -webkit-box-shadow: 0 4px 6px rgba(255, 42, 109, 0.16);
    box-shadow: 0 4px 6px rgba(255, 42, 109, 0.16);
}
.work-tab #myTab li.nav-item.item2 .inner {
    border-color: #ee2d278a;
}
.work-tab #myTab li.nav-item.item3 .outer {
    background: #46ac48;
    -webkit-box-shadow: 0 4px 6px rgba(195, 53, 196, 0.16);
    box-shadow: 0 4px 6px rgba(195, 53, 196, 0.16);
}
.work-tab #myTab li.nav-item.item3 .inner {
    border-color: #46ac488c;
}
.work-tab #myTab li.nav-item.item4 .outer {
    background: #ffe500;
    -webkit-box-shadow: 0 4px 6px rgba(104, 140, 237, 0.16);
    box-shadow: 0 4px 6px rgba(104, 140, 237, 0.16);
}
.work-tab #myTab li.nav-item.item4 .inner {
    border-color: #ffe50069;
}
.work-tab #myTab li.nav-item.item5 .outer {
    background: #e01669;
    -webkit-box-shadow: 0 4px 6px rgba(91, 177, 237, 0.16);
    box-shadow: 0 4px 6px rgba(91, 177, 237, 0.16);
}
.work-tab #myTab li.nav-item.item5 .inner {
    border-color: #e0166994;
}
.work-tab #myTab li.nav-item.item6 .outer {
    background: #9bc43c;
    -webkit-box-shadow: 0 4px 6px rgba(80, 193, 211, 0.16);
    box-shadow: 0 4px 6px rgba(80, 193, 211, 0.16);
}
.work-tab #myTab li.nav-item.item6 .inner {
    border-color: #9bc43c7d;
}
.work-tab #myTab li .outer {
    display: inline-block;
    position: absolute;
    top: -46px;
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 26px;
    width: 26px;
    content: "";
    border-radius: 50%;
    background: #fff;
    background-position: 0 0, 0 0;
    background-repeat: no-repeat;
    background-size: 0 0;
}
.work-tab #myTab li .outer:after,
.work-tab #myTab li .outer:before {
    background: #fff;
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 100px;
    -webkit-transition: all ease-in-out 0.2s;
    -o-transition: all ease-in-out 0.2s;
    transition: all ease-in-out 0.2s;
}
.work-tab #myTab li .outer:after {
    width: 4px;
    height: 4px;
    background-color: #000;
}
.work-tab #myTab li .outer:before {
    width: 22px;
    height: 22px;
    background-color: #fff;
}
.work-tab #myTab li .outer .work-tab .nav-tabs {
    border-bottom: none;
    padding: 0 35px;
}
.work-tab {
    position: relative;
}
.work-tab:before {
    content: "";
    background: url(../images/color-line.png) 0 0 no-repeat;
    height: 2px;
    width: 100%;
    top: 41px;
    left: 0;
    position: absolute;
    background-size: cover;
}
.work-tab #myTab li.nav-item .active .outer {
    top: -55px;
    height: 36px;
    width: 36px;
}
.work-tab #myTab li.nav-item .active .outer:before {
    width: 32px;
    height: 32px;
}
#myTabContent .tab-pane {
    padding-top: 70px;
}
#myTabContent #discovery {
    position: relative;
    background: -webkit-linear-gradient(top, #61308f1c 0, #fff 200px);
    background: -o-linear-gradient(top, #61308f1c 0, #fff 200px);
    background: linear-gradient(180deg, #61308f1c 0, #fff 200px);
}
#myTabContent #strategy {
    position: relative;
    background: -webkit-linear-gradient(top, #ee2d271f 0, #fff 200px);
    background: -o-linear-gradient(top, #ee2d271f 0, #fff 200px);
    background: linear-gradient(180deg, #ee2d271f 0, #fff 200px);
}
#myTabContent #concept {
    position: relative;
    background: -webkit-linear-gradient(top, #46ac482e 0, #fff 200px);
    background: -o-linear-gradient(top, #46ac482e 0, #fff 200px);
    background: linear-gradient(180deg, #46ac482e 0, #fff 200px);
}
#myTabContent #design {
    position: relative;
    background: -webkit-linear-gradient(top, #ffe50017 0, #fff 200px);
    background: -o-linear-gradient(top, #ffe50017 0, #fff 200px);
    background: linear-gradient(180deg, #ffe50017 0, #fff 200px);
}
#myTabContent #development {
    position: relative;
    background: -webkit-linear-gradient(top, #e0166912 0, #fff 200px);
    background: -o-linear-gradient(top, #e0166912 0, #fff 200px);
    background: linear-gradient(180deg, #e0166912 0, #fff 200px);
}
#myTabContent #optimization {
    position: relative;
    background: -webkit-linear-gradient(top, #9bc43c2e 0, #fff 200px);
    background: -o-linear-gradient(top, #9bc43c2e 0, #fff 200px);
    background: linear-gradient(180deg, #9bc43c2e 0, #fff 200px);
}
.work-tab #myTab li.nav-item.item1 .active {
    color: #61308f;
    background: #61308f1c;
}
.work-tab #myTab li.nav-item .active .outer::after {
    width: 10px;
    height: 10px;
}
.work-tab #myTab li.nav-item.item1 .active .outer::after {
    background: #61308f;
}
.work-tab #myTab li.nav-item.item2 .active .outer::after {
    background: #ee2d27;
}
.work-tab #myTab li.nav-item.item3 .active .outer::after {
    background: #46ac48;
}
.work-tab #myTab li.nav-item.item4 .active .outer::after {
    background: #ffe500;
}
.work-tab #myTab li.nav-item.item5 .active .outer::after {
    background: #e01669;
}
.work-tab #myTab li.nav-item.item6 .active .outer::after {
    background: -webkit-linear-gradient(315deg, #66bcf0 0, #3cc5b9 100%);
    background: -o-linear-gradient(315deg, #66bcf0 0, #3cc5b9 100%);
    background: linear-gradient(135deg, #66bcf0 0, #3cc5b9 100%);
}
.work-tab #myTab li.nav-item.item2 .active {
    color: #ee2d278a;
    background: #ee2d271f;
}
.work-tab #myTab li.nav-item.item3 .active {
    color: #46ac488c;
    background: #46ac482e;
}
.work-tab #myTab li.nav-item.item4 .active {
    color: #ffe500e3;
    background: #ffe50017;
}
.work-tab #myTab li.nav-item.item5 .active {
    color: #e0166994;
    background: #e0166912;
}
.work-tab #myTab li.nav-item.item6 .active {
    color: #9bc43c7d;
    background: #9bc43c2e;
}
.work-tab #myTab li.nav-item {
    height: 66px;
    font-size: 12px;
    line-height: 16px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1.4px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    margin: 0 30px;
    position: relative;
    margin-top: 76px;
}
.c-nav-services__decor {
    display: none;
    width: 25px;
    height: 25px;
    position: absolute;
    bottom: 0;
}
.c-nav-services__decor--left {
    left: -25px;
}
.work-tab #myTab li.nav-item.item1 .c-nav-services__decor {
    background: #61308f1c;
}
.work-tab #myTab li.nav-item.item2 .c-nav-services__decor {
    background: #ee2d271f;
}
.work-tab #myTab li.nav-item.item3 .c-nav-services__decor {
    background: #46ac482e;
}
.work-tab #myTab li.nav-item.item4 .c-nav-services__decor {
    background: #ffe50017;
}
.work-tab #myTab li.nav-item.item5 .c-nav-services__decor {
    background: #e0166912;
}
.work-tab #myTab li.nav-item.item6 .c-nav-services__decor {
    background: #9bc43c2e;
}
.work-tab #myTab li.nav-item .active .c-nav-services__decor {
    display: block !important;
}
.c-nav-services__decor--left::before {
    left: -26px;
}
.c-nav-services__decor::before {
    width: 50px;
    height: 50px;
    content: "";
    position: absolute;
    border-radius: 100px;
    bottom: 0;
    background: #fff;
}
.c-phase-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 30px;
    background-color: #fff;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    -webkit-transition: all ease-in-out 0.2s;
    -o-transition: all ease-in-out 0.2s;
    transition: all ease-in-out 0.2s;
}
.c-nav-services__decor--right {
    right: -25px;
}
.c-nav-services__decor--right::before {
    right: -26px;
}
.c-phase-link__label {
    display: inline-block;
    width: 100%;
    color: #aaacb3;
    position: relative;
    -webkit-transition: all ease-in-out 0.2s;
    -o-transition: all ease-in-out 0.2s;
    transition: all ease-in-out 0.2s;
    padding-right: 35px;
    text-transform: uppercase;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0;
    font: 15px/20px "SF Pro Display" !important;
    width: 100% !important;
    margin: 0 !important;
}
.c-phase-link__decor--top {
    background: -webkit-gradient(linear, left top, right top, from(#ffe25d), to(#ffb92f));
    background: -webkit-linear-gradient(left, #ffe25d 0, #ffb92f 100%);
    background: -o-linear-gradient(left, #ffe25d 0, #ffb92f 100%);
    background: linear-gradient(to right, #ffe25d 0, #ffb92f 100%);
}
.c-phase-link__decor--top {
    top: 0;
    left: 0;
    -webkit-transition: width 0.1s ease-in-out 0.2s;
    -o-transition: width 0.1s ease-in-out 0.2s;
    transition: width 0.1s ease-in-out 0.2s;
}
.c-phase-link__decor--bottom,
.c-phase-link__decor--top {
    width: 0;
    height: 2px;
}
.c-phase-link__decor {
    position: absolute;
}
.c-phase-link__decor--right {
    background: -webkit-gradient(linear, left top, left bottom, from(#ffb92f), to(#ff8e00));
    background: -webkit-linear-gradient(top, #ffb92f 0, #ff8e00 100%);
    background: -o-linear-gradient(top, #ffb92f 0, #ff8e00 100%);
    background: linear-gradient(180deg, #ffb92f 0, #ff8e00 100%);
}
.c-phase-link__decor--right {
    top: 0;
    right: 0;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: -webkit-transform 0.1s ease-in-out 0.1s;
    transition: -webkit-transform 0.1s ease-in-out 0.1s;
    -o-transition: transform 0.1s ease-in-out 0.1s;
    transition: transform 0.1s ease-in-out 0.1s;
    transition: transform 0.1s ease-in-out 0.1s, -webkit-transform 0.1s ease-in-out 0.1s;
}
.c-phase-link__decor--left,
.c-phase-link__decor--right {
    width: 2px;
    height: 100%;
}
.c-phase-link__decor--bottom {
    background: -webkit-gradient(linear, right top, left top, from(#ff8e00), to(#ffb92f));
    background: -webkit-linear-gradient(right, #ff8e00 0, #ffb92f 100%);
    background: -o-linear-gradient(right, #ff8e00 0, #ffb92f 100%);
    background: linear-gradient(to left, #ff8e00 0, #ffb92f 100%);
}
.c-phase-link__decor--bottom {
    right: 0;
    bottom: 0;
    -webkit-transition: width 0.1s ease-in-out 0.1s;
    -o-transition: width 0.1s ease-in-out 0.1s;
    transition: width 0.1s ease-in-out 0.1s;
}
.c-phase-link__decor--bottom,
.c-phase-link__decor--top {
    width: 0;
    height: 2px;
}
.c-phase-link__decor--left {
    background: -webkit-gradient(linear, left top, left bottom, from(#ffe25d), to(#ffb92f));
    background: -webkit-linear-gradient(top, #ffe25d 0, #ffb92f 100%);
    background: -o-linear-gradient(top, #ffe25d 0, #ffb92f 100%);
    background: linear-gradient(180deg, #ffe25d 0, #ffb92f 100%);
}
.c-phase-link__decor--left {
    bottom: 0;
    left: 0;
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: -webkit-transform 0.1s ease-in-out;
    transition: -webkit-transform 0.1s ease-in-out;
    -o-transition: transform 0.1s ease-in-out;
    transition: transform 0.1s ease-in-out;
    transition: transform 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out;
}
.c-phase-link:hover {
    opacity: 1;
}
.c-phase-link__decor--left,
.c-phase-link__decor--right {
    width: 2px;
    height: 100%;
}
.c-phase-link:hover .c-phase-link__decor--top {
    width: 100%;
    -webkit-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
}
.c-phase-link:hover .c-phase-link__label {
    color: #000 !important;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
}
.c-phase-link:hover .c-phase-link__decor--right {
    height: 100%;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: -webkit-transform 1s ease-in-out 1s;
    transition: -webkit-transform 1s ease-in-out 1s;
    -o-transition: transform 1s ease-in-out 1s;
    transition: transform 1s ease-in-out 1s;
    transition: transform 1s ease-in-out 1s, -webkit-transform 1s ease-in-out 1s;
}
.c-phase-link:hover .c-phase-link__decor--bottom {
    width: 100%;
    -webkit-transition: width 1s ease-in-out 2s;
    -o-transition: width 1s ease-in-out 2s;
    transition: width 1s ease-in-out 2s;
}
.c-phase-link:hover .c-phase-link__decor--left {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: -webkit-transform 1s ease-in-out 3s;
    transition: -webkit-transform 1s ease-in-out 3s;
    -o-transition: transform 1s ease-in-out 3s;
    transition: transform 1s ease-in-out 3s;
    transition: transform 1s ease-in-out 3s, -webkit-transform 1s ease-in-out 3s;
}
.accordion .card-header:after {
    font-family: FontAwesome;
    content: "";
    float: right;
}
.accordion .card-header.collapsed:after {
    content: "";
    background: url(../images/accordtion-arrow2.png) no-repeat;
}
#accordion .panel {
    width: 100%;
}
.services_accordian .card {
    background: 0 0;
    border: transparent;
}
.services_accordian .card-header {
    background-color: transparent;
    border-bottom: transparent;
    padding: 25px 5px 25px 30px;
}
.services_accordian .card-body {
    padding: 0;
}
.services_accordian .accordian-item {
    border-bottom: 1px solid #383841;
    position: relative;
}
.services_accordian .card-header:after {
    color: #fff;
    background: url(../images/accordtion-arrow1.png) no-repeat;
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 50%;
    line-height: 31px;
    position: absolute;
    display: block;
    cursor: pointer;
    right: 0;
    top: 22px;
}
.project-left .services_accordian .card-title {
    font: 19px/19px "SF Pro Display";
    text-transform: inherit;
    color: #fff;
    display: block;
    position: relative;
    margin-bottom: 0;
}
.project-left.services-left .box h2 {
    margin-bottom: 45px;
}
.project-left .services_accordian .card-title:hover {
    color: #fff;
}
.project-left .services_accordian .card-body p {
    font: 17px/27px "SF Pro Display";
    color: #b3b3b4;
    padding: 0 20px 20px 30px;
}
.project-left .services_accordian {
    border-top: 1px solid #383841;
}
.acordion__gradient {
    bottom: 0;
    left: 0;
    height: 0;
    position: absolute;
    top: 0;
    transition: height 0.3s;
    width: 3px;
}
.gradient1--vertical {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#a55ccb), to(#0a46cf));
    background-image: linear-gradient(180deg, #a55ccb 0, #0a46cf 100%);
}
.gradient2--vertical {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#e99019), to(#e62f4a));
    background-image: linear-gradient(180deg, #e99019 0, #e62f4a 100%);
}
.gradient3--vertical {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#e62f4a), to(#73136e));
    background-image: linear-gradient(180deg, #e62f4a 0, #73136e 100%);
}
.gradient4--vertical {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ddd005), to(#23870a));
    background-image: linear-gradient(180deg, #ddd005 0, #23870a 100%);
}
.project-left .services_accordian .card-body.show .acordion__gradient {
    height: 100%;
}
.services_accordian .card-header + .acordion__gradient {
    height: 100%;
}
.services_accordian .card-header.collapsed + .acordion__gradient {
    height: 0;
}
.project.project_accordian .project-left .box {
    width: 85%;
}
#testimonial.testi-monial {
    padding: 65px 0 65px !important;
    border-bottom: 1px solid #e5e5e5;
}
#workflowanimation_hype_container {
    margin: auto;
    position: relative;
    width: 100% !important;
    height: 600px;
    overflow: hidden;
}
.workflow-illustration #hype-scene-LZ4TIIMFHCMBC7N3ILUI {
    width: 100% !important;
    margin: 0 auto !important;
    display: block !important;
}
.workflow-illustration #hype-obj-I2WY9Y4HZEIK2KPTDRVM {
    width: 100% !important;
    margin: 0 auto !important;
    display: block !important;
}
.workflow .container {
    width: 1440px;
}
.workflow-image {
    display: none;
}
.seo-banner.banner figure figcaption h1 {
    text-transform: initial !important;
}
h3.sec-main-head.seo {
    color: #53a4f4;
}
.how-we-help.seo .how-we-help-left {
    width: 45%;
    padding-right: 70px;
}
.how-we-help.seo .how-we-help-right {
    width: 55%;
}
.project .project-right.project-right-digital {
    background: 0 0;
}
.project-right.project-right-digital {
    background: #023575;
    margin-bottom: 0;
    background: -moz-linear-gradient(45deg, #023575 0, teal 100%);
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0, #023575), color-stop(100%, teal));
    background: -webkit-linear-gradient(45deg, #023575 0, teal 100%);
    background: -o-linear-gradient(45deg, #023575 0, teal 100%);
    background: -ms-linear-gradient(45deg, #023575 0, teal 100%);
    background: linear-gradient(45deg, #023575 0, teal 100%);
}
.score-board {
    background: #f13e42;
    height: 120px;
    width: 120px;
    color: #fff;
    border-radius: 50%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}
.score-board span {
    width: 100%;
    text-align: center;
    font: 32px/30px SFProDisplay-Bold;
}
.score-board p {
    font: 16px/20px SFProDisplay-Bold;
    margin-bottom: 5px;
}
.top-brands-image img {
    width: 100%;
}
.top-brands-image {
    float: left;
    width: 100%;
}
.top-brands-left h2.sec-main-head {
    margin: 0 0 25px 0;
}
.top-brands {
    float: left;
    width: 100%;
    padding-bottom: 130px !important;
    border-bottom: 1px solid #d3d6db;
}
.top-brands-box {
    padding: 80px 110px 55px 100px;
    width: 50%;
    background: #fff;
    -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.14);
    -moz-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.14);
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.14);
}
.top-brands-left {
    float: left;
    margin-top: -170px;
    display: inline-block;
}
.top-brands-left p {
    color: #596370;
    font: 17px/27px "SF Pro Display";
}
.top-brands-left ul li {
    color: #596370;
    font: 18px/28px "SF Pro Display";
    margin-bottom: 15px;
}
.top-brands-right {
    margin-top: -270px;
    margin-left: -65px;
    display: inline-block;
    padding: 70px 50px 70px 100px;
}
.brands-list figure {
    float: left;
    width: 50%;
    margin-bottom: 100px;
}
.brands-list figure:nth-child(5) {
    margin-bottom: 0;
}
.brands-list figure:nth-child(6) {
    margin-bottom: 0;
}
.inner.boxes {
    float: left;
    width: 100%;
    margin-top: 35px;
}
.inner.boxes.influencer .seo.inner-box h4 {
    min-height: 70px;
}
.how-we-help.seo {
    border-bottom: none;
}
.how-we-help.seo .how-we-help-right p {
    color: #56606e;
    font: 17px/27px "SF Pro Display";
}
.how-we-help.seo .how-we-help-right {
    margin-bottom: 35px;
    padding-top: 35px;
}
.branding_design_service.seo-services ul li figure {
    width: auto;
    float: left;
    margin-bottom: 60px;
}
.branding_design_service.seo-services {
    background: #f8f8fa;
    padding: 75px 0 120px !important;
}
.branding_design_service.seo-services ul li {
    transition: all ease 0.5s;
    position: relative;
}
.branding_design_service.seo-services ul li .cont-box {
    padding-left: 0;
    position: relative;
    z-index: 1;
}
.branding_design_service.seo-services ul li:nth-child(odd) {
    border-left: 1px solid #d9d9dd;
    border-right: 1px solid #d9d9dd;
}
.branding_design_service.seo-services ul li:nth-child(even) {
    border-right: 1px solid #d9d9dd;
}
.branding_design_service.seo-services ul li.animated {
    animation-fill-mode: none;
    -webkit-animation-fill-mode: none;
}
.branding_design_service.seo-services ul li:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: 0 0;
    transition: all ease 0.5s;
    z-index: 1;
}
.branding_design_service.seo-services ul li:hover:before {
    background: linear-gradient(to right, rgb(60, 103, 171) 0%, rgb(6 138 207) 100%);
    transform: scale(1.04) !important;
}
.branding_design_service.seo-services ul li:hover .cont-box h4 {
    color: #fff;
    transition: all ease 0.5s;
}
.branding_design_service.seo-services ul li:hover .cont-box p {
    color: #fff;
    transition: all ease 0.5s;
}
.branding_design_service.seo-services ul {
    border-top: 1px solid #d9d9dd;
    float: left;
    display: flex;
    flex-wrap: wrap;
    background: #fff;
}
.seo.inner-box h4 {
    font: 20px/26px SFProDisplay-Bold;
    color: #023575;
    margin: 0;
    padding-bottom: 15px;
}
.seo.inner-box {
    padding: 0 25px 0 0;
    vertical-align: top;
}
.seo.inner-box p {
    color: #56606e;
    font: 17px/27px "SF Pro Display";
}
.branding_design_service.seo-services ul li .cont-box p {
    color: #56606e;
    font: 17px/27px "SF Pro Display";
    min-height: 125px;
}
.branding_design_service.seo-services ul li .cont-box h4 {
    font: 20px/26px SFProDisplay-Bold;
    clear: left;
    margin: 0;
    padding-bottom: 15px;
}
.branding_design_service.seo-services.seo-extra ul li .cont-box h4 {
    font: 20px/26px SFProDisplay-Bold;
    clear: left;
    margin: 0;
    padding-bottom: 35px;
    position: relative;
}
.branding_design_service.seo-services.seo-extra ul li .cont-box h4:before {
    background: #f13e42;
    position: absolute;
    content: "";
    display: block;
    left: 0;
    bottom: 15px;
    width: 20px;
    height: 3px;
}
.seo-latest-stories h3.sec-main-head {
    letter-spacing: 0;
}
.branding_design_service.seo-services ul li figure {
    position: relative;
    height: 110px;
    width: 110px;
    position: relative;
    margin-bottom: 30px;
}
.branding_design_service.seo-services ul li figure img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    margin: auto;
}
.branding_design_service.seo-services ul li figure::after {
    pointer-events: none;
    position: absolute;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    content: "";
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    top: 0;
    left: 0;
    padding: 0;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    transition: transform 0.2s, opacity 0.2s;
    background: 0 0;
}
.branding_design_service.seo-services ul li:hover figure::after {
    background: #fff;
}
.branding_design_service ul li figure img {
    position: relative;
    z-index: 1;
}
.portfolio-header .respons-btn span {
    background: rgba(197, 199, 210, 0.5);
}
.portfolio-header.header.sticky .main-menu ul li > a,
.portfolio-header.header.white-bg .main-menu ul li > a {
    color: #4b4c52;
}
.portfolio-header.header.sticky .main-menu ul li a:hover,
.portfolio-header.header.white-bg .main-menu ul li a:hover {
    color: #f13e42;
}
.portfolio-header.header.sticky .main-menu ul li a:hover i,
.portfolio-header.header.white-bg .main-menu ul li a:hover i {
    border-color: #ef323a;
}
.portfolio-header {
    box-shadow: 0 3px 11px -2px rgba(0, 0, 0, 0.08);
    float: left;
    width: 100%;
}
#portfolio-gallery .gallery-left a {
    display: flex;
    width: 100%;
}
.portfolio-gallery2 .gallery-right a {
    display: flex;
    width: 100%;
}
.portfolio-top {
    float: left;
    width: 100%;
    margin-top: 120px;
    padding: 100px 0 !important;
}
.portfolio-top h1 {
    color: #023575;
    margin-bottom: 20px;
    font: 70px/80px SFProDisplay-Bold;
}
.portfolio-top p {
    color: #56606e;
    font: 25px/38px SFProDisplay-Light;
    padding-left: 10px;
}
.portfolio-top p sub {
    color: #f13e42;
    font-size: 24px;
    bottom: 0;
}
#portfolio-gallery {
    display: flex;
    float: left;
    width: 100%;
}
.gallery-left {
    width: 50%;
    float: left;
    display: flex;
}
.gallery-box img,
.gallery-left img {
    width: 100%;
}
.gallery-box {
    width: 50%;
    float: left;
    display: flex;
}
.gallery-right {
    width: 50%;
    float: left;
    display: flex;
    flex-wrap: wrap;
}
.sky-blue {
    background: #03dddf;
}
.purple {
    background: #512da8;
}
.lightgrey {
    background: #f7f7f7;
}
.darkgrey {
    background: #e8e9ed;
}
.red {
    background: #fb4e59;
}
.gallery-box.lightgrey h4 {
    color: #272a30;
}
.gallery-box h4 span {
    display: inline-block;
    font: 27px/36px SF Pro Display;
}
.gallery-box h4 {
    font: 27px/36px SFProDisplay-Bold;
}
.gallery-box h4 sub {
    color: #f13e42;
    bottom: 0;
    font-size: 30px;
}
.gallery-box.purple h4,
.gallery-box.red h4 {
    color: #fff;
}
.portfolio-gallery2 {
    width: 100%;
    float: left;
}
.first-row,
.second-row {
    width: 100%;
    float: left;
    display: flex;
}
.portfolio-gallery2 .gallery-box {
    width: 25%;
    float: left;
}
#discuss-project {
    background: #f8f8fa;
    padding: 60px 0 !important;
    float: left;
    width: 100%;
}
#discuss-project a:after,
#discuss-project a:before {
    top: 12px;
}
.test-box h4 {
    text-align: center;
}
.test-box h4 img {
    margin-left: 20px;
}
#discuss-project .test-box {
    width: 910px;
    margin: 0 auto;
}
.portfolio-gallery2 .second-row .gallery-box {
    width: 50%;
    float: left;
}
.portfolio-gallery2 .second-row .gallery-left .gallery-box img {
    height: 100%;
}
.portfolio-gallery2 .second-row .gallery-left .gallery-box.half figure img {
    height: auto;
}
.portfolio-gallery2 .second-row .gallery-left {
    display: flex;
    flex-wrap: wrap;
}
.portfolio-gallery2 .second-row .gallery-right img {
    width: 100%;
}
.gallery-box.half {
    width: 100% !important;
}
.gallery-box.half figure {
    margin: 0 auto;
    display: flex;
    align-items: center;
}
#testimonial.testimonial2 {
    margin-bottom: 40px;
}
.portfolio-detail-header {
    position: relative;
    padding-top: 0;
}
.technology-banner.portfolio-detail .head-section {
    text-align: center;
    width: 100%;
    float: none;
}
.portfolio-banner {
    background: url(../images/portfolio-banner.jpg);
    background-size: cover;
    margin-top: 93px;
    display: flex;
    height: 100%;
    padding: 0;
}
.portfolio-social-share {
    width: 100%;
    float: left;
    padding: 0 !important;
}
.left-sec {
    width: 50%;
    float: left;
}
.right-sec {
    width: 50%;
    float: right;
    text-align: right;
}
.portfolio-header.white-bg {
    height: 80px;
}
.left-sec ul li {
    display: inline-block;
    margin-right: 35px;
}
.left-sec ul li a {
    font: 16px/26px "SF Pro Display";
    color: #2a2f36;
}
.right-sec a {
    font: 16px/26px "SF Pro Display";
    color: #2a2f36;
}
.right-sec a span {
    color: #022a5e;
    display: inline-block;
    margin-right: 10px;
}
.remote {
    width: 100%;
    float: left;
    background: #f7f8f8;
    padding: 90px 0 60px !important;
}
.remote-left {
    width: 30%;
    float: left;
}
.remote-left h3.sec-main-head.seo {
    color: #f13e42;
}
.remote-right {
    width: 70%;
    float: right;
}
.remote-right ul {
    display: block;
}
.remote-right ul li {
    padding-left: 20px;
    position: relative;
    margin-bottom: 10px;
    font: 17px/27px "SF Pro Display";
    color: #56606e;
}
.remote-right ul li:before {
    position: absolute;
    left: 0;
    top: 11px;
    display: block;
    content: "";
    width: 6px;
    height: 6px;
    background: #f13e42;
    border-radius: 100%;
}
.remote-right h3 {
    color: #022a5e;
    font: 40px/55px SFProDisplay-Bold;
    padding-right: 100px;
    margin-bottom: 20px;
}
.remote-right .content {
    width: 45%;
    float: left;
    margin-right: 40px;
    margin-bottom: 0;
}
.remote-right .content:last-child {
    margin-right: 0;
    float: right;
}
.remote-right .content p,
.remote-right p {
    color: #56606e;
    font: 17px/27px "SF Pro Display";
}
.counts {
    float: left;
    width: 100%;
    border-top: 1px solid #e8e8ea;
    padding-top: 50px;
}
.counts ul li {
    display: inline-block;
    width: 33%;
    vertical-align: top;
}
.counts ul li h4 {
    font: 40px/30px SFProDisplay-Bold;
}
.counts ul li span {
    display: inline-block;
    color: #56606e;
    padding-right: 80px;
}
.deliverables-font-color {
    float: left;
    width: 100%;
    padding: 30px 0 30px !important;
}
.deliverables-font-color figure {
    margin-bottom: 50px;
}
.deliverables-font-color figure img {
    width: 100%;
}
.deliverables-font-color .row {
    width: 100%;
    margin: 0;
}
.right-content ul li {
    margin-left: 40px;
    color: #56606e;
    font: 17px/27px "SF Pro Display";
    margin-bottom: 4px;
    position: relative;
}
.right-content ul li:before {
    background: #f13e42;
    position: absolute;
    content: "";
    display: block;
    left: 0;
    margin-left: -40px;
    top: 12px;
    width: 20px;
    height: 2px;
}
.deliverables-font-color .remote-right .content {
    width: 54%;
}
.deliverables-font-color .remote-right .right-content {
    width: 40%;
    display: none;
}
.deliverables-font-color .remote-right h3 {
    padding-right: 25px;
}
.deliverables-font-color .remote-right .content.full {
    width: 100%;
    padding-right: 170px;
}
.deliverables-font-color .remote-right .content.full p {
    text-transform: uppercase;
}
.color-boxes li {
    display: inline-block;
    width: 19%;
}
.color-boxes li:before {
    display: none !important;
}
.deliverables-font-color .remote-right .content.full.color {
    padding: 0;
}
.color-boxes li span {
    display: inline-block;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin-bottom: 10px;
}
.dark-grey {
    background: #3a3f50;
}
.skyblue {
    background: #65d7eb;
}
.green {
    background: #5ffa8b;
}
.indigo {
    background: #3d5b83;
}
.color-boxes li h6 {
    color: #3f434f;
    font: 16px/16px SFProDisplay-Bold;
    margin-left: 24px;
    letter-spacing: 0.5px;
}
#discuss-project.portfolio-detail h4 {
    text-align: center;
}
.laptop {
    float: left;
    width: 100%;
    background: #023575;
    height: 710px;
    position: absolute;
    top: -3px;
}
.laptop-picture {
    float: left;
    width: 100%;
    position: relative;
    padding-top: 60px;
}
.laptop-picture img {
    width: 100%;
}
.frame-images {
    width: 100%;
    float: left;
    background: #fff;
    padding-top: 0 !important;
}
.frame-pic {
    display: inline-block;
    margin-right: 15px;
    width: 49%;
}
.frame-images img,
.frame-pic img {
    width: 100%;
}
.frame-pic:last-child {
    margin-right: 0;
    float: right;
}
.projects-info {
    float: left;
    width: 100%;
    position: relative;
    max-height: 400px;
    display: flex;
}
.project-box {
    float: left;
    width: 50%;
    position: relative;
}
.project-box img {
    width: 100%;
}
.project-info-content {
    position: absolute;
    top: 40%;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    z-index: 99;
    color: #fff;
}
.project-info-content span {
    margin-bottom: 12px;
    display: inline-block;
    width: 100%;
    text-transform: uppercase;
    font: 14px/16px SFProDisplay-Bold;
}
.project-box:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(4, 18, 76, 0.71);
}
.project-info-content a {
    display: inline-block;
    color: #fff;
    font: 25px/26px SFProDisplay-Bold;
}
.project-info-content a img {
    width: auto;
}
.project-info-content a.prev img {
    margin-right: 10px;
}
.project-info-content a.next img {
    margin-left: 10px;
}
.projects-info:after {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 100%;
    width: 1px;
    background: #fff;
}
.port-folio img {
    max-width: 100%;
}
.port-folio {
    float: left;
    width: 100%;
    padding: 60px 20px;
}
.font-section {
    float: left;
    width: 100%;
    clear: left;
    padding: 0 20px 40px 20px;
}
.color-section {
    float: left;
    width: 100%;
    padding: 0 20px 40px 20px;
}
.color-section .remote-right .content.full {
    width: 100%;
    padding-right: 0;
}
.font-section .remote-right .content {
    width: 100%;
}
@media only screen and (max-width: 1460px) {
    .HYPE_scene {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translateX(-50%) translateY(-50%) scale(0.695625);
    }
    #workflowanimation_hype_container {
        width: 100% !important;
        max-width: 1778.6666666666665px;
        height: 417.375px !important;
    }
    .workflow .container {
        width: 100%;
    }
}
@media only screen and (max-width: 1280px) {
    .workflow-illustration #hype-scene-6HTTPKP9204V4GVR4MOE {
        width: 100%;
    }
    .workflow-illustration #hype-scene-L7S0NM0K1XSXOLIB2W54 {
        width: 100%;
    }
    .portfolio-header.white-bg {
        padding: 5px 15px;
    }
    .portfolio-top {
        padding: 60px 0 !important;
    }
    .portfolio-top h1 {
        font: 50px/50px "SF Pro Display";
    }
    .counts ul li {
        width: 32%;
    }
    .laptop {
        height: 690px;
    }
    .remote-right .content {
        margin-bottom: 0;
    }
}
@media only screen and (max-width: 1199px) {
    .laptop {
        height: 650px;
    }
}
@media only screen and (max-width: 1170px) {
    .services_accordian .card-header {
        padding: 15px 25px 15px 30px;
    }
    #testimonial .test-box p {
        font: 25px/40px "SF Pro Display";
        font-style: italic;
        font-weight: 300;
    }
    #testimonial.testimonial2 {
        margin-bottom: 0;
    }
    .remote-right .content {
        margin-right: 25px;
    }
    .frame-images {
        padding-top: 50px !important;
    }
    .remote {
        padding: 60px 0 50px !important;
    }
    .deliverables-font-color {
        padding: 30px 0 0 !important;
    }
    .laptop-picture {
        padding-top: 40px;
    }
    .laptop {
        height: 600px;
    }
    .how-we-help.seo .how-we-help-left {
        padding-right: 70px;
        padding-left: 15px;
    }
    .how-we-help-left h2 {
        font-size: 25px;
        line-height: 35px;
    }
    .how-we-help.seo .how-we-help-right {
        padding-top: 10px;
    }
    .partner-left p {
        font-size: 25px;
        line-height: 30px;
        padding-top: 5px;
    }
    .partner-left::before {
        height: 100%;
        left: -25px;
    }
    .partner {
        width: 95%;
    }
    .partner-left {
        width: 100%;
    }
    .partner-right {
        width: 100%;
        padding-top: 30px;
    }
    .top-brands-left h2.sec-main-head {
        font: 25px/30px SFProDisplay-Bold;
    }
}
@media only screen and (max-width: 1112px) {
    .work-tab #myTab li.nav-item {
        margin: 76px 20px 0;
    }
}
@media only screen and (max-width: 1080px) {
    .laptop {
        height: 560px;
    }
}
@media only screen and (max-width: 1024px) {
    .c-phase-link {
        padding: 30px 20px;
    }
    .portfolio-top {
        margin-top: 100px;
    }
    #discuss-project .test-box {
        width: 100%;
    }
    #discuss-project {
        padding: 40px 0 !important;
    }
    .laptop {
        height: 530px;
    }
    .counts ul li span {
        padding-right: 25px;
    }
    .boxes .seo.inner-box p {
        font: 15px/26px "SF Pro Display";
    }
    .portfolio-top h1 {
        font: 40px/40px SFProDisplay-Bold;
        margin-bottom: 5px;
    }
    .work-tab #myTab li.nav-item {
        margin: 76px 15px 0;
    }
}
@media only screen and (max-width: 991px) {
    .phase-boxes .box {
        width: 30%;
    }
    .work-tab #myTab li.nav-item {
        margin: 76px 15px 0;
    }
    #testimonial .test-box p {
        font: 20px/35px "SF Pro Display";
        font-weight: 300;
        font-style: italic;
    }
    .branding_design_service.seo-services ul li figure {
        margin-bottom: 50px;
    }
    .project-right-img {
        min-height: unset;
        padding: 10px 0;
    }
    .branding_design_service.seo-services ul li .cont-box h4 {
        font: 20px/25px SFProDisplay-Bold;
        margin-bottom: 10px;
    }
    .inner-box {
        width: 49%;
        margin-bottom: 30px;
    }
    .seo.inner-box h4 {
        min-height: auto;
    }
    .inner.boxes.influencer .seo.inner-box h4 {
        min-height: auto;
    }
    .top-brands-left {
        margin-top: 20px;
        width: 100%;
        margin-bottom: 20px;
        padding: 40px 25px 55px 35px;
    }
    .branding_design_service.seo-services {
        padding: 75px 0 60px !important;
    }
    .how-we-help {
        padding: 65px 0 30px !important;
    }
    .top-brands-right {
        margin-top: 0;
        margin-left: 0;
        width: 100%;
        padding: 40px 50px 40px 35px;
    }
    .brands-list figure {
        margin-bottom: 20px;
        text-align: center;
    }
    .top-brands {
        padding-bottom: 0 !important;
        border-bottom: none;
    }
    .laptop {
        height: 515px;
    }
    .remote-right {
        width: 100%;
        margin-bottom: 15px;
    }
    .remote-left {
        width: 100%;
    }
    .remote-right h3 {
        font: 20px/28px SFProDisplay-Bold;
    }
    .deliverables-font-color .remote-right .content.full {
        padding-right: 0;
    }
    .how-we-help.seo .how-we-help-right p {
        font-size: 17px;
    }
    .how-we-help.seo .how-we-help-left {
        width: 100%;
        padding-bottom: 15px;
    }
    .how-we-help.seo .how-we-help-right {
        width: 100%;
        padding-left: 15px;
    }
    .how-we-help .how-we-help-left {
        width: 100%;
        padding-bottom: 15px;
    }
    .how-we-help .how-we-help-right {
        width: 100%;
    }
    .seo.inner-box p {
        font-size: 16px;
    }
    .project-left.services-left {
        width: 100%;
    }
    .how-we-help.seo .how-we-help-left {
        padding-right: 0;
    }
    .how-we-help.seo .how-we-help-left h2 br {
        display: none;
    }
    .services_accordian .card-header {
        padding: 15px 25px 15px 13px;
    }
    .repsonsive-page-accordion .project-left .box h2 {
        font-size: 30px;
        line-height: 35px;
        margin-bottom: 20px;
    }
    .project-left .services_accordian .card-title {
        font-size: 17px;
    }
    .top-brands-image {
        display: none;
    }
    .port-folio {
        padding-bottom: 0;
    }
}
@media only screen and (max-width: 900px) {
    .laptop {
        height: 470px;
    }
    #myTab {
        max-width: 900px;
        overflow-x: auto;
        white-space: nowrap;
        flex-wrap: nowrap;
    }
    .work-tab #myTab li.nav-item .active .c-nav-services__decor {
        display: none !important;
    }
    .how-we-work {
        padding: 70px 0 40px !important;
    }
}
@media only screen and (max-width: 846px) {
    .HYPE_scene {
        transform: translateX(-50%) translateY(-50%) scale(0.595625);
    }
    .work-tab #myTab .nav-link {
        padding: 10px 6px;
        font: 14px/20px "SF Pro Display";
    }
    .laptop {
        height: 440px;
    }
    .color-boxes li span {
        width: 100px;
        height: 100px;
    }
    .color-boxes li h6 {
        font: 14px/16px SFProDisplay-Bold;
        margin-left: 15px;
    }
}
@media only screen and (max-width: 768px) {
    .project-info-content a {
        font: 18px/20px SFProDisplay-Bold;
    }
    .project-info-content span {
        margin-bottom: 2px;
        font: 12px/16px SFProDisplay-Bold;
    }
    .frame-images {
        padding-top: 30px !important;
    }
    .frame-pic {
        margin-right: 5px;
    }
    .remote-right .content {
        margin-bottom: 40px;
    }
    .laptop-picture {
        padding-top: 20px;
    }
    .laptop {
        height: 385px;
    }
    .portfolio-top {
        margin-top: 70px;
    }
    #discuss-project {
        padding: 30px 0 !important;
    }
    .test-box h4 a {
        font: 25px/36px SFProDisplay-Light;
    }
    #testimonial .test-box .author {
        margin-top: 30px;
    }
}
@media only screen and (max-width: 767px) {
    #testimonial.testi-monial {
        padding: 40px 0 40px !important;
    }
    .portfolio-gallery2 .second-row .gallery-box {
        height: auto;
    }
    .how-we-work {
        padding: 40px 0 40px !important;
    }
    .gallery-right {
        width: 100%;
    }
    #testimonial {
        padding: 40px 0 !important;
    }
    .how-we-help {
        padding: 40px 0 30px !important;
    }
    #portfolio-gallery {
        display: block;
    }
    .gallery-left {
        width: 100%;
    }
    .portfolio-gallery2 .gallery-box {
        width: 50%;
    }
    .first-row,
    .second-row {
        display: block;
    }
    .workflow-image {
        display: block;
        float: left;
        width: 100%;
        padding: 20px 0;
    }
    .workflow-illustration {
        display: none;
    }
    #testimonial .test-box p {
        font: 17px/30px "SF Pro Display";
        font-weight: 300;
        font-style: italic;
    }
    #testimonial .test-box h3 {
        font: 18px/30px SFProDisplay-Bold;
        font-weight: 700;
        font-style: italic;
        margin-bottom: 5px;
    }
    .portfolio-top h1 {
        font: 30px/30px SFProDisplay-Bold;
    }
    .portfolio-top p {
        font: 16px/20px SF Pro Display;
        padding-left: 0;
    }
    #myTabContent .tab-inner p {
        width: 100%;
    }
    .project-left .box {
        padding-left: 5px;
    }
    .branding_design_service.seo-services {
        padding: 47px 0 60px !important;
    }
}
@media only screen and (max-width: 699px) {
    .laptop {
        height: 345px;
    }
    .phase-boxes .box {
        margin-right: 15px;
    }
    .c-phase-link {
        padding: 30px 5px 0 15px;
    }
    #testimonial .test-box p {
        font: 16px/28px "SF Pro Display";
        font-style: italic;
        font-weight: 300;
    }
}
@media only screen and (max-width: 640px) {
    .remote-right h3 {
        padding-right: 0;
        margin-bottom: 10px;
    }
    .phase-boxes .box {
        width: 47%;
    }
    .deliverables-font-color .remote-right .right-content {
        width: 100%;
    }
    .deliverables-font-color .remote-right .content {
        width: 100%;
        margin-bottom: 15px;
    }
    .left-sec ul li {
        margin-right: 10px;
    }
    .portfolio-top h1 {
        margin-bottom: 5px;
    }
    .portfolio-top p {
        font: 18px/27px SF Pro Display;
    }
    .laptop {
        height: 320px;
    }
    .remote-right .content {
        width: 100%;
    }
    .left-content.content {
        margin-bottom: 5px;
    }
    .counts ul li {
        width: 100%;
        margin-bottom: 20px;
    }
    .counts {
        padding-top: 30px;
    }
    .remote {
        padding: 40px 0 20px !important;
    }
    .deliverables-font-color .remote-right h3 {
        margin-bottom: 5px;
        padding-right: 0;
    }
    .partner-left p {
        font-size: 20px;
        line-height: 26px;
    }
    .partner-right {
        padding-top: 15px;
    }
    .repsonsive-page-accordion .project-left .box h2 {
        font-size: 25px;
        line-height: 30px;
        margin-bottom: 20px;
    }
    .services_accordian .card-header::after {
        top: 11px;
    }
    .project-left .services_accordian .card-title {
        font-size: 15px;
    }
    .branding_design_service ul li {
        width: 100%;
    }
    .branding_design_service.seo-services ul li:nth-child(2n) {
        border-left: 1px solid #d9d9dd;
    }
}
@media only screen and (max-width: 600px) {
    .laptop {
        height: 300px;
    }
    .phase-boxes .box {
        margin-right: 10px;
    }
    .project-box {
        width: 100%;
    }
    .projects-info {
        flex-wrap: wrap;
        max-height: unset;
    }
    .projects-info::after {
        display: none;
    }
}
@media only screen and (max-width: 540px) {
    .inner-box {
        width: 100%;
        padding-right: 0 !important;
    }
    .color-boxes li span {
        width: 70px;
        height: 70px;
        margin-bottom: 0;
    }
    .color-boxes li h6 {
        margin-left: 0;
        font: 12px/16px SFProDisplay-Bold;
    }
    .laptop {
        height: 270px;
    }
    .right-sec a {
        font: 15px/26px "SF Pro Display";
    }
    .left-sec ul li a {
        font: 15px/26px "SF Pro Display";
    }
    .how-we-help .how-we-help-left {
        padding-right: 0;
    }
}
@media only screen and (max-width: 480px) {
    .frame-pic {
        margin-right: 0;
        width: 100%;
    }
    .brands-list figure {
        width: 100%;
        text-align: center;
    }
    .phase-boxes .box {
        margin-right: 5px;
    }
    .projects-info::after {
        display: none;
    }
    #discuss-project {
        padding: 15px 0 !important;
    }
    .project-box {
        width: 100%;
    }
    .project-box.box1 {
        border-bottom: 1px solid #fff;
    }
    .color-boxes {
        text-align: center;
    }
    .color-boxes li {
        width: 32%;
        margin-bottom: 10px;
    }
    .right-sec {
        width: 100%;
        text-align: left;
    }
    .left-sec {
        width: 100%;
    }
    .portfolio-social-share {
        padding: 15px 25px !important;
    }
    .test-box h4 a {
        font: 20px/36px SFProDisplay-Light;
    }
    #testimonial .test-box .author span {
        font-size: 14px;
        line-height: 12px;
        display: inline-block;
    }
    .laptop {
        height: 230px;
    }
    .partner-right a.hire-developer {
        clear: left;
        float: left;
        margin-top: 10px;
    }
    .responsive-page .seo.inner-box {
        width: 100%;
        border-right: none;
    }
    .responsive-page .seo.inner-box:nth-child(3) {
        border-bottom: 1px solid #eceded;
    }
    .partner-right a.free-estimate {
        float: left;
    }
}
@media only screen and (max-width: 414px) {
    .laptop {
        height: 200px;
    }
}
@media only screen and (max-width: 375px) {
    .test-box h4 a {
        font: 14px/36px SFProDisplay-Light;
    }
    #discuss-project {
        padding: 10px 0 !important;
    }
    .laptop {
        height: 180px;
    }
}
@media only screen and (max-width: 320px) {
    .laptop {
        height: 150px;
    }
}