@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap');

:root{
    --white: #fff;
    --black: #060606;
    --transition: 0.3s linear;
    --a-1: #d52349;
    --a-2: #234cd5;
    --a-3: #23d55e;
    --a-4: #d59423;
    --a-5: #23d5cc;
    --hover: var(--a-3);
    --b-1: #1f1e22fa;
    --b-2: #1f1e24fa;
    --b-3: #191c15fa;
    --b-4: #2c2320fa;
    --b-5: #161314fa;
    --bg-dark: var(--b-3);
    --c-1: #827a7c;
    --c-2: #7a7d82;
    --c-3: #7b827a;
    --c-4: #81827a;
    --c-5: #7c7a82;
    --grey: var(--c-3);
}

body{
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif !important;
  font-size: 16px;
  margin: 0;
  padding: 0px;
  direction: ltr;
}

a{
    text-decoration: none;
}

p {
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: 1.5;
}

ul, ol {
  margin-bottom: 1rem;
  padding-left: 2rem;
}

li {
  margin-bottom: 0.5rem;
}

ul ul, ol ul, ul ol, ol ol {
  margin-bottom: 0;
}

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

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

.section-padd{
  padding: 66px 0;
}

.container {
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
  box-sizing: border-box;
}

.logo-box{
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-title{
  font-weight: 800;
  font-size: 31px;
  letter-spacing: 1.2px;
  color: var(--black);
  transition: var(--transition);
}

.logo-title:hover,
.logo-title:focus{
  color: var(--hover);
}

.menu-nav{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 11px 0;
  gap: 5px;
}

.drop,
.menu-link{
  border-radius: 20px;
  padding: 7px 11px;
  color: var(--black);
  transition: var(--transition);
  display: inline-block;
}

.drop:hover,
.drop:focus,
.menu-link:hover,
.menu-link:focus{
  background-color: var(--hover);
  color: var(--white);
}

.drop{
  position: relative;
  transition: var(--transition);
}

.drop-menu{
  display: none;
}

.drop:hover > .drop-menu,
.drop:focus > .drop-menu{
  position: absolute;
  top: 101%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 240px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background-color: var(--hover);
  border-radius: 20px;
  padding: 11px;
}

.drop-link{
  display: inline-block;
  color: var(--white);
  transition: var(--transition);
  width: 100%;
  height: 100%;
}

.drop-link:hover,
.drop-link:focus{
  transform: translateX(2px);
  -webkit-transform: translateX(2px);
}

.hero{
  background: url('static/images/bg_q700.jpg') no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  padding: 73px 0;
}

.section-menu{
  padding-bottom: 0;
  padding-top: 30px;
}

.hero > .container{
  background-color: var(--bg-dark);
  color: var(--white);
  padding: 44px;
}

.hero-text{
  text-align: center;
}

.hero-box{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 25px;
  align-items: center;
}

.reasons-row{
  display: flex;
  flex-direction: column-reverse;
  gap: 18px;
}

.reasons-col{
  width: 100%;
  box-sizing: border-box;
  padding: 48px 18px;
  flex: 1;
}

.reasons-box{
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  height: 100%;
}

.reasons-icon{
  clip-path: polygon(0% 0%, 100% 0, 100% 80%, 50% 100%, 0 80%);
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reasons-icon-hover{
  background-color: var(--hover);
}
.reasons-icon-black{
  background-color: var(--black);
}
.reasons-icon-grey{
  background-color: var(--grey);
}

.reasons-icon > svg{
  width: 72px;
  height: 72px;
  color: var(--white);
}

.reasons-text{
  text-align: center;
}

.img-section{
  background: url('static/images/bg_q700.jpg') no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  height: 18px;
}

.au-row{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  gap: 18px;
}

.au-col{
  flex: 1;
  box-sizing: border-box;
  padding: 18px;
  width: 100%;
}

.video-player{
  width: 100%;
  height: 300px;
  object-fit: cover;
  clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
  box-sizing: border-box;
}

.au-video-player{
  width: 100%;
  height: 300px;
  clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
  float: none;
  margin: 0 auto;
  padding: 18px;
  display: block;
  box-sizing: border-box;
}

.au-video-player,
.video-player{
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.title{
  font-weight: 800;
  font-size: 19px;
  position: relative;
  text-align: center;
  padding-bottom: 11px;
}

.title::before{
  position: absolute;
  content: '';
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--grey);
  transform: translate(0, -50%);
}

.title > span{
  background: var(--white);
  position: relative;
  padding: 0 11px;
}

.au-box{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  gap: 11px;
}

.main-img{
  width: 100%;
  height: 300px;
  box-sizing: border-box;
}

.main-img > img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.main-box{
  display: flex;
  flex-direction: column-reverse;
  gap: 18px;
}

.price{
  color: var(--hover);
  font-size: 25px;
  font-weight: 800;
  margin-top: 25px;
}

.services-row{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  gap: 18px;
}

.services-col{
  width: 100%;
  box-sizing: border-box;
  padding: 18px;
  flex-grow: 1;
}

.services-box{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: var(--transition);
  gap:  11px;
}

.contact-page-img,
.hw-img,
.services-img{
  clip-path: polygon(0% 0%, 100% 0, 100% 80%, 50% 100%, 0 80%);
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.hw-img-hover,
.services-img-hover{
  background-color: var(--hover);
}

.hw-img-black,
.services-img-black{
  background-color: var(--black);
}

.hw-img-grey,
.services-img-grey{
  background-color: var(--grey);
}

.contact-page-img > svg,
.hw-img > svg,
.services-img > svg{
  width: 72px;
  height: 72px;
  color: var(--white);
  transition: var(--transition);
}

.services-img:hover,
.services-img:focus{
  background-color: var(--white);
}

.services-img-hover:hover > svg,
.services-img-hover:focus > svg{
  color: var(--hover);
}
.services-img-black:hover > svg,
.services-img-black:focus > svg{
  color: var(--black);
}
.services-img-grey:hover > svg,
.services-img-grey:focus > svg{
  color: var(--grey);
}

.services-title{
  color: var(--black);
  transition: var(--transition);
  font-weight: 800;
  font-size: 19px;
  text-align: center;
}

.services-title:hover,
.services-title:focus{
  color: var(--hover);
}

.services-content{
  text-align: center;
}


.articles-row{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  gap: 18px;
}

.articles-col{
  width: 100%;
  box-sizing: border-box;
  padding: 18px;
  flex-grow: 1;
  box-shadow: 25px 0 24px -24px rgba(0, 0, 0, 0.45), -25px 0 24px -24px rgba(0, 0, 0, 0.45);
}

.articles-img{
  width: 100%;
  height: 300px;
  display: inline-block;
  overflow: hidden;
}

.articles-img > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}

.articles-img:hover > img,
.articles-img:focus > img{
  transform: scale(1.03);
  -webkit-transform: scale(1.03);
}

.articles-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.articles-descr{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.articles-content{
  text-align: center;
}

.articles-title{
  color: var(--hover);
  transition: var(--transition);
  font-size: 19px;
  text-align: center;
}

.articles-title:hover,
.articles-title:focus{
  color: var(--grey);
}

.parent {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 3px;
grid-row-gap: 3px;
}


.div1 { grid-area: 1 / 1 / 3 / 2; }
.div2 { grid-area: 3 / 1 / 6 / 2; }
.div3 { grid-area: 2 / 2 / 6 / 3; }
.div4 { grid-area: 1 / 2 / 2 / 3; }
.div5 { grid-area: 1 / 3 / 6 / 4; }
.div6 { grid-area: 1 / 4 / 4 / 5; }
.div7 { grid-area: 4 / 4 / 5 / 5; }
.div8 { grid-area: 1 / 5 / 3 / 6; }
.div9 { grid-area: 3 / 5 / 5 / 6; }

.gallery-img{
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.gallery-img > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}

.gallery-img:hover > img,
.gallery-img:focus > img{
  transform: scale(1.03);
  -webkit-transform: scale(1.03);
}

.form-row{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  gap: 18px;
}

.form-col{
  width: 100%;
  box-sizing: border-box;
  padding: 18px;
  flex-grow: 1;
}

.form-img-box{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 18px;
}

.form-img{
  width: 100%;
  height: 300px;
  clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
}

.form-img > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.form{
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
  gap: 18px;
  height: 100%;
  justify-content: center;
}

.contact-page-form{
  width: 100%;
}

.contact-page-form > input,
.contact-page-form > textarea,
.input-customgroup__group,
.textarea-customgroup__group{
  width: 100%;
  padding: 11px 18px;
  border: 1px solid var(--grey);
  box-sizing: border-box;
}

.privacy{
  color: var(--grey);
  transition: var(--transition);
  display: inline-block;
}

.privacy:hover,
.privacy:focus{
  color: var(--hover);
}

.hw-row{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  gap: 18px;
}

.hw-col{
  width: 100%;
  box-sizing: border-box;
  padding: 18px;
  flex-grow: 1;
}

.hw-box{
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 18px;
  padding: 18px;
}

.hw-text{
  text-align: center;
}

.footer-nizBlock{
  background-color: var(--black);
  color: var(--white);
  padding: 73px 0;
}

.hw-o{
  padding-bottom: 0;
}

.footer-privacy-box{
  display: flex;
  flex-direction: column-reverse;
  gap: 18px;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
}

.footer-privacy > a{
  color: var(--white);
  transition: var(--transition);
}

.footer-privacy:hover > a,
.footer-privacy:focus > a{
  color: var(--hover);
}

.footer-logo-box > .logo-box > .logo-title{
  color: var(--white);
  transition: var(--transition);
  margin-bottom: 25px;
}

.footer-logo-box > .logo-box:hover > .logo-title,
.footer-logo-box > .logo-box:focus > .logo-title{
  color: var(--hover);
}

.copyright{
  color: var(--grey);
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
}

.copyright > p{
  margin: 0;
}

.contact-page-row{
  display: flex;
  box-sizing: border-box;
  flex-direction:  column-reverse;
  gap:  18px;
}

.contact-page-col{
  box-sizing: border-box;
  flex-grow: 1;
  padding: 44px 18px;
  width: 100%;
}

.contact-page-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.contact-page-box > a{
  color: var(--grey);
  transition: var(--transition);
  font-weight: 800;
  text-align: center;
  word-break: break-word;
}

.contact-page-box > a:hover,
.contact-page-box > a:focus{
  color: var(--hover);
}

.map-row{
  display: flex;
  box-sizing: border-box;
  flex-direction:  column-reverse;
  gap:  18px;
}

.map-col{
  box-sizing: border-box;
  flex-grow: 1;
  padding: 44px 18px;
  width: 100%;
}

.map{
  width: 100%;
  height: 350px;
  overflow: hidden;
  box-sizing: border-box;
}

.map > iframe{
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-sizing: border-box;
  border: 0;
}

.adres-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap:  18px;
}

.contact-text{
  text-align: center;
}

.page-img{
  width: 100%;
  height: 300px;
  margin: 0 auto;
  padding: 18px;
  box-sizing: border-box;
}

.page-img > img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.comment-row{
  display: flex;
  box-sizing: border-box;
  flex-direction:  column-reverse;
  gap:  18px;
}

.comment-col{
  box-sizing: border-box;
  flex-grow: 1;
  padding: 44px 18px;
  width: 100%;
  box-shadow: 25px 0 24px -24px rgba(0, 0, 0, 0.45), -25px 0 24px -24px rgba(0, 0, 0, 0.45);
}

.comment-box{
  display: flex;
  align-items: center;
  flex-direction: column-reverse;
  gap:  18px;
}

.comment-img{
  width: 140px;
  height: 140px;
  overflow: hidden;
  clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
}

.comment-img > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comment-text{
  text-align: center;
}

.comment-author{
  text-align: center;
  font-weight: 800;
  color: var(--grey);
}

.privacy-content{
  overflow: hidden;
}



@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }

  .copyright{
    flex-direction: row;
  }
  .section-menu{
  padding-top: 80px;
  }
}

