/**/
body {
    margin: 0;
}
a {
    text-decoration: none;
}



.content {
    max-width: 1180px;
    margin: 0 auto;
}
header {
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 75px;
}
.header__list {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
}
.header__item + .header__item {
    margin-left: 15px;
}
.header__item > a {
    color: #272727;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
    transition: color 250ms;
}
.header__item:hover > a {
    color: #fc5f45;
}



.what {
    height: 760px;
    background-color: #3f4049;
    color: white;
}
.what__title {
    font-size: 60px;
    text-align: center;
    margin: 190px 150px 0;
}
.what__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.what__works {
    margin: 50px 0 0;
    height: 50px;
    width: 180px;
    background-color: #fc5f45;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    line-height: 50px;
    font-family: Arial, sans-serif;
    user-select: none;
    cursor: pointer;
}
.what__features {
    display: flex;
    margin-top: 80px;
}
.what__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100px;
}
.what__item + .what__item {
    margin-left: 50px;
}
.what__item1 {
    color: #38c695;
}
.what__item2 {
    color: #b27cf5;
}
.what__item3 {
    color: #feb960;
}



.about__wrapper {
    padding: 0 15px;
}
.about__img {
    margin-top: 150px;
    position: relative;
}
.about__info {
    position: absolute;
    background: url('img/01.png') 5px 5px no-repeat;
    right: 65px;
    top:  75px;
    height: 540px;
    width: 650px;
    background-color: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
}
.about__info::after {
    content: '';
    position: absolute;
    bottom: 0;
    display: block;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, rgba(252,95,69,1) 0%, rgba(252,95,69,1) 25%,  rgba(56,198,149,1) 25%, rgba(56,198,149,1) 50%, rgba(178,124,245,1) 50%, rgba(178,124,245,1) 75%, rgba(254,185,96,1) 75%, rgba(254,185,96,1) 100%);
}
.about__title, .about__text {
    margin: 0 80px;
}
.about__title {
    margin-top: 100px;
    font-size: 50px;
    font-weight: bold;
}
.about__text {
    color: #616161;
    font-size: 15px;
}



