/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Vollkorn:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

/* Null */
@import url(reset.css);

html, body {
   height: 100%;
   min-width: 320px;
}

.main {
   flex: 1 1 auto;
}

.wrapper {
   overflow: hidden;
   min-height: 100%;
   display: flex;
   flex-direction: column;
}

body {
   font-family: 'Vollkorn', serif;
   background-color: #fff;
}

/* Header */

.header {
   height: 106px;
   background-color: #ffffff;
   display: flex;
   justify-content: center;
}

.header__container {
   max-width: 940px;
   height: 106px;
   flex: 1 1 50%;
   padding: 0 40px;
   display: flex;
}

.header__nav {
   width: 100%;
   display: flex;
   align-items: center;
   flex: 1 1 50%;
   justify-content: space-between;
}

.nav__logo {
   display: flex;
   cursor: pointer;
}

.nav__logo-mobile {
   display: none;
}

.nav__buttons {
   display: flex;
}

.nav__buttons > li {
   margin-left: 34px;
   font-family: 'Montserrat', sans-serif;
   font-size: 0.75rem;
   color: #404040;
   text-transform: uppercase;
   cursor: pointer;
}

.nav__buttons > li:hover {
   color: #8BCAC3;
}

.nav__menu-hamburger {
   display: none;
}

.nav__mobile-menu {
   display: none;
}

/* main */
.main {
   width: 100%;
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
}

.main__heading {
   width: 100%;
   display: flex;
   flex-flow: column nowrap;
}

.heading__background {
   height: 391px;
   width: 100%;
   background-image: url('../img/main/heading-backgrnd.jpg');
   background-repeat: no-repeat;
   background-size: cover;
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
}

.heading__text-block {
   display: flex;
   flex-flow: column wrap;
   align-items: center;
   margin: 105px 0 75px 0;
}

.text-block__title {
   font-family: 'Montserrat', sans-serif;
   font-size: 2.75rem;
   text-transform: uppercase;
   text-align: center;
   line-height: 125%;
   color: #FFFFFF;
   padding: 0 20px;
}

.text-block__line {
   height: 2px;
   width: 80px;
   background-color: #FFFFFF;
   margin: 28px 0 25px 0;
}

.text-block__caption {
   font-size: 0.938rem;
   color: #FFFFFF;
}

.heading__subheading {
   height: 289px;
   width: 100%;
   background-color: #FEFEC9;
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
}

.subheading__cross-vector {
   position: relative;
   bottom: 26px;
}

.subheading__text {
   max-width: 940px;
   padding: 0 20px;
   display: flex;
   flex-flow: column wrap;
   align-items: center;
   position: relative;
   bottom: 50px;
}

.subheading-text__title {
   font-size: 1.125rem;
   line-height: 130%;
   max-width: 940px;
   text-align: center;
   margin: 60px 0 39px 0;
   color: #47474F;
}

.subheading-text__button {
   width: 159px;
   height: 53px;
   border: 1px solid #47474F;
   border-bottom: 2px solid #47474F;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
}

.subheading-text__button > p {
   position: relative;
   bottom: 2px;
   color: #47474F;
}

.main__section2 {
   max-width: 940px;
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
}

.section2__title {
   font-size: 1.438rem;
   line-height: 36px;
   font-family: 'Montserrat', sans-serif;
   text-transform: uppercase;
   margin: 79px 0 28px 0;
   padding: 0 20px;
   text-align: center;
}

.section2__line {
   height: 2px;
   width: 80px;
   background-color: rgba(0, 0, 0, 0.09);
   margin-bottom: 43px;
}

.section2__collage {
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
   gap: 20px;
   margin-bottom: 74px;
}

.collage__elem {
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
}

.collage-elem__text {
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
}

.collage-elem-text__title {
   text-transform: uppercase;
   color: #333333;
   font-family: 'Montserrat', sans-serif;
   margin: 38px 0 20px 0;
}

.collage-elem-text__paragraph {
   max-width: 297px;
   text-align: center;
   line-height: 147%;
   font-size: 0.938rem;
   color: #333333;
}

.main__section3 {
   width: 100%;
   min-width: 0;
   background-color: #F5F5F5;
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
}

.section3__title {
   text-transform: uppercase;
   color: #333333;
   font-family: 'Montserrat', sans-serif;
   font-size: 1.438rem;
   margin: 79px 0 73px 0;
}

.section3__collage2 {
   max-width: 940px;
   gap: 20px;
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
   margin-bottom: 89px;
   padding: 0 20px;
}

.collage2__elem {
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
}

.collage2-elem__text {
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
   background-color: #FFFFFF;
   min-width: 0;
   width: 300px;
}

.collage2-elem-text__title {
   text-transform: uppercase;
   color: #333333;
   font-size: 1rem;
   font-family: 'Montserrat', sans-serif;
   margin: 19px 0 7px 0;
}