@media (max-width: 767px){
  .gallery-section{
    display: none;
  }
}

@media (min-width: 768px){
  .container {
    max-width: 720px;
  }

.menu-nav{
  flex-direction: row;
  gap: 11px;
}

.drop:hover > .drop-menu,
.drop:focus > .drop-menu{
  width: 300px;
}

.drop,
.menu-link{
  border-radius: 20px;
  padding: 11px;
}

.hero{
  padding: 66px;
}

.reasons-row{
  flex-direction: row-reverse;
}

.reasons-col{
  width: calc((100% / 3) - 18px);
}
.reasons-col:nth-child(2){
  box-shadow: 25px 0 24px -24px rgba(0, 0, 0, 0.45), -25px 0 24px -24px rgba(0, 0, 0, 0.45);
}

.au-row{
  flex-direction: row-reverse;
}

.au-col{
  width: calc(50% - 18px);
}

.price{
  font-size: 31px;
}

.services-row{
  flex-direction: row-reverse;
}

.services-col{
  width: calc(50% - 18px);
}

.articles-row{
  flex-direction: row-reverse;
}

.articles-col{
  width: calc(50% - 18px);
}

.hw-row,
.form-row{
  flex-direction: row-reverse;
}

.form-col{
  width: calc(50% - 18px);
}

.hw-col{
  width: calc((100% /3) - 18px);
}

.hw-col:nth-child(2){
    box-shadow: 25px 0 24px -24px rgba(0, 0, 0, 0.45), -25px 0 24px -24px rgba(0, 0, 0, 0.45);
}

.au-video-player{
  width: 300px;
  float: none;
}

.contact-page-row{
  flex-direction: row-reverse;
}

.contact-page-col{
  width: calc((100% / 3) - 18px);
}

.contact-page-col:nth-child(2){
  box-shadow: 25px 0 24px -24px rgba(0, 0, 0, 0.45), -25px 0 24px -24px rgba(0, 0, 0, 0.45);
}

.comment-row,
.map-row{
    flex-direction: row-reverse;
}

.comment-col,
.map-col{
  width: calc(50% - 18px);
}

.page-img{
  width: 300px;
  float: none;
}
}

