/* grid-auto-rows: minmax(200px, auto); - Высота блоков */
/* grid-row - позиция сверху вниз или указать */
/* grid-column - позиция слева направо или указать */
/* align-self - выровнять блок в сетке */
/* grid-template-columns - указать сколько колонок в fr */
body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
}
.container {
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
}
.title-section {
    color: #fff;
    font-size: 44px;
    text-align: center;
    font-weight: 600;
    margin-top: 0;
}
.title-section::after {
    content: '';
    color: #fff;
    display: block;
    background-color: #fcac45;
    height: 5px;
    width: 100px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}
/* dn */
#first, #about-us, #our-team, #our-services, #our-clients, #our-work {
    
}
/* First Section */
#first {
    padding-top: 60px;
    background-color: #111111;
    height: 100vh;
}
header {
    color: #fff;
    font-weight: 700;
    display: grid;
    grid-template-columns: 1fr 2fr;
}
header .header-content {
    display: grid;
    justify-items: end;
}
ul {
    padding-left: 0;
    margin-top: 6px;
    margin-bottom: 0;
}
li a {
    color: #fff;
    text-decoration: none;
}
ul li {
    list-style: none;
    display: inline-block;
    font-size: 14px;
    margin-left: 20px;
}
ul li:nth-child(1) {
    border-bottom: 3px solid #fcac45;
}
ul li:hover {
    border-bottom: 3px solid #fcac45;
    transition: all 0.2s;
}
.header-title {
    font-size: 24px;
}
.title-page {
    color: #999999;
    text-align: center;
    font-weight: 300;
    margin-top: 220px;
}
.title-page h1 {
    font-size: 44px;
    font-weight: 300;
    margin-bottom: 0;
    margin-top: 0;
}
.titile-page p {
    margin-top: 25px;
}
.title-page span {
    font-weight: 700;    
}
.title-page h1 span {
    color:#fcac45;
}
/* Section About Us */
#about-us {
    padding-bottom: 100px;
    padding-top: 100px;
}
.about-us_content {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.about-us_content h2 {
    border-bottom: 4px solid #fcac45;
    display: inline-block;
    color: #222222;
    padding-bottom: 10px;
}
.about-us_content p {
    color: #767676;
    font-size: 18px;
    margin-bottom: 0;
}
.about-us_content p:nth-child(2) {
    margin-top: 10px;
}
.about-us_content h2, p {
    font-weight: 300;
}
.about-us_content p {
    margin-top: 15px;
}
.about-us_content span {
    font-style: italic;
    font-size: 16px;
}
.about-us_content b {
    font-weight: 600;
}
.about-us_text {
    padding-left: 25px;
}
.about-us_text-features {
    margin-top: 45px;
}
.about-us_text-features b {
    padding-left: 10px;
}
.about-us_text-features p::before {
    content: '';
    width: 14px;
    height: 14px;
    display: inline-block;
    background: url(../img/about-us_point.svg);
}
/* Section Our Team */
#our-team {
    background-color: #070707;
    padding-top: 100px;
    padding-bottom: 165px;
}
.our-team_content {
    color: #fff;
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-top: 90px;
}
.our-team_person {
    padding-left: 15px;
    padding-right: 15px;
}
.person-info {
    margin-top: 20px;
}
.person-info p {
    margin-top: 30px;
}
/* Section Our Services */
#our-services {
    color: #222222;
    padding-top: 100px;
    padding-bottom: 100px;
}
.our-services_content {
    margin-top: 100px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.our-services_title h2 {
    color: #222222;
    margin-bottom: 35px;
}
.our-services_title p {
    text-align: center;
    color: #6c6c6c;
    font-style: italic;
}
.our-services_feature {
    text-align: center;
}
.feature-info b {
    font-size: 25px;
}
.feature-info p {
    font-size: 15px;
    margin-top: 10px;
}
.feature-info {
    margin-top: 30px;
    padding-left: 15px;
    padding-right: 15px;
}
.feature-img {
    width: 125px;
    height: 125px;
    display: inline-block;
    border: 7px solid #fcac45;
    border-radius: 100%;
}
.our-services_feature:nth-child(1) .feature-img {
    background: url(../img/our-services_mac.svg) no-repeat center center;
}
.our-services_feature:nth-child(2) .feature-img {
    background: url(../img/our-services_mobile.svg) no-repeat center center;
}
.our-services_feature:nth-child(3) .feature-img {
    background: url(../img/our-services_photo.svg) no-repeat center center;
}
.our-services_feature:nth-child(4) .feature-img {
    background: url(../img/our-services_marketing.svg) no-repeat center center;
}
/* Section Our Clients */
#our-clients {
    padding-top: 100px;
    padding-bottom: 210px;
    background-color: #0b0b0b;
}
.our-clients_content {
    padding-left: 90px;
    padding-right: 90px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 25px;
    justify-items: center;
    margin-top: 50px; 
}
.our-client_logo img {
    height: 22px;
}
.our-clients_title span {
    font-weight: 600;
}
.our-clients_title h2 {
    font-weight: 300;
}
/* Section Our Work */
#our-work {
    padding-top: 100px;
    padding-bottom: 100px;
    background-color: #fff;
}
.our-work_title h2 {
    color: #222222;
    font-weight: 300;
    margin-bottom: 10px;
}
.our-work_title span {
    font-weight: 600;
}
.our-work_title p {
    text-align: center;
    font-style: italic;
    color: #6c6c6c;
}
.our-work_content {
    margin-top: 170px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 30px;
    justify-items: center;
}
/* Section Testimonial */
#testimonial {
    background-color: #0b0b0b;
    padding-top: 100px;
    padding-bottom: 170px;
}
.testimonial_title h2 {
    font-weight: 300;
}
.testimonial_title span {
    font-weight: 600;
}
.testimonial_content p {
    text-align: center;
    color: #e7e7e7;
    font-size: 18px;
    font-weight: 600;
}
.testimonial_content small {
    display: block;
    text-align: center;
    color: #b2b2b2;
    font-size: 18px;
}
/* Section Contact Us */
#contact-us {
    padding-top: 100px;
    padding-bottom: 100px;
    padding-left: 185px;
    padding-right: 185px;
    background-color: #fff;
}
.contact-us_title h2 {
    color: #222222;
    font-weight: 600;
}
.contact-us_title p {
    color: #6c6c6c;
    font-weight: 600;
}
.contact-us_title {
    text-align: center;
}
.contact-us_content {
    margin-top: 120px;
}
.contact-us_content form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 30px;
}

form {
    color: #6c6c6c;
    font-size: 18px;
}
textarea {
    width: 100%;
    resize: none;
    padding: 0;
    height: 165px;
    outline: none;
    margin-top: 50px;
    box-sizing: border-box;
    padding-left: 15px;
    padding-top: 15px;
}

input {
    width: 100%;
    height: 40px;
    background-color: #fff;
    border: 1px solid #999999;
    outline: none;
    padding-left: 15px;
    box-sizing: border-box;
}
form label {
    position: relative;
    bottom: 10px;
}
form label span {
    color: red;
}
form button {
    height: 40px;
    width: 165px;
    background-color: #fcac45;
    border: none;
    color: #fff;
    text-align: center;
    outline: none;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 20px;
}
form button:hover {
    opacity: .7;
}
.textarea-message {
    grid-column: 1/3;
}
.button-send {
    grid-column: 2;
    text-align: right;
}
/* Section Footer */
footer {
    background-color: #222222;
    padding-top: 30px;
    padding-bottom: 30px;
}
.footer-content {
    text-align: center;
}
.footer-content img {
    margin-left: 15px;
    transition: all 0.2s;
}
.footer-content img:hover {
    opacity: .8;
}