styles.css

/* reset */

* {
    box-sizing: border-box;
}

body,
p,
a,
ul,
li,
blockquote {
    margin: 0;
    padding: 0;
    text-decoration: none;
}

li {
    list-style-type: none;
}


/* base styles */

html {
    overflow-x: hidden;
}

body {
    background: #F4F4F4;
    overflow-x: hidden;
    font-family: 'Fira Sans', sans-serif;
    min-width: 300px;
    height: 100%;
}

.site-logo:hover {
    opacity: 0.6;
}

.button {
    color: #FFFFFF;
    padding: 17px 32px;
    text-transform: uppercase;
    letter-spacing: 4px;
    display: inline-block;
    font-size: 0.875em;
    font-weight: 500;
    background-color: #4737FF;
    cursor: pointer;
}

.button:hover {
    background: #FB6051;
}

.searh-btn {
    background: url(./assets/Search\ Icon.svg);
    height: 20px;
    width: 20px;
}

.searh-btn:hover {
    opacity: 0.6;
}

.burger-btn {
    background: url(./assets/Menu\ Icon.svg);
    width: 34px;
    height: 14px;
}

.burger-btn:hover {
    opacity: 0.6;
}

.site-logo img {
    display: block;
}

input {
    background: #F5F4FF;
    padding: 9px 27px 9px 20px;
    border-radius: 0;
    border: none;
    color: #222222;
    font-size: 1.125em;
}

input::placeholder {
    opacity: 0.5;
}

.section__text h2,
blockquote {
    font-weight: 600;
    font-size: 2.500em;
    letter-spacing: -1px;
    color: #222222;
}

.section__text p {
    font-size: 1.125em;
    color: #222222;
    opacity: 0.7;
    font-weight: 400;
    margin: 30px 0 0 0;
}

.section__text p:first-of-type {
    margin: 0;
}

.play__btn::before {
    content: '';
    height: 65px;
    width: 65px;
    background: url(./assets/Play\ Button\ Primary.svg) no-repeat center center;
    background-size: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.section__name {
    grid-column: 2/12;
    grid-row: 1;
    text-transform: uppercase;
    font-size: 0.875em;
    letter-spacing: 4px;
    color: #222222;
    opacity: 0.7;
}

.section__name:before {
    content: '\2014';
    display: inline-block;
    margin: 0 10px 0 0;
}

.section__title {
    font-weight: 600;
    font-size: 2.500em;
    letter-spacing: -1px;
    color: #222222;
    margin: 0;
}

.list__item a {
    color: #222222;
    opacity: 0.5;
}

.list__item a:visited {
    color: #222222;
    opacity: 0.5;
}

.list__item a:hover {
    color: #1434E1;
    opacity: 1;
}

.wrap {
    margin: 0 125px;
}


/* styles */

.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

.site-nav {
    padding: 60px 0;
}

.site-nav .site-logo {
    grid-column: 2/3;
    grid-row: 1;
}

.site-nav .searh-btn {
    grid-column: 6/8;
    grid-row: 1;
    margin: 0 auto;
    cursor: pointer;
}

.site-nav .burger-btn {
    grid-column: 11/12;
    grid-row: 1;
    justify-self: right;
    cursor: pointer;
}

#hero {
    height: 100vh;
    position: relative;
    min-height: 800px;
}

.hero-text {
    grid-column: 2/6;
    grid-row: 1;
}

.hero-text h1 {
    font-style: normal;
    font-weight: 700;
    font-size: 3.750em;
    letter-spacing: -1px;
    color: #151515;
    margin: 0
}

.hero-text p {
    font-weight: 400;
    font-size: 1.125em;
    color: rgba(34, 34, 34, 0.7);
    margin: 30px 0 0 0;
}

.hero-img {
    grid-column: 7/13;
    grid-row: 1;
    background: url(./assets/hero_placeholder.svg) no-repeat top center;
    background-size: cover;
}

.button-hero {
    margin: 60px 0 0 0;
}

.hero-video-player {
    position: absolute;
    left: 45%;
    bottom: 30%;
}

.hero-loader {
    position: absolute;
    grid-column: 2;
    bottom: 209px;
    display: flex;
    flex-direction: row;
    width: 345px;
    justify-content: space-between;
}

.hero-loader-number {
    display: flex;
    align-items: center;
    width: 100%;
}