@media (min-width: 992px){
  .container {
    max-width: 960px;
  }

  .hero{
    padding: 66px 170px;
  }

  .services-col{
    width: calc(25% - 18px);
  }

  .services-col:nth-child(4),
  .services-col:nth-child(2){
    box-shadow: 25px 0 24px -24px rgba(0, 0, 0, 0.45), -25px 0 24px -24px rgba(0, 0, 0, 0.45);
  }

  .articles-col{
    width: calc(25% - 18px);
  }

  .footer-privacy-box{
  flex-direction: row-reverse;
}

.au-video-player{
  width: 400px;
}
  
.page-img{
  width: 400px;
}
}

@media (min-width: 1200px){
  .container {
    max-width: 1140px;
  }
  
 
}


.button-1 {
  text-align: center;
  position: relative;
  padding: 11px;
  border: none;
  border-radius: 0px;
  cursor: pointer;
  background: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
  font-size: 16px;
  font-weight: 500;
  font-family: sans-serif;
  letter-spacing: 2px;
  transition: all 0.2s;
  display: inline-block;
  color: var(--bg-dark);
}

.button-1::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  border-radius: 0px;
  width: 100%;
  height: 100%;
  padding: 2px;
  background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
  z-index: -1;
}

.button-1:hover {
  background: #315cfd;
  background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
  color: white;
  font-size: 16px;
}

