style.css

body {
   margin: 0;

   font-family: "Raleway", sans-serif;
   font-size: 14px;
   color: #6c7279;
   -webkit-font-smoothing: antialiased;

   background-color: #fff;
}

*,
*::after,
*::before,
*:after,
*:before {
   box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   margin: 0;
}

p {
   margin: 0 0 10px;
}

/* Container
================= */
.container {
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 15px;
}

/* Header
================= */
.header {
   width: 100%;
   height: 100px;

   position: absolute;
   top: 0;
   left: 0;
   z-index: 1000;
}

.header.fixed {
   position: fixed;
   background-color: #31344e;
   height: auto;
}

.header.fixed .header__inner {
   padding: 15px 0;
   border-bottom: 0;
}

.header.fixed .header__inner::after {
   display: none;
}

.header__inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 35px 0;

   border-bottom: 1px solid #515369;
}

.header__inner::after {
   display: none;
   content: "";
   position: absolute;
   bottom: 0;
   left: 2%;
   width: 96%;
   height: 1px;
   background: #515369;
}

/*Nav
================*/
.nav {
   display: flex;
   font-size: 13px;
   font-weight: 700;
   text-transform: uppercase;
}

.nav__link {
   margin-left: 50px;

   color: #fff;
   text-decoration: none;
   opacity: 0.75;

   transition: opacity 0.1s linear;
}

.nav__link:first-child {
   margin-left: 0;
}

.nav__link:hover {
   opacity: 1;
}

/*Intro
===============*/
.intro {
   display: flex;
   flex-direction: column;
   justify-content: center;
   height: 750px;
   padding: 100px 20px;
   margin: 0;

   background: #31344e url("img/intro-bg.jpg") no-repeat center / cover;
}

.intro__inner {
   max-width: 970px;
   text-align: center;
   margin: 0 auto;
}

.intro__title {
   margin: 0 0 30px;

   font-family: "Open Sans", sans-serif;
   font-size: 65px;
   color: #fff;
   font-weight: 700;
   text-transform: uppercase;
   text-align: center;
}

.intro__subtitle {
   margin-bottom: 60px;

   color: #fff;
   font-weight: 400;
   font-size: 22px;
   line-height: 1.5;
}

/*Button
===============*/
.button {
   display: inline-block;
   vertical-align: center;
   padding: 14px 40px;
   cursor: pointer;
   border-radius: 2px;
   border: 0px;

   color: #fff;
   font-family: inherit;
   font-size: 13px;
   font-weight: 600;

   text-decoration: none;
   text-transform: uppercase;
   transition: background 0.1s linear;
}

.button--red {
   background: #e84545;
}

.button--large {
   min-width: 280px;
}

.button--red:hover {
   background: #dd3434;
}

.button--red::hover {
   background: #dd3434;
}

/*Features
===============*/
.features {
   display: flex;
   flex-wrap: wrap;
   margin: 100px 0;
}

.feature__item {
   width: 33.33333%;

   text-align: center;
   padding: 0 40px;
   margin: 25px 0;
}

.feature__icon {
   margin-bottom: 20px;
}

.feature__title {
   margin-bottom: 20px;
   font-size: 14px;
   color: #2d3033;
   font-weight: 700;
   text-transform: uppercase;
}

.feature__text {
   font-size: 14px;
   line-height: 1.5;
   color: #6c7279;
}

/*Works
===============*/
.works {
   display: flex;
   flex-wrap: wrap;
}

.work__item {
   height: 350px;
   box-sizing: border-box;
   width: 25%;
   border: #fff 1px solid;
   overflow: hidden;
   position: relative;
}

.work__item:hover .work__content {
   opacity: 1;
}

.work__image {
   min-width: 100%;
   position: absolute;
   left: 50%;
   top: 50%;
   z-index: 1;
   transform: translate3d(-50%, -50%, 0);
}