.hero-loader-number:first-of-type::after {
    content: ' ';
    background: #C6B393;
    display: inline-block;
    margin: 0 0 0 10px;
    height: 2px;
    width: 100%;
}

.hero-loader-number:last-of-type::before {
    content: ' ';
    background: #D7D4D4;
    display: inline-block;
    margin: 0 10px 0 0;
    height: 2px;
    width: 100%;
}

#about {
    margin: 135px 0 0 0;
}

.about__placeholder {
    grid-column: 2/6;
    grid-row: 1;
}

.about__placeholder img {
    width: 100%;
}

.about__text {
    grid-column: 7/12;
    grid-row: 1;
}

.author {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 60px 0 0 0;
}

.author__text-info {
    margin: 0 0 0 30px;
}

.author__name {
    font-weight: 500;
    color: #222222;
    font-size: 1.375em;
}

.author__position {
    font-weight: 400;
    font-size: 1.125em;
    color: #222222;
    opacity: 0.7;
    margin: 13px 0 0 0;
}

#services {
    margin: 140px 0 0 0;
}

.services__introduction {
    margin: 40px 0 0 0;
    grid-column: 2/12;
    grid-row: 2;
}

.section__title-services {
    grid-column: 1/7;
}

.services__list {
    grid-column: 9/13;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

.services__list a {
    font-size: 1.125em;
    font-weight: 400;
}

.services__slider {
    margin: 100px 0 0 0;
    grid-column: 2/12;
    grid-row: 3;
}

.slider__content {
    display: flex;
}

.slide {
    position: relative;
    margin: 0 30px 0 0;
    opacity: 30%;
}

.slide__active {
    opacity: 100%;
}

.slider__controls {
    display: flex;
    margin: 50px 0 0 0;
}

.arrow {
    height: 50px;
    width: 50px;
    background: url(./assets/slider/Arrow.svg) no-repeat center center;
    background-size: cover;
    margin: 0 25px 0 0;
    cursor: pointer;
}

.arrow.left {
    transform: rotate(180deg);
}

.arrow:hover {
    filter: contrast(1.2);
}

#features {
    margin: 180px 0 0 0;
}

.features__placeholder {
    display: grid;
    grid-column: 1/8;
    grid-row: 1;
}

.features__img1 {
    grid-column: 1/9;
    grid-row: 1;
    width: 100%;
}

.features__img2 {
    grid-column: 6/11;
    grid-row: 1;
    margin: 100px 0 0 0;
    width: 100%;
    box-shadow: 30px 80px 180px rgba(0, 0, 0, 0.25);
}

.features__text {
    grid-column: 8/12;
    grid-row: 1;
}

.features__goals {
    margin: 60px 0 0 0;
}

.features__goals li {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0 0 30px 0;
}

.features__goals li:last-of-type {
    margin: 0 0 0 0;
}

.features__goals li img {
    width: 54px;
    height: 54px;
}

.features__goals li span {
    margin: 0 0 0 30px;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 0.875em;
    font-weight: 500;
    color: #000000;
}

#works {
    margin: 200px 0 0 0;
}

.works__introduction {
    margin: 40px 0 0 0;
    grid-column: 2/12;
    grid-row: 2;
    display: grid;
    grid-column-gap: 30px;
}

.works__gallery {
    margin: 110px 0 0 0;
    grid-row: 3;
    grid-column: 2/12;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 30px;
}

.works__footer {
    margin: 50px 0 0 0;
    grid-column: 2/12;
    grid-row: 4;
}

.works__footer p {
    grid-column: 1/8
}