.focus {
    margin-top: 150px;
    height: 825px;
    background-color: #f7f7f7;
}
.focus__wrapper {
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    background: url('img/focus0.png') no-repeat;
    background-position: top 10px center;
}
.focus__title {
    margin-top: 140px;
    font-size: 50px;
    font-weight: bold;
    color: #313131;
    text-align: center;
}
.focus__text {
    margin-top: 45px;
    color: #898989;
    font-size: 18px;
    font-family: Arial, sans-serif;
    text-align: center;
}
.focus__row {
    margin-top: 75px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.focus__card {
    width: 250px;
    height: 350px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
    position: relative;
}
.focus__card::after {
    content: '';
    position: absolute;
    bottom: 0;
    display: block;
    height: 3px;
    width: 100%;
    /* background: linear-gradient(90deg, rgba(252,95,69,1) 0%, rgba(252,95,69,1) 25%,  rgba(56,198,149,1) 25%, rgba(56,198,149,1) 50%, rgba(178,124,245,1) 50%, rgba(178,124,245,1) 75%, rgba(254,185,96,1) 75%, rgba(254,185,96,1) 100%); */
}
.focus__card1::after {
    background-color: #fc5f45;
}
.focus__card2::after {
    background-color: #38c695;
}
.focus__card3::after {
    background-color: #b27cf5;
}
.focus__card4::after {
    background-color: #feb960;
}
.focus__img {
    margin-top: 65px;

}
.focus__subtitle {
    font-size: 20px;
    font-weight: medium;
    color: #313131;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 30px;
}
.focus__subtext {
    color: #616161;
    margin: 30px 25px 0;
    text-align: center;
}


.explore {
    height: 500px;
    background-image: url('img/image4.png');
    background-position: center;
}
.explore__wrapper {
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.explore__title {
    margin-top: 150px;
    font-size: 30px;
    font-family: Arial;
    text-align: center;
    color: white;
}
.explore__play {
    margin-top: 30px;
}
.explore__text {
    margin-top: 35px;
    color: #d9d9db;
    font-size: 15px;
}



.portfolio {
    height: 1400px;
}
.portfolio__wrapper {
    padding: 0 15px;
    text-align: center;
    background: url('img/portfolio.png') top 10px center  no-repeat;
    display: flex;
    flex-direction: column;
}
.portfolio__title {
    margin-top: 150px;
    font-size: 50px;
    font-weight: bold;
    color: #313131;
}
.portfolio__text {
    margin-top: 40px;
    color: #616161;
    font-size: 18px;
    font-family: Arial;
}
.portfolio__imgs {
    margin-top: 80px;
    display: grid;
    grid-gap: 25px;
    grid-template-columns: repeat(3, 1fr);
}


.team__wrapper {
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url('img/04.png') top 5px center no-repeat;
}
.team {
    height: 1225px;
    background-color: #f7f7f7;
}
.team__title, .team__text{
    text-align: center;
}
.team__title {
    margin-top: 160px;
    font-size: 50px;
    font-weight: bold;
    color: #313131;
}
.team__text {
    color: #9d9d9d;
    font-size: 18px;
    margin-top: 40px;
}
.team__items {
    margin-top: 80px;
    display: flex;
    justify-content: center;
}
.team__item {
    height: 350px;
    width: 263 px;
    background-color: #fff;
    text-align: center;
    position: relative;
}
.team__item + .team__item {
    margin-left: 30px;
}
.team__name {
    font-size: 18px;
    font-family: sans-serif;
    font-weight: medium;
    margin-top: 18px;
}
.team__item:nth-child(1) > .team__name {
    color: #fc5f45;
}
.team__item:nth-child(2) > .team__name {
    color: #38c695;
}
.team__item:nth-child(3) > .team__name {
    color: #b27cf5;
}
.team__item:nth-child(4) > .team__name {
    color: #feb960;
}
.team__job {
    color: #616161;
    font-size: 13px;
    margin-top: 5px;
}
.team__item::after {
    content: '';
    position: absolute;
    bottom: 0;
    display: block;
    height: 3px;
    width: 100%;
}
.team__item1::after {
    background-color: #fc5f45;
}
.team__item2::after {
    background-color: #38c695;
}
.team__item3::after {
    background-color: #b27cf5;
}
.team__item4::after {
    background-color: #feb960;
}
.team__about {
    margin-top: 40px;
    height: 350px;
    width: 1140px;
    background-color: #fff;
    position: relative;
}
.team__about::before {
    content: '';
    display: block;
    width: 50px;
    height: 50px;
    background-color: #fff;
    position: absolute;
    top: -25px;
    left: 100px;
    transform: rotate(45deg);
}
.team__subtitle {
    margin: 80px 0 0 100px;
    font-size: 20px;
    font-weight: medium;
    color: #353535;
    font-family: sans-serif;
}
.team__subtext {
    margin: 40px 0 0 100px;
    width: 630px;
    font-size: 15px;
    color: #8b8b8b;
    font-family: sans-serifx;
}
.team__share {
    position: absolute;
    top: 180px;
    right: 260px;
}
.team__socials {
    width: 130px;
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 70px;
    top: 140px;
}
.team__socials::after {
    content: '';
    width: 2px;
    height: 150px;
    background-color: #efefef;
    position: absolute;
    top: -20px;
    left: -20px;
}
.team__social {
    display: flex;
}
.team__social + .team__social {
    margin-top: 15px;
}
.team__social-name {
    margin-left: 5px;
}



.info {
    height: 450px;
    background: url('img/info.png') 0/cover;
    display: flex;
    flex-direction: column;
}
.info__wrapper {
    padding: 0 15px;
}
.info__row {
    margin-top: 150px;
    display: flex;
    justify-content: space-between;
    width: 1000px;
}
.info__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.info__item::after {
    content: '';
    display: block;
    height: 16px;
    width: 16px;
    position: absolute;
    top: 170px;
}
.info__item1::after {
    background: url('img/info1_.png') no-repeat;
}
.info__item2::after {
    background: url('img/info2_.png') no-repeat;
}
.info__item3::after {
    background: url('img/info3_.png') no-repeat;
}
.info__item4::after {
    background: url('img/info4_.png') no-repeat;
}
.info__number {
    margin-top: 25px;
    font-size: 20px;
    color: #fefefe;
    font-weight: medium;
}
.info__name {
    margin-top: 30px;
    font-size: 15px;
    color: #bebdc0;
}



.pricing {
    height: 1050px;
    background: #f7f7f7;
}
.pricing__wrapper {
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    background: url('img/06.png') top 5px center no-repeat;
    align-items: center;
}
.pricing__title {
    color: #313131;
    margin-top: 150px;
    font-size: 50px;
    font-weight: bold;
    text-align: center;
}
.pricing__text {
    font-size: 18px;
    color: #898989;
    margin-top: 40px;
    text-align: center;
}
.pricing__row {
    display: flex;
    margin-top: 80px;
}
.pricing__item {
    height: 560px;
    width: 360px;
    background-color: #fff;
    position: relative;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
}
.pricing__item + .pricing__item {
    margin-left: 30px;
}
.pricing__item::before {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    position: absolute;
    top: 0;
    left: 0;
}
.pricing__item1::before {
    background-color: #38c695;
}
.pricing__item2::before {
    background-color: #fc5f45;
}
.pricing__item3::before {
    background-color: #b27cf5;
}
.pricing__name {
    margin-top: 40px;
    font-size: 20px;
    font-weight: medium;
    font-family: Arial;
    text-align: center;
}
.pricing__img {
    text-align: center;
    margin-top: 30px;
}
.pricing__currancy {
    margin-top: -80px;
    font-size: 24px;
    color: white;
}
.pricing__period {
    font-size: 13px;
    color: white;
    margin-bottom: 70px;
}
.pricing__desc {
    text-align: center;
    font-size: 15px;
    color: #272727;
    margin-bottom: 22px;
    font-family: Arial, Helvetica, sans-serif;
}
.pricing__bold {
    font-weight: bold;
}
.pricing__tick::before {
    content: '✔';
    margin-right: 15px;
}
.pricing__button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
    margin: 0 auto;
    text-align: center;
    height: 45px;
    width: 180px;
    border-radius: 22.5px;
    font-weight: bold;
    transition: all 250ms;
    cursor: pointer;
}
.pricing__button1 {
    border: 3px solid #38c695;
    color: #38c695;
}
.pricing__button2 {
    border: 3px solid #fc5f45;
    color: #fc5f45;
}
.pricing__button3 {
    border: 3px solid #b27cf5;
    color: #b27cf5;
}
.pricing__button1:hover {
    color: white;
    background-color: #38c695;
}
.pricing__button2:hover {
    color: white;
    background-color: #fc5f45;
}
.pricing__button3:hover {
    color: white;
    background-color: #b27cf5;
}



.test {
    height: 850px;
    background-color: #3f4049;
}
.test__wrapper {
    padding: 0 15px;
    display: flex;
    align-items: center;
    flex-direction: column;
    background: url('img/07.png') top 5px center no-repeat;
}
.test__title, .test__text {
    color: white;
}
.test__title {
    margin-top: 150px;
    font-size: 50px;
    font-weight: bold;
}
.test__text {
    margin-top: 40px;
    font-size: 18px;
    font-weight: 200;
}
.test__content {
    margin-top: 80px;
    display: flex;
}
.test__quot {
    height: 310px;
    margin-left: -15px;
    margin-top: 60px;
    background: url('img/test2.png') 5px 5px no-repeat, #fff;
    padding: 40px;
    box-sizing: border-box;
    line-height: 25px;
    font-family: sans-serif;
    font-size: 15px;
    color: #616161;
    position: relative;
}
.test__sign {
    margin-top: 40px;
}
.test__author {
    font-size: 18px;
    font-weight: medium;
    color: #272727;
}
.test__job {
    margin-top: 5px;
    color: #fd8a77;
    font-size: 13px;
    font-family: sans-serif;
}
.test__quot::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background-color: #fd8a77;
}