.button-2 {
  text-align: center;
  color: #fff;
  border-radius: 5px;
  padding: 11px 25px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  display: inline-block;
  box-shadow: inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 24px 0px rgba(0,0,0,.1),
   5px 5px 5px 0px rgba(0,0,0,.1);
  outline: none;
  font-size: 15px;
}

.button-2 {
  background-color: #004dff;
  background-image: linear-gradient(315deg, #03c8a8 0%, #004dff 74%);
  border: none;
}

.button-2:hover {
  background-color: #004dff;
  background-image: linear-gradient(315deg, #004dff 0%, #03c8a8 74%);
}

.button-2 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.button-2:before,
.button-2:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  box-shadow: 5px 5px 6px 0 rgba(255,255,255,.9),
              -5px -5px 6px 0 rgba(116, 125, 136, .2), 
    inset -5px -5px 6px 0 rgba(255,255,255,.9),
    inset 5px 5px 6px 0 rgba(116, 125, 136, .3);
  transition: all 0.2s ease;
}

.button-2:before {
  height: 0%;
  width: .1px;
}

.button-2:after {
  width: 0%;
  height: .1px;
}

.button-2:hover:before {
  height: 100%;
}

.button-2:hover:after {
  width: 100%;
}

.button-2 span:before,
.button-2 span:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  box-shadow: 5px 5px 6px 0 rgba(255,255,255,.9),
              -5px -5px 6px 0 rgba(116, 125, 136, .2), 
    inset -5px -5px 6px 0 rgba(255,255,255,.9),
    inset 5px 5px 6px 0 rgba(116, 125, 136, .3);
  transition: all 0.2s ease;
}