.work__content {
   display: flex;
   flex-direction: column;
   height: 100%;
   width: 100%;
   justify-content: center;
   text-align: center;

   background: rgba(232, 69, 69, 0.9);
   opacity: 0;

   position: absolute;
   top: 0%;
   left: 0%;
   z-index: 2;

   transition: opacity 0.2s linear;
}

.work__title {
   margin-bottom: 5px;

   font-size: 14px;
   font-weight: 700;
   color: #fff;

   text-transform: uppercase;
}

.work__text {
   font-size: 14px;
   font-weight: 400;
   color: #fff;
}

/*Team
===============*/
.team {
   margin: 100px 0 70px;
}

.team__inner {
   display: flex;
   flex-wrap: wrap;
   margin: 0 -15px;
}

.team__item {
   width: 25%;
   padding: 0 15px;
   margin-bottom: 30px;
}

.team__image {
   display: block;
   max-width: 100%;
   height: auto;
   margin-bottom: 20px;
   margin-left: auto;
   margin-right: auto;
}

.team__title {
   margin-bottom: 8px;
   font-size: 22px;
   color: #2d3033;
}

.team__prof {
   margin-bottom: 15px;
   font-size: 13px;
   color: #e84545;
   text-transform: uppercase;
}

.team__text {
   margin-bottom: 20px;
   font-size: 14px;
   line-height: 1.5;
   color: #6c7279;
}

/*Team
===============*/
.social {
   display: flex;
}

.social--footer {
   justify-content: center;
}

.social__item {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   margin-right: 4px;
   background-color: #fff;
   border: 1px solid #e8ecee;
   transition: background 0.1s linear;
}

.social--footer .social__item {
   background-color: transparent;
   border-color: #fff;
   border-width: 2px;
   border-radius: 2px;
}

.social--footer .social__icon {
   fill: #fff;
}

.social__icon {
   display: block;
   fill: #c6cacc;
   height: 20px;
   width: auto;
   transition: fill 0.1s linear;
}

.social__item:hover {
   background-color: #eee;
}

.social__item:hover .social__icon {
   fill: #2d3033;
}

/*Testimonials
===============*/
.testimonials {
   background-color: #53354a;
   overflow: hidden;
}

.testimonials__item {
   display: flex;
   flex-wrap: wrap;
}

.testimonials__photo {
   position: relative;
   height: 500px;
   width: 50%;
}

.testimonials__img {
   position: absolute;
   top: 50%;
   right: 0;
   z-index: 1;

   transform: translateY(-50%);
}

.testimonials__content {
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: 50%;
   padding-left: 80px;
}

.testimonials__text {
   font-family: "Cardo", sans-serif;
   margin-bottom: 20px;
   font-style: italic;
   font-size: 36px;
   line-height: 1.2;
   color: #fff;
}

.testimonials__author {
   font-weight: 700;
   font-size: 13px;
   text-transform: uppercase;
   color: #fff;
}

/*Testimonials
===============*/
.download {
   text-align: center;
   background-color: #fff;
   margin: 90px 0;
}

.download__title {
   margin-bottom: 10px;
   font-size: 28px;
   color: #2d3033;
   font-weight: 300;
}

.download__subtitle {
   margin-bottom: 30px;
   font-size: 13px;
   color: #2d3033;
   font-weight: 700;
   text-transform: uppercase;
}

/*Footer
===============

About
===============*/

footer {
   display: block;
}

.about {
   background-color: #3a3e64;
}

.about__inner {
   display: flex;
   flex-wrap: wrap;
   padding: 70px 0;
}

.about__block {
   width: 33.3333%;
   text-align: center;
   padding: 0 15px;
   align-items: center;
}

.about__title {
   margin-bottom: 10px;
   font-size: 14px;
   font-weight: 700;
   color: #fff;
   text-transform: uppercase;
}

.about__text {
   font-size: 14px;
   line-height: 1.5;
   font-style: normal;
   color: rgba(255, 255, 255, 0.5);
}

/*Copyright
===============*/
.copyright {
   padding: 20px 0;
   background-color: #313454;
}