.button-wrap {
    grid-column: 8/13;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

.section__title-works {
    grid-row: 1;
}

.works__list {
    grid-row: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-self: center;
    justify-self: right;
}

.works__list li {
    margin: 0 24px 0 0;
}

.works__list li:last-of-type {
    margin: 0;
}

.works__list a {
    text-transform: uppercase;
    color: #222222;
    opacity: 0.3;
    letter-spacing: 4px;
    font-size: 0.875em;
    font-weight: 500;
}

.works__gallery img {
    width: 100%;
    display: block;
}

.works__gallery a:hover {
    box-shadow: -30px 80px 200px rgba(0, 0, 0, 0.25);
    transform: translateY(-20px);
}

.works__gallery a:hover::before {
    content: '';
    height: 65px;
    width: 65px;
    background: url(./assets/Play\ Button\ Primary.svg) no-repeat center center;
    background-size: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

#testimonials {
    padding: 250px 0 175px 0;
}

.section__name-testimonials {
    grid-column: 1/13;
}

.testimonials__wrapper {
    grid-column: 2/7;
    display: grid;
    grid-auto-rows: minmax(min-content, auto);
}

.testimonials__text {
    margin: 70px 0 0 0;
    grid-row: 2;
}

.testimonials__text-info {
    margin: 120px 0 0 0;
    display: flex;
    flex-direction: column;
}

.testimonials__wrapper .slider__controls {
    align-self: end;
    grid-row: 3;
}

.testimonials__img {
    grid-column: 8/12;
    justify-self: right;
    width: 100%;
}

#clients {
    background: #fafafa;
    padding: 100px 0 135px 0;
}

.clients__introduction {
    grid-column: 2/12;
    grid-row: 1;
    display: grid;
}

.section__title-clients {
    grid-column: 1/8;
    grid-row: 1;
}

.section__name-clients {
    opacity: 1;
    font-weight: 500;
}

.clients__text {
    grid-column: 8/13;
    grid-row: 1;
}

.clients__text p {
    margin: 17px 0 0 0;
    font-size: 1.125em;
    color: #222222;
    opacity: 0.7;
    font-weight: 400;
    margin: 30px 0 0 0;
}