.button-2 span:before {
  width: .1px;
  height: 0%;
}

.button-2 span:after {
  width: 0%;
  height: .1px;
}

.button-2 span:hover:before {
  height: 100%;
}

.button-2 span:hover:after {
  width: 100%;
}

.button-3 {
  text-align: center;
  position: relative;
  padding: 18px;
  border-radius: 0px;
  border: none;
  background-color: rgb(255, 136, 0);
  color: white;
  box-shadow: 0px 11px 11px rgb(255, 198, 146) inset,
  0px 5px 11px rgba(5, 5, 5, 0.212),
  0px -11px 11px rgb(255, 102, 0) inset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-3::before {
  width: 80%;
  height: 2px;
  position: absolute;
  background-color: rgba(250, 250, 250, 0.678);
  content: "";
  filter: blur(1px);
  top: 7px;
  border-radius: 50%;
}

.button-3::after {
  width: 80%;
  height: 2px;
  position: absolute;
  background-color: rgba(250, 250, 250, 0.137);
  content: "";
  filter: blur(1px);
  bottom: 7px;
  border-radius: 50%;
}

.button-3:hover {
  animation: jello-horizontal 0.9s both;
}

@keyframes jello-horizontal {
  0% {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    transform: scale3d(1.05, 0.95, 1);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}

.button-4 {
  text-align: center;
  background: linear-gradient(to right, gold, var(--hover));
  color: white;
  padding: 11px 18px;
  width: var(--width);
  height: var(--height);
  text-align: center;
  line-height: var(--height);
  font-size: calc(var(--height) / 2.5);
  font-family: sans-serif;
  letter-spacing: 0.2em;
  border: 2px solid darkgoldenrod;
  border-radius: 0px;
  transform: perspective(500px) rotateY(-15deg);
  text-shadow: 6px 2px 2px rgba(0, 0, 0, 0.2);
  button-4-shadow: 2px 0 0 5px rgba(76, 255, 97, 0.8);
  transition: 0.5s;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: inline-block;
}

.button-4:hover {
  transform: perspective(500px) rotateY(15deg);
  text-shadow: -6px 2px 2px rgba(0, 0, 0, 0.2);
  button-4-shadow: -2px 0 0 5px rgba(35, 255, 218, 0.8);
}

.button-4::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, transparent, white, transparent);
  left: -100%;
  transition: 0.5s;
}

.button-4:hover::before {
  left: 100%;
}
.button-5 {
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 font-size: 16px;
 font-weight: 500;
  padding: 11px;
 border: 0px solid;
 background-image: linear-gradient(45deg,blue,#00f0a0,blue);
 background-size: 500% 400%;
 color: white;
 border-radius: 0px;
 transition: 0.6s all;
 display: inline-block;
 text-align: center;
}

.button-5:hover {
 background-position: 75% 50%;
 transform: perspective(100px)
}

.button-5:active {
 transform: scale(0.95);
 transition: 0.1s;
}

.page-content h2{
  font-size: 18px;
}