.copyright__text {
   text-align: center;
}

span.name {
   color: #fff;
}
span.heart {
   color: #f00;
}

/*Burger
===============*/
.burger {
   display: none;
   padding: 9px 15px;

   background: none;
   border: 0;
   cursor: pointer;
}

.burger__item {
   display: block;
   width: 30px;
   height: 3px;

   background-color: #fff;

   font-size: 0;
   color: transparent;

   position: relative;
}

.burger__item::before,
.burger__item::after {
   content: "";
   height: 100%;

   background-color: #fff;

   position: absolute;
   right: 0;
   z-index: 1;
}

.burger__item::before {
   width: 26px;
   top: -8px;
}

.burger__item::after {
   width: 28px;
   bottom: -8px;
}

/*Media
===============*/
@media (max-width: 1330px) {
   /*Header*/
   .header__inner {
      border-bottom: none;
   }

   .header__inner::after {
      display: block;
   }
}

@media (max-width: 991px) {
   /*Header*/

   /*Nav*/
   .nav {
      display: none;
      width: 100%;
      flex-direction: column;
      background-color: #31344e;
      text-align: right;
      position: absolute;
      top: 100%;
      right: 0;
   }

   .nav.show {
      display: flex;
   }

   .nav__link {
      padding: 9px 15px;
   }

   /*Burger*/
   .burger {
      display: block;
   }

   /*Intro*/
   .intro {
      height: auto;
      padding-top: 130px;
      padding-bottom: 80px;
   }
   .intro__title {
      font-size: 40px;
   }

   /*Features*/
   .features {
      margin: 40px 0;
   }

   .feature__item {
      width: 50%;
      margin: 15px 0;
   }

   .feature__icon {
      margin-bottom: 10px;
      height: 50%;
   }

   .feature__title {
      margin-bottom: 10px;
      font-size: 13px;
   }

   .feature__text {
      font-size: 13px;
   }

   /*Work*/
   .work__item {
      width: 50%;
   }

   /*Team*/
   .team {
      margin: 50px;
   }

   .team__item {
      width: 50%;
      text-align: center;
   }

   .team__image {
      width: 70%;
      height: auto;
   }

   /*Social*/
   .social {
      justify-content: center;
   }

   /* Reviews */
   .testimonials__photo {
      width: 100%;
      margin: 15px 0 40px;
      overflow: hidden;
   }

   .testimonials__content {
      width: 100%;
      padding-left: 0;
      padding-bottom: 40px;
   }
}

@media (max-width: 767px) {
   /*Intro*/
   .intro {
      height: auto;
      padding-bottom: 30px;
   }

   .intro__title {
      font-size: 30px;
   }

   .intro__subtitle {
      margin-bottom: 30px;
      font-size: 16px;
   }

   /*Features*/
   .features {
      margin: 20px 0;
   }

   .feature__item {
      width: 100%;
   }

   .feature__icon {
      height: 40%;
   }

   /*Work*/
   .work__item {
      width: 100%;
   }

   /*Team*/
   .team {
      margin: 30px;
   }

   .team__item {
      width: 100%;
   }

   .team__image {
      width: 80%;
      height: auto;
   }

   .team__title {
      font-size: 20px;
   }

   .team__prof {
      font-size: 12px;
   }

   .team__text {
      font-size: 13px;
   }

   /* Testimonials */
   .testimonials__text {
      font-size: 25px;
   }

   /* Btn */
   .btn--long {
      min-width: 260px;
   }

   /* Download */
   .download {
      margin: 50px 0;
   }

   .download__title {
      font-size: 24px;
   }

   /* About */
   .about__inner {
      padding: 30px 0;
   }

   .about__block {
      width: 100%;
      padding-left: 0;
      padding-right: 0;
      margin-bottom: 30px;
   }

   .about__block:last-child {
      margin-bottom: 0;
   }
}

@media (max-width: 414px) {
   /* Testimonials */
   .testimonials__img {
      right: -100px;
   }
}