.collage2-elem-text__paragraph {
   font-size: 0.875rem;
   color: #333333;
   margin-bottom: 21px;
}

.main__section4 {
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
   margin-bottom: 99px;
}

.section4__title {
   text-transform: uppercase;
   color: #333333;
   font-family: 'Montserrat', sans-serif;
   font-size: 1.438rem;
   margin: 79px 0 73px 0;
}

.section4__collage3 {
   max-width: 940px;
   gap: 20px;
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
}

.collage3-elem__text {
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
}

.collage3-elem-text__title {
   text-transform: uppercase;
   color: #333333;
   font-size: 1rem;
   font-family: 'Montserrat', sans-serif;
   margin: 20px 0 10px 0;
}

.collage3-elem-text__paragraph {
   font-size: 0.875rem;
   color: #333333;
   margin-bottom: 29px;
}

.collage3-elem__contacts {
   display: flex;
   flex-flow: row nowrap;
   justify-content: center;
   gap: 6px;
}

.main__section5 {
   width: 100%;
   background-color: #F5F5F5;
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
}

.section5__quote-icon {
   margin: 69px 0 65px 0;
}

.section5__reviews {
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
   padding: 0 20px;
   gap: 52px;
   margin-bottom: 98px;
}

.reviews__elem {
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
}

.reviews-elem__title {
   max-width: 338px;
   color: #333333;
   font-size: 1.625rem;
   text-align: center;
   line-height: 127%;
   margin-bottom: 24px;
}

.reviews-elem__name {
   font-size: 0.875rem;
   font-family: 'Montserrat', sans-serif;
   text-transform: uppercase;
   color: #ABABAB;
   margin-top: 10px;
}

.reviews__line {
   width: 2px;
   height: 215px;
   background: rgba(0, 0, 0, 0.04);
}

.main__section6 {
   height: 517px;
   width: 100%;
   background-image: url('../img/main/section6-backgrnd.jpg');
   background-repeat: no-repeat;
   background-size: cover;
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
}

.section6__title {
   font-size: 1.438rem;
   font-family: 'Montserrat', sans-serif;
   text-transform: uppercase;
   color: #333333;
   margin: 79px 0 93px 0;
}

.section6__collage4 {
   max-width: 940px;
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
   gap: 136px;
   padding: 0 20px;
}

.collage4__elem1 {
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
}

.collage4__elem1 > img {
   width: 44px;
   height: 65px;
}

.collage4-elem1__title {
   font-family: 'Montserrat', sans-serif;
   color: #333333;
   margin: 26px 0 20px 0;
   text-transform: uppercase;
}

.collage4-elem1__paragraph {
   font-size: 1.063rem;
   text-align: center;
   line-height: 129%;
   color: #212121;
}

.collage4__elem2 {
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
}

.collage4__elem2 > img {
   width: 70px;
   height: 50px;
}

.collage4-elem2__title {
   font-family: 'Montserrat', sans-serif;
   color: #333333;
   margin: 40px 0 20px 0;
   text-transform: uppercase;
}

.collage4-elem2__paragraph1 {
   font-size: 1.063rem;
   text-align: center;
   line-height: 129%;
   color: #212121;
   margin-bottom: 22px;
}

.collage4-elem2__paragraph2 {
   font-size: 1.063rem;
   text-align: center;
   line-height: 129%;
   color: #212121;
}

.collage4__elem3 {
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
}

.collage4__elem3 > img {
   width: 68px;
   height: 56px;
}

.collage4-elem3__title {
   font-family: 'Montserrat', sans-serif;
   color: #333333;
   margin: 32px 0 18px 0;
   text-transform: uppercase;
}

.collage4-elem3__paragraph {
   font-size: 1.063rem;
   line-height: 180%;
   color: #212121;
}

.collage4-elem3__paragraph > span {
   margin-right: 10px;
}

/* footer */

.footer {
   height: 469px;
   width: 100%;
   background-color: #000000;
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
   color: #fff;
}

.footer__form {
   margin-top: 69px;
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
}

.form-elem__name {
   position: relative;
   width: 564px;
}

.form-elem__email {
   position: relative;
   width: 564px;
   top: 58px;
}

.form-elem__budget {
   position: relative;
   width: 564px;
   top: 115.5px;
}

.form-elem__describe {
   position: relative;
   width: 564px;
   top: 173.5px;
}

.form-elem__input1 {
   position: absolute;
   width: 544px;
   height: 46px;
   background: rgba(255, 255, 255, 0.18);
   color: white;
   border: none;
   outline: none;
   font-size: 1.068rem;
   font-family: 'Vollkorn', serif;
   padding-left: 20px;
   padding-top: 11px;
}