.select {
    height: 1000px;
    background-color: #fff;
}
.select__wrapper {
    display: flex;
    padding: 0 15px;
    flex-direction: column;
    align-items: center;
    background: url('img/08.png') top 5px center no-repeat;
}
.select__title {
    margin-top: 150px;
    font-size: 50px;
    font-weight: bold;
    color: #313131;
}
.select__text {
    margin-top: 35px;
    color: #616161;
    font-family: Arial, sans-serif;
    font-size: 18px;
}
.select__container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 80px;
    grid-gap: 75px;
}
.select__header {
    display: flex;
    align-items: center;
}
.select__name {
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    margin-left: 15px;
    width: 130px;
    color: #272727;
}
.select__row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 150px;
}
.select__subname {
    font-size: 25px;
    font-family: Arial, sans-serif;
    color: #272727;
}
.select__button {
    height: 50px;
    width: 180px;
    background-color: #fc5f45;
    text-align: center;
    line-height: 50px;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
    color: white;
    border-radius: 25px;
    margin-left: 20px;
    cursor: pointer;
}



.subscribe {
    height: 420px;
}
.subscribe__wrapper {
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.subscribe__title {
    margin-top: 150px;
    font-family: sans-serif;
    font-size: 30px;
}
.subscribe__message {
    margin-top: 50px;
    display: flex;
}
.subscribe__text, .subscribe__button {
    height: 50px;
    width: 300px;
}
.subscribe__text {
    border: 2px solid #efefef;
    box-sizing: border-box;
    outline: none;
    padding-left: 25px;
    border-radius: 25px 0 0 25px;
    background-color: #f7f7f7;
    color: #6b6b6b;
}
.subscribe__button {
    width: 180px;
    background-color: #fc5f45;
    border-radius: 0 25px 25px 0;
    text-align: center;
    line-height: 50px;
    color: white;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
    cursor: pointer;
}



.touch {
    height: 1200px;
    background-color: #cccccc;
}
.touch__wrapper {
    padding: 0 15px;
    background: url('img/10.png') top 5px center no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.touch__title {
    margin-top: 150px;
    font-size: 50px;
    color: #313131;
}
.touch__text {
    color: #616161;
    font-size: 18px;
    margin-top: 40px;
}
.touch__comunication {
    margin-top: 80px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.touch__name, .touch__email, .touch__subject, .touch__budget {
    flex: 0 1 calc(50% - 15px);
    height: 50px;
    width: 200px;
}
.touch__message, .touch__subject, .touch__budget {
    margin-top: 20px;
}
.touch__message {
    flex: 0 1 100%;
    height: 200px;
    resize: none;
}
.touch__name, .touch__email, .touch__subject, .touch__budget, .touch__message {
    text-align: center;
    outline: none;
    border: 3px solid #cccccc;
    box-sizing: border-box;
    border-radius: 4px;
}
.touch__button {
    margin: 50px auto 0;
    text-transform: uppercase;
    height: 50px;
    width: 190px;
    background-color: #fc5f45;
    text-align: center;
    line-height: 50px;
    font-family: Arial, sans-serif;
    color: white;
    border-radius: 25px;
    cursor: pointer;
}
.touch__footer {
    margin-top: 150px;
    height: 220px;
    width: 100%;
    background-color: #3f4049;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    justify-items: center;
    box-sizing: border-box;
    position: relative;
}
.touch__item {
    width: 130px;
    display: flex;
    flex-direction: column;
    flex: 0 1 calc(25% - 120px);
}
.touch__footer:first-child {
    justify-self: center;
}
.touch__imgs {
    display: flex;
}
.touch__imgs > img {
    margin-left: 20px;
} 
.touch__imgs>img:first-child {
    margin-left: 0;
}
.touch__subtitle {
    margin-bottom: 35px;
    font-size: 18px;
    font-family: sans-serif;
}
.touch__subtext {
    color: #fef4f2;
}
.touch__item4 {
    margin-top: -50px;
}
.touch__item::after {
    content: '';
    width: calc(100% / 4);
    height: 3px;
    display: block;
    position: absolute;
    bottom: 0;
}
.touch__item1::after {
    background-color: #fc5f45;
    left: 0;
}
.touch__item2::after {
    background-color: #38c695;
    left: 25%;
}
.touch__item3::after {
    background-color: #b27cf5;
    left: 50%;
}
.touch__item4::after {
    background-color: #feb960;
    left: 75%;
}
.touch__subtitle2{
    color: #38c695;
}
 .touch__subtitle3{
    color: #b27cf5;
 }
.touch__subtitle4 {
    color: #feb960;
}