.hero-design {
    padding-top: 3.12rem;
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    background-color: #DFE0DD;
}
.hero-design .container {
    width:100%;
    padding-right: 0 !important;
}
.hero-design h1 {
    color: #000;
    max-width: 41.67rem;
}
.hero-design h1 span {
    color: #595A58;
}
.hero-design p {
    font-size: 1.67rem;
    max-width: 29.17rem;
    margin-top: 1.56rem;
    color: #000;
}
.hero-design p span {
    color: #595A59;
}
.hero-design__row {
    display: flex;
}
.hero-design__col-1 {
    max-width: 45%;
    flex-basis: 45%;
    padding-top: 2.60rem;
}
.hero-design__col-2 {
    max-width: 55%;
    flex-basis: 55%;
}
.hero-design__col-2 img {
    display: block;
}

.design-services {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color: #ECECEB;
}
.design-services__row-1 {
    display: flex;
    gap: 1.5rem;
}
.design-services__row-1 > div {
    max-width: 50%;
    flex-basis: 50%;
    padding-top: 3rem;
    display: flex;
    flex-direction: column;
}
.design-services__row-1__col-1 {
    background-color: #dbddd9;
}
.design-services__row-1__col-2 {
    background-color: #212121;
}
.design-services__row-1 > div .inner,
.design-services__row-2 > div .inner {
    padding-left: 3rem;
    padding-right: 3rem;
}
.design-services__row-1__col-1 h3 {
    color: #07090B;
}
.design-services__row-1__col-1 p {
    color: #5D605A;
    max-width: 29.69rem;
}
.design-services__row-1 p {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.design-services__row-1__col-2 p {
    color: #858789;
    max-width: 33.85rem;
}
.design-services__row-1 img {
    margin-top: auto;
}

.design-services__row-2 {
    margin-top: 1.5rem;
    gap: 1.5rem;
    display: flex;
}
.design-services__row-2__col-1 {
    max-width: 30%;
    flex-basis: 30%;
}
.design-services__row-2__col-1 .inner {
    display: flex;
    flex-direction: column;
    padding-top: 3rem;
    background-color: #DBDDD9;
}
.design-services__row-2__col-1 img {
    margin-top: auto;
}
.design-services__row-2__col-1 p {
    max-width: 23.96rem;
}
.design-services__row-2__col-2 {
    max-width: 70%;
    flex-basis: 70%;
}
.design-services__row-2__col-2 h3,
.design-services__row-2__col-1 h3 {
    color: #07090B;
}
.design-services__row-2__col-2 p,
.design-services__row-2__col-1 p {
    color: #5D605A;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.design-services__row-2__col-2__top {
    background-color: #ACE72C;
    display: flex;
}
.design-services__row-2__col-2__top > .inner {
    padding-top: 3rem;
    padding-bottom: 10rem;
}
.design-services__row-2__col-2__top > * {
    max-width: 50%;
    flex-basis: 50%;
}
.design-services__row-2__col-2__top p {
    color: #07090B;
    max-width: 22.40rem;
}
.design-services__row-2__col-2__bottom {
    display: flex;
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.design-services__row-2__col-2__bottom__left {
    max-width: 100%;
    flex-basis: 100%;
    background-color: #111211;
    padding-top: 3rem;
    background-image: url('../images/design-uxui.png');
    background-size: contain;
    background-position: bottom right;
    padding-bottom: 18.4rem;
    background-repeat: no-repeat;
}
.design-services__row-2__col-2__bottom__left h3 {
    color: #fff;
}
.design-services__row-2__col-2__bottom__left p {
    max-width: 24.48rem;
    margin-bottom: 0;
    color: #878787;
}
.design-services__inner__why a {
    display: flex;
    height: 100%;
    align-items: flex-end;
    flex-direction: column;
}
.design-services__inner__why {
    background-color: #0B0D0F !important;
    display: flex;
    align-items: flex-end;
    padding-bottom: 2rem;
    background-image: url('../images/design-inkyy-logo.svg');
    background-repeat: no-repeat;
    background-position: top left;
    margin-top: 1.5rem;
    padding-top: 5rem !important;
    background-size: 45% auto;
    transition: all .3s ease;
}
.design-services__inner__why:hover {
    background-color:#3d3d3d !important;
}
.design-services__inner__why h3 {
    color: #fff;
}
.design-services__inner__why img {
    margin-left: auto;
    margin-bottom: 1.5rem;
    width: 3.9rem;
}


@media(max-width:1024px){
    .hero-design {
        min-height: 0;
        padding-top: 10rem;
    }
}
@media(max-width:767px){
    .hero-design {
        padding-top: 3rem;
    }
    .hero-design__row {
        flex-wrap: wrap;
    }
    .hero-design__row > div {
        max-width: 100%;
        flex-basis: 100%;
    }
    .hero-design p {
        font-size: 1.11rem;
    }
    .hero-design .container {
        padding-right: 0.88rem !important;
        padding-bottom: 0 !important;
    }
    .design-services__row-2__col-2__top > *,
    .design-services__row-2 > div,
    .design-services__row-1 > div {
        max-width: 100%;
        flex-basis: 100%;
    }
    .design-services__row-2__col-2__top,
    .design-services__row-2,
    .design-services__row-1 {
        flex-wrap: wrap;
    }
    .design-services {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    .design-services__row-1 > div .inner, .design-services__row-2 > div .inner {
        padding-left: 1rem;
        padding-right: 1rem;
    } 
    .design-services__row-2__col-2__top > .inner {
        padding-bottom: 0rem;
    }
    .design-services__row-2__col-2__bottom__left {
        padding-bottom: 13rem;
    }
    .hero-design__col-2 img {
        margin-top: 2rem;
    }
}