.form-elem__input2 {
   position: absolute;
   width: 544px;
   height: 46px;
   background: rgba(255, 255, 255, 0.2);
   color: white;
   border: none;
   outline: none;
   font-size: 1.068rem;
   font-family: 'Vollkorn', serif;
   padding-left: 20px;
   padding-top: 11px;
}

.form-elem__input3 {
   position: absolute;
   width: 544px;
   height: 46px;
   background: rgba(255, 255, 255, 0.2);
   color: white;
   border: none;
   outline: none;
   font-size: 1.068rem;
   font-family: 'Vollkorn', serif;
   padding-left: 20px;
   padding-top: 11px;
}

.form-elem__label {
   position: absolute;
   top: 18px;
   left: 31px;
   color: white;
   font-family: 'Vollkorn', serif;
   font-style: italic;
   font-size: 1.068rem;
   transition: 0.05s ease-in 0s;
}

.form-elem__input1:focus ~ .form-elem__label,
.form-elem__input2:focus ~ .form-elem__label,
.form-elem__input3:focus ~ .form-elem__label, 
.form-elem__input1:not(:placeholder-shown) ~ .form-elem__label,
.form-elem__input2:not(:placeholder-shown) ~ .form-elem__label,
.form-elem__input3:not(:placeholder-shown) ~ .form-elem__label {
   top: 4px;
   left: 20px;
   transition: 0.1s ease-in 0s;
}

.form__button {
   width: 210px;
   height: 54px;
   border: 1px solid #7EC4BD;
   border-bottom: 2px solid #7EC4BD;
   border-radius: 2px;
   display: flex;
   justify-content: center;
   align-items: center;
   font-family: 'Vollkorn', serif;
   font-style: italic;
   position: relative;
   font-size: 1.068rem;
   color: #8BCAC3;
   top: 256px;
   cursor: pointer;
}

/* responsive */

@media (max-width: 821px) {
   .section5__reviews {
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      gap: 1px;
   }

   .reviews__line {
      transform: rotate(90deg);
   }
}

@media (max-width: 817px) {
   .main__section6 {
      height: 935px;
   }
}

@media (max-width: 768px) {
   .nav__buttons {
      display: none;
   }

   .nav__menu-hamburger {
      z-index: 5;
      display: block;
      position: relative;
      width: 35px;
      height: 10px;
   }

   .nav__menu-hamburger > span {
      position: absolute;
      background-color: rgb(0, 0, 0);
      left: 0;
      width: 100%;
      height: 2px;
   }

   .nav__menu-hamburger::before,
   .nav__menu-hamburger::after {
      content: '';
      position: absolute;
      background-color: rgb(0, 0, 0);
      left: 0;
      width: 100%;
      height: 2px;
   }

   .nav__menu-hamburger::before {
      top: 0;
      transition: all 0.1s ease 0s;
   }

   .nav__menu-hamburger::after {
      bottom: 0;
      transition: all 0.1s ease 0s;
   }

   .nav__menu-hamburger > span {
      position: absolute;
      background-color: rgb(0, 0, 0);
      left: 0;
      width: 100%;
      height: 2px;
      top: -8px;
      transition: all 0.1s ease 0s;
   }

   .nav__menu-hamburger.active::before {
      transform: rotate(45deg);
      bottom: 0;
      transition: all 0.1s ease 0s;
   }
   
   .nav__menu-hamburger.active::after {
      transform: rotate(-45deg);
      top: 0;
      transition: all 0.1s ease 0s;
   } 

   .nav__menu-hamburger.active > span {
      transform: scale(0);
   }

   .nav__mobile-menu {
      display: none;
   }

   .nav__mobile-menu.active {
      display: flex;
      z-index: 5;
      position: absolute;
      width: 100%;
      left: 0;
      top: 106px;
      background-color: rgb(255, 255 ,255, 0.8);
   }

   .mobile-menu__buttons {
      padding: 20px 0 40px 40px;
      display: flex;
      flex-flow: column nowrap;
      gap: 24px;
   }
   
   .mobile-menu__buttons > li {
      font-family: 'Montserrat', sans-serif;
      font-size: 0.75rem;
      color: #404040;
      text-transform: uppercase;
   }
}

@media (max-width: 668px) {
   .heading__text-block {
      position: relative;
      bottom: 30px;
   }

   .form-elem__input1,
   .form-elem__input2,
   .form-elem__input3 {
      width: 300px;
   }

   .form-elem__name,
   .form-elem__email,
   .form-elem__budget,
   .form-elem__describe {
      width: 300px;
      margin-right: 20px;
   }
}

@media (max-width: 512px) {
   .main__section6 {
      height: 1205px;
   }
}

@media (max-width: 490px) {
   .header__container {
      padding: 0 20px;
   }
   
   .heading__background {
      height: 490px;
   }
   
   .heading__subheading {
      height: 380px;
   }
}

@media (max-width: 425px) {
   .nav__logo-mobile {
      display: block;
   }

   .nav__logo {
      display: none;
   }
}