@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");

body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main {
    width: 144rem;
    background-color: #fff7f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Plus Jakarta Sans", serif;
}

.main .header {
    width: 111.1rem;
    height: 6.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 3.4rem;
}

.main .header .btn-header {
    height: 5.6rem;
    width: 22.8rem;
    border-radius: 10rem;
    background-color: #030303;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    border: none;
}

.main .header .btn-header:hover {
    background-color: #755cde;
    transition: ease-in-out 0.7s;
    cursor: pointer;
}

.main .title-main {
    font-weight: 700;
    font-size: 5.6rem;
    margin-top: 6.5rem;
}

.main .p-title {
    font-size: 1.9rem;
    text-align: center;
    width: 73rem;
    margin-top: 2.4rem;
    line-height: 2.8rem;
}

.main .container-tools {
    display: grid;
    flex-direction: row;
    gap: 2.4rem;
    grid-template-rows: repeat(2, 18.2rem);
    grid-template-columns: repeat(6, 16.4rem);
    margin-top: 8rem;
}

.main .container-tools .box-tools-graphic {
    background-color: #755cde;
    position: relative;
    border-radius: 0.8rem;
    grid-area: 1 / 1 / 3 / 3;
}

.main .container-tools .box-tools-ui {
    position: relative;
    grid-area: 1 / 3 / 2 / 4;
    border-radius: 0.8rem;
    background-color: #f6a560;
}

.main .container-tools .box-tools-apps {
    position: relative;
    grid-area: 1 / 4 / 2 / 5;
    border-radius: 0.8rem;
    background-color: #f39e9e;
}

.main .container-tools .box-tools-photography {
    position: relative;
    grid-area: 1 / 5 / 2 / 7;
    border-radius: 0.8rem;
    background-color: #61c4b7;
}

.main .container-tools .box-tools-iilustration {
    position: relative;
    grid-area: 2 / 3 / 3 / 5;
    border-radius: 0.8rem;
    background-color: #eb7565;
}

.main .container-tools .box-tools-motion {
    position: relative;
    grid-area: 2 / 5 / 3 / 7;
    border-radius: 0.8rem;
    background-color: #552049;
}

.main .container-tools .box-tools-graphic .img-tools,
.main .container-tools .box-tools-ui .img-tools,
.main .container-tools .box-tools-apps .img-tools,
.main .container-tools .box-tools-photography .img-tools,
.main .container-tools .box-tools-iilustration .img-tools,
.main .container-tools .box-tools-motion .img-tools {
    position: absolute;
    right: 2.4rem;
    top: 2.4rem;
}

.main .container-tools .box-tools-graphic .p-box-tools,
.main .container-tools .box-tools-ui .p-box-tools,
.main .container-tools .box-tools-apps .p-box-tools,
.main .container-tools .box-tools-photography .p-box-tools,
.main .container-tools .box-tools-iilustration .p-box-tools,
.main .container-tools .box-tools-motion .p-box-tools {
    position: absolute;
    left: 2.4rem;
    bottom: 2.4rem;
    font-size: 2.4rem;
    font-weight: 700;
    color: #fff;
}

.main .box-i {
    width: 111rem;
    margin-top: 13.5rem;
    display: flex;
    column-gap: 13.5rem;
}

.main .box-i .img-amy {
    width: 44.5rem;
    height: 44.5rem;
}

.main .box-i .box-i-description {
    height: 44.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.main .box-i .box-i-description .i-title {
    font-size: 4rem;
    font-weight: 700;
}

.main .box-i .box-i-description .i-p {
    font-size: 1.8rem;
    color: #7a746e;
    line-height: 2.5rem;
    margin-top: 3.4rem;
}

.main .box-i .box-i-description .btn-i {
    width: 22.8rem;
    height: 5.6rem;
    background-color: #eb7565;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 3.2rem;
    border-radius: 10rem;
    border: none;
}

.main .box-i .box-i-description .btn-i:hover {
    background-color: #f6a560;
    transition: ease-in-out 0.7s;
    cursor: pointer;
}

.main .my-work {
    margin-top: 8.8rem;
    font-size: 3.2rem;
}

.main .container-imgs-work {
    display: flex;
    justify-content: center;
    column-gap: 3rem;
    overflow: hidden;
    width: 144rem;
    margin-top: 5.6rem;
    transition: transform 0.5s ease-in-out;
    will-change: transform;
}

.main .box-arrows {
    margin-top: 5.6rem;
    display: flex;
    gap: 1.6rem;
}

.main .box-arrows .btn-arrow-left,
.main .box-arrows .btn-arrow-right {
    background-color: #030303;
    width: 6.4rem;
    height: 6.4rem;
    color: #fff;
    border-radius: 50%;
    border: none;
}

.main .box-arrows .btn-arrow-left:hover,
.main .box-arrows .btn-arrow-right:hover {
    background-color: #755cde;
    transition: ease-in-out 0.7s;
    cursor: pointer;
}

.main .box-call {
    width: 111rem;
    height: 32rem;
    background-color: #030303;
    border-radius: 0.8rem;
    display: flex;
    column-gap: 18.2rem;
    justify-content: space-between;
    align-items: center;
    padding-left: 6.5rem;
    padding-right: 9.5rem;
    margin-top: 8.8rem;
}

.main .box-call .box-call-description .call-title {
    font-size: 4rem;
    color: #fff;
}

.main .box-call .box-call-description .call-p {
    font-size: 1.8rem;
    color: #fff7f0;
    margin-top: 2.5rem;
    width: 54rem;
    line-height: 3rem;
}

.main .box-call .btn-free-consultation-call {
    background-color: #eb7565;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    width: 22.8rem;
    height: 5.6rem;
    border-radius: 8rem;
    border: none;
}

.main .box-call .btn-free-consultation-call:hover {
    background-color: #f6a560;
    transition: ease-in-out 0.7s;
    cursor: pointer;
}

.main .main-footer {
    width: 111rem;
    height: 6.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5.6rem;
    margin-bottom: 6.8rem;
}

.main .main-footer .btn-free-consultation-footer {
    width: 22.8rem;
    height: 5.6rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    background-color: #030303;
    border-radius: 8rem;
    border: none;
}

.main .main-footer .btn-free-consultation-footer:hover {
    background-color: #755cde;
    transition: ease-in-out 0.7s;
    cursor: pointer;
}