.clients__list {
    margin: 80px 0 0 0;
    grid-row: 2;
    grid-column: 2/12;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.clients__list li {
    padding: 10px;
}

.clients__list li img {
    opacity: 0.15;
}

.clients__list li img:hover {
    opacity: 1;
}

.footer {
    padding: 70px 0 35px 0;
    background: #515151;
}

.footer hr {
    grid-row: 2;
    grid-column: 2/12;
    width: 100%;
    opacity: 0.2;
    margin: 40px 0 35px 0;
}

.footer__navigation {
    grid-row: 1;
    grid-column: 2/12;
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.footer__navigation .site-logo {
    margin: 0 60px 0 0;
}

.footer__navigation-list {
    flex-grow: 1;
    margin: 0 60px 0 0;
}

.footer__navigation-list li {
    margin: 0 10px 0 0;
}

.contact-us-form {
    display: flex;
    min-width: 280px;
}

.button--contact {
    margin: 0 0 0 15px;
    background: #C6B393;
    border: none;
}

.button--contact:hover {
    background: #F2AC34;
}

.email-input {
    width: 100%;
}

.footer__submenu {
    grid-row: 3;
    grid-column: 2/12;
    border: none;
}

.navigation {
    display: flex;
    justify-content: space-between;
}

.navigation li a {
    font-size: 1.125em;
    color: #FFFFFF;
    font-weight: 400;
}

.navigation li a:hover {
    opacity: 0.6;
}

.submenu__nav {
    grid-row: 1;
    grid-column: 1/7;
}

.submenu__nav li a {
    font-size: 1.125em;
    opacity: 0.4;
}

.submenu__nav li a:hover {
    opacity: 0.6;
}

.submenu__socials {
    grid-row: 1;
    grid-column: 12/13;
    justify-self: right;
    display: flex;
    flex-direction: row;
}

.submenu__socials li a {
    opacity: 0.4;
}

.submenu__socials li a:hover {
    opacity: 0.6;
}

@media only screen and (max-width: 640px) {
    body {
        font-size: 14px;
    }

    .play__btn::before {
        content: '';
        display: block;
        height: 35px;
        width: 35px;
    }

    .play__btn:hover::before {
        filter: contrast(0.9);
    }
    
    .site-nav {
        padding: 40px 0;
    }

    .hero-text {
        grid-column: 2/12;
    }

    .hero-img {
        grid-column: 8/13;
        z-index: -1;
        opacity: 0.3;
        background: url(./assets/hero_placeholder.svg) no-repeat center left;
    }

    .button-hero {
        margin: 60px 0 0 0;
    }

    .hero-video-player {
        display: none;
    }

    .hero-loader {
        display: none;
    }

    #about {
        margin: 100px 0 0 0;
    }

    .about__placeholder {
        grid-column: 8/13;
        z-index: -1;
        opacity: 0.3;
    }

    .about__placeholder img {
        width: auto;
    }

    .about__text {
        grid-column: 2/12;
        grid-row: 1;
    }

    .author {
        margin: 30px 0 0 0;
    }

    #services {
        margin: 100px 0 0 0;
    }

    .services__introduction {
        margin: 40px 0 0 0;
        grid-column: 2/12;
        grid-row: 2;
    }

    .section__title-services {
        grid-column: 1/13;
        grid-row: 1;
    }

    .services__list {
        grid-column: 1/13;
        grid-row: 2;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 20px;
        margin: 30px 0 0 0;
    }

    .services__slider {
        margin: 50px 0 0 0;
    }

    .slide img {
        width: 100%;
    }

    .slider__controls {
        margin: 10px 0 0 0;
    }

    .arrow {
        height: 25px;
        width: 25px;
    }

    #features {
        margin: 50px 0 0 0;
    }

    .features__placeholder {
        display: grid;
        grid-column: 1/13;
        grid-row: 1;
    }

    .features__img1 {
        display: none;
    }

    .features__img2 {
        grid-column: 8/13;
        grid-row: 1;
        opacity: 0.3;
        width: auto;
    }

    .features__text {
        grid-column: 2/12;
        grid-row: 1;
    }

    #works {
        margin: 100px 0 0 0;
    }

    .section__title-works {
        grid-column: 1/12;
        grid-row: 1;
    }

    .works__list {
        grid-row: 2;
        grid-column: 1/12;
        flex-direction: row;
        flex-wrap: wrap;
        justify-self: left;
        margin: 15px 0 0 0;
    }

    .works__gallery {
        margin: 50px 0 0 0;
        grid-template-columns: 1fr 1fr;
        grid-gap: 15px;
    }

    .works__gallery a:hover {
        transform: translateY(-10px);
    }

    .works__gallery a:hover::before {
        height: 35px;
        width: 35px;
    }

    .works__footer {
        margin: 50px 0 0 0;
    }

    .works__footer p {
        grid-column: 1/13
    }

    .button-wrap {
        grid-column: 1/13;
        margin: 15px 0 0 0;
    }

    #testimonials {
        padding: 100px 0 100px 0;
    }

    .testimonials__wrapper {
        grid-row: 1;
        grid-column: 2/12;
        display: grid;
        grid-auto-rows: minmax(min-content, auto);
    }

    .testimonials__text {
        margin: 35px 0 0 0;
    }

    .testimonials__text-info {
        margin: 60px 0 0 0;
    }

    .testimonials__img {
        display: none;
    }

    #clients {
        padding: 50px 0 55px 0;
    }

    .section__title-clients {
        grid-column: 1/13;
    }

    .clients__text {
        grid-column: 1/13;
        grid-row: 2;
        margin: 15px 0 0 0;
    }

    .clients__text p {
        margin: 15px 0 0 0;
    }

    .clients__list {
        margin: 40px 0 0 0;
        flex-wrap: wrap;
    }

    .clients__list li {
        margin: 10px 0;
    }

    .footer {
        padding: 35px 0 15px 0;
    }

    .footer hr {
        grid-row: 2;
        grid-column: 2/12;
        width: 100%;
        opacity: 0.2;
        margin: 40px 0 35px 0;
    }

    .footer__navigation {
        grid-row: 1;
        grid-column: 2/12;
        align-items: center;
    }

    .footer__navigation .site-logo {
        grid-column: 1/2;
        grid-row: 1;
    }

    .footer__navigation-list {
        grid-column: 3/13;
        grid-row: 1;
        display: flex;
        flex-wrap: wrap;
    }

    .footer__navigation .contact-us-form {
        grid-column: 1/13;
        grid-row: 3;
        margin: 10px 0 0 0;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .button--contact {
        margin: 10px 0 0 0;
    }

    .submenu__nav {
        grid-row: 1;
        grid-column: 1/13;
    }

    .submenu__socials {
        grid-row: 2;
        grid-column: 1/13;
        justify-self: right;
        margin: 10px 0 0 0;
    }
}

@media only screen and (max-width: 768px) {
    .hero-video-player {
        left: 45%;
        bottom: 30%;
    }

    .hero-loader {
        left: 40%;
        bottom: 25%;
    }
}