/************************************************************************************
RESET
*************************************************************************************/

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

html, body, div, form, h1, h2, h3, h4, h5, h6, p, table, ul, li, button, map, object,
a, b, br, em, i, img, span, strong {
	margin: 0;
	padding: 0;
}

img {
	border: 0;
	max-width: 100%;
	height: auto;
}

article, aside, details, figcaption, figure, footer, form, header, hgroup, menu, nav, section {
    display: block;
		margin: 0;
		padding: 0;
}

/************************************************************************************
GENERAL STYLING
*************************************************************************************/

:root {
	--red: #F80040;
	--reda: #F80040;
	--reda: color(display-p3 1 0.17 0.3);
	--back: #dddbd9;
	--violet: #4b0489;
	--white: #f8f8f8;
	--black: #000000;
	--yellow: #ffff00;
	--image-back: #f8f6f3;
}

html {
  height: 100%;
}

body {
	min-height: 100vh;
  display: flex;
  flex-direction: column;
	background: var(--back);
	font-family: "azo-sans-web", sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 19px;
	line-height: 1.6;
	color: var(--black);
	text-align: left;
	transition: opacity 0.4s ease;
}

html.wf-active body,
html.wf-inactive body {
	visibility: visible;
	opacity: 1;
}

main {
  flex: 1;
}

a:link, a:visited, a:active {
	outline: none;
	text-decoration: none;
}

a {
	font-weight: 700;
	color: var(--black);
	transition: transform .4s;
	display: inline-block;
	position: relative;
	padding-bottom: 3px;
}

p {
	font-weight: 300;
	font-size: 20px;
	margin-bottom: 30px;
}

@media screen and (min-width: 500px) {
	p {
		font-size: 25px;
	}
}

p strong {
	font-weight: 700;
	font-style: normal;
}

p a {
  position: relative;
  display: inline-block;
}

p a::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 0;
  height: 4px;
  width: 100%;
  background: var(--red);
  z-index: -2;
}

p a::before {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 0;
  height: 4px;
  width: 0;
  background: #fff;
  transition: width .3s ease;
  z-index: -1;
}

@media (hover: hover) and (pointer: fine) {
  p a:hover::before {
    width: 100%;
  }
}

h2 {
	font-size: 30px;
	font-weight: 900;
	line-height: 1.2;
	margin-bottom: 30px;
}

h3 {
	font-size: 25px;
	font-weight: 900;
	line-height: 1.2;
	margin-bottom: 30px;
}

@media screen and (min-width: 500px) {
	h2 {
		font-size: 35px;
	}
	h3 {
		font-size: 30px;
	}
}

a.button,
button.button {
  font-family: "azo-sans-web", sans-serif;
  color: var(--white);
  font-weight: 400;
  text-transform: uppercase;
  margin: 0 auto;
  text-align: center;
  position: relative;
  display: inline-block;
  font-size: 20px;
  letter-spacing: 1px;
  line-height: 1.1;
  padding: 20px 90px 20px 20px;
	background: linear-gradient(to bottom, #fff 50%, var(--violet) 50%);
  background-size: 100% 200%;
  background-position: 0 100%;
  transition: .3s ease;
  cursor: pointer;
  border-radius: 8px;
  border: none;
}

a.button::after,
button.button::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  width: 20px;
  height: 20px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 62'%3E%3Cpolygon fill='%23F80040' points='53.51 0 50 0 0 0 0 12 41.51 12 0 53.51 0 62 8.49 62 50 20.49 50 62 62 62 62 12 62 8.49 62 0 53.51 0'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: .3s ease;
  pointer-events: none;
}

a.back-button {
	padding: 20px 20px 20px 90px;
	margin: 50px 0 200px;
}

a.back-button::after {
	left: 20px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
}

@media (hover: hover) and (pointer: fine) {
  a.button:hover,
  button.button:hover {
		background-position: 0 0;
		color: var(--black);
		font-weight: 700;
  }

  a.button:hover::after,
  button.button:hover::after {
    transform: translateY(-50%) rotate(45deg);
  }

	a.back-button:hover::after {
		transform: translateY(-50%) rotate(-135deg);
	}
}




/************************************************************************************
GRID
*************************************************************************************/

.container {
	max-width: 1300px;
  margin: 0 auto;
  padding: 0 4%;
}

@media (min-width: 1300px) {
  .container {
    padding: 0 56px;
  }
}

@media (min-width: 1000px) {
	.row {
    display: flex;
		flex-flow: wrap;
  	column-gap: 4%;
  }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; }
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }
}

/************************************************************************************
NAVIGATION
*************************************************************************************/

.header {
	background: var(--red);
	padding-top: 10px;
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 100;
}

.flexbox {
	display: flex;
	gap: 30px;
}

.logo a {
	border: 0;
	padding: 0;
}

.logo svg {
	width: 70px;
}

.logo path {
	fill: var(--white);
	opacity: .7;
}

@keyframes logo-spin {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

.logo-inner {
  transform-origin: center;
  animation: logo-spin 5s ease-in-out;
	animation-play-state: paused;
}

html.wf-active .logo-inner,
html.wf-inactive .logo-inner {
	animation-play-state: running;
	}

.menu  {
	padding: 15px 0 0;
	flex-grow: 2;
}

.menu li {
	display: inline;
	list-style: none;
	margin-right: 1.5%;
}

.menu a {
	color: var(--white);
	font-weight: 700;
	letter-spacing: .5px;
}

.menu a:hover {
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .menu a::after {
    content: '';
    display: block;
    margin: -7px 0 0;
    height: 4px;
    width: 0;
    background: rgba(255,255,255,.7);
    transition: width .3s ease, background-color .3s ease;
    z-index: 1000;
  }

  .menu a:hover::after {
    width: 100%;
  }
}

.hamburger {
	display: none;
}

.menu .close {
	display: none;
}

@media screen and (max-width: 600px) {
	.logo svg {
		width: 55px;
	}

	.hamburger {
		display: block;
		width: 20px;
		height: 20px;
		margin-left: auto;
	}

	.overlay {
	  height: 0;
	  width: 100%;
	  position: fixed;
	  z-index: 1;
	  left: 0;
	  top: 0;
	  background-color: var(--red);
	  overflow-x: hidden;
	  transition: 0.5s;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}

	.menu ul {
	  list-style: none;
	  padding: 0;
	  margin: 0;
		width: 100%;
		border-top: 1px solid var(--white);
	}

	.menu li {
		display: block;
		list-style: none;
		border-bottom: 1px solid var(--white);
		margin: 0;
		text-align: right;
	}

	.menu .close {
		display: inline-block;
		margin-top: 40px;
		border-bottom: none;
	}

	.menu .close svg {
		width: 40px;
		margin-left: calc(100vw - 45px);
	}

	.menu a {
		font-size: 35px;
		display: block;
		padding-right: 10px;

	}
}


/************************************************************************************
FOOTER
*************************************************************************************/

footer {
	background: var(--violet);
}

.footer-links {
	padding: 25px 0 0;
}

.footer-links span {
	color: var(--red);
	font-family: 'azo-sans-uber', sans-serif;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 2px;
	opacity: .8;
	display: block;
	margin-bottom: 10px;
}

.footer-links {
	border-bottom: 1px solid var(--red);
}


@media screen and (min-width: 800px) {
	.footer-flex {
		display: flex;
		justify-content: space-between;
	}
}

.footer-flex div {
	margin-bottom: 25px;
}

footer svg {
	width: 100px;
	margin-bottom: 50px;
}

footer svg path {
	fill: var(--reda);
	opacity: .5;
}

footer a {
	color: var(--white);
	font-weight: 300;
	font-size: 16px;
	transition: .3s;
	display: block;
}

footer a:hover {
	background: rgba(255,255,255,.2);
}

footer a:nth-of-type(n) {
  background-image: url(assets/images/menu-border.svg);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 14px 76px;
  padding-left: 20px;
}

footer a:first-of-type {
  background-image: url(assets/images/menu-border-first.svg);
	background-repeat: no-repeat;
  background-size: 14px 30px;
}

footer a:last-of-type {
  background-image: url(assets/images/menu-border-last.svg);
	background-repeat: no-repeat;
  background-size: 14px 28px;
}

.footer-copy {
	padding: 25px 0;
}

.footer-copy p {
	color: var(--white);
	letter-spacing: 1px;
	margin-bottom: 0;
	font-size: 16px;
	line-height: 1.3;
}

@media screen and (max-width: 500px) {
	.footer-copy p {
		text-align: center;
	}
}

/************************************************************************************
TAG ANIMATIONS
*************************************************************************************/

h1.anime,
h2.h1.anime {
	font-family: "azo-sans-uber", sans-serif;
	font-size: 38px;
	line-height: 1.1;
	font-weight: 400;
	letter-spacing: 1px;
	margin: 200px 0 100px;
	width: 100%;
}

h2.h1.anime {
	margin: 100px 0;
}

@keyframes underline {
	from {width: 0}
	to {width: 100%}
}

h1.anime::after,
h2.h1.anime::after  {
	content: '';
	display: block;
	margin: -7px auto 0 0;
	height: 10px;
	width: 0;
	background: var(--red);
}

h1.anime.animate::after,
h2.h1.anime.animate::after  {
	animation: underline .5s linear .2s forwards;
}

@keyframes bottom-line {
	from {width: 0}
	to {width: 98%}
}

@keyframes hello {
	0% {width: 0;}
	20% {width: 31px;}
	40% {width: 52px;}
	60% {width: 62px;}
	80% {width: 73px;}
	100% {width: 95px;}
}

.hello-ani {
	width: 0;
	font-size: 35px;
	line-height: 1.2;
	font-weight: 900;
	white-space: nowrap;
  overflow: hidden;
	color: var(--red);
	border-right: 4px solid transparent;
}

.hello-ani.animate {
	animation: hello 1.2s steps(1) .7s normal both, blink 4.2s steps(1) normal both;
}


@keyframes blink {
  0%, 8% {border-right-color: var(--black)}
  9%, 16% {border-right-color: transparent}
  17%, 43% {border-right-color: var(--black)}
  44%, 50% {border-right-color: transparent}
  51%, 57% {border-right-color: var(--black)}
  58%, 64% {border-right-color: transparent}
  65%, 71% {border-right-color: var(--black)}
  72%, 79% {border-right-color: transparent}
  80%, 86% {border-right-color: var(--black)}
  87%, 100% {border-right-color: transparent}
}

@media screen and (min-width: 500px) {
	.hello-ani {
		font-size: 45px;
	}
	@keyframes hello {
		0% {width: 0;}
		20% {width: 39px;}
		40% {width: 65px;}
		60% {width: 79px;}
		80% {width: 91px;}
		100% {width: 122px;}
	}
}


/************************************************************************************
HOME PAGE
*************************************************************************************/

.landing-intro {
  position: relative;
  margin-top: 79px;
  height: calc(100vh - 79px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--violet);
  padding: 10%;
}

@media screen and (max-width: 600px) {
	.landing-intro {
	  margin-top: 66px;
	  height: calc(100vh - 66px);
		padding: 5%;
	}
}

.landing-intro svg {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  overflow: visible;
}

.landing-intro svg .logo-inner-shape,
.landing-intro svg .logo-outer-shape {
  transform-origin: center;
  opacity: .5;
}

.landing-intro svg .cls-1 {
  fill: var(--reda);
  opacity: 1;
  transform: translate(0, 0);
}

@keyframes logo-flow {
  0% {
    transform: translate(0, 0);
  }
  12.5% {
    transform: translate(var(--p1x), var(--p1y));
  }
  25% {
    transform: translate(var(--p2x), var(--p2y));
  }
  37.5% {
    transform: translate(var(--p3x), var(--p3y));
  }
  50% {
    transform: translate(var(--p4x), var(--p4y));
  }
  62.5% {
    transform: translate(var(--p5x), var(--p5y));
  }
  75% {
    transform: translate(var(--p6x), var(--p6y));
  }
  87.5% {
    transform: translate(var(--p7x), var(--p7y));
  }
  100% {
    transform: translate(0, 0);
  }
}

.landing-intro svg .cls-1.animate {
  animation: logo-flow 20s linear forwards;
}


.landing-intro .scroll {
  position: absolute;
  bottom: 15px;
  color: var(--reda);
  font-size: 14px;
  letter-spacing: 2px;
}

.freelance {
	position: relative;
  height: calc(100vh - 79px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.freelance h1 {
  margin-top: 20px;
  font-size: 35px;
  font-weight: 900;
  line-height: 1.2;
}

@media screen and (min-width: 500px) {
  .freelance h1 {
    font-size: 45px;
  }
}

.more-button {
	text-align: center;
	margin: 0 0 40px;
}

.my-approach {
	position: relative;
  min-height: calc(100vh - 79px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.my-approach p {
	font-weight: 700;
	font-size: 25px;
	line-height: 1.1;
	color: var(--red);
	text-align: justify;
	hyphens: auto;
}

@media screen and (min-width: 500px) {
	.my-approach p {
		font-size: 35px;
	}

	.homepage .services-page .services ul {
		margin-top: 0;
	}
}

.violet-section {
	margin-top: 100px;
	padding-top: 70px;
	position: relative;
	background: var(--violet);
	background-size: 100% auto;
	width: 100%;
	border-bottom: 1px solid var(--red);
}

.violet-section h2.h1.anime {
	color: var(--back);
}

.violet-section p {
	font-weight: 700;
	font-size: 25px;
	line-height: 1.1;
	color: var(--back);
}

@media screen and (min-width: 500px) {
	.violet-section p {
		font-size: 35px;
		text-align: justify;
		hyphens: auto;
	}
}

.violet-section p span {
	color: var(--red);
}

.violet-section p a {
	color: var(--red);
}

.map {
	padding-top: 80px;
}

.map svg path {
	fill: var(--red);
}

.map svg polygon {
	fill: var(--back);
}

.testimonials p {
	font-size: 20px;
	text-align: justify;
	hyphens: auto;
}

.testimonials p span {
	font-size: 18px;
	font-weight: 300;
}

.testimonials p a {
	font-weight: 300;
}

.testimonials p a::after {
  height: 1px;
  margin: -2px auto 0;
}


/************************************************************************************
PROJECTS
*************************************************************************************/

ul.works {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.work-page ul.works {
	margin-top: 80px;
}

ul.works li {
	padding-bottom: 20px;
}

@media screen and (min-width: 1000px) {
	ul.works li {
		width: 48%;
	}
}

ul.works li a {
	display: block;
}

ul.works li h3,
.featured-projects ul.works li h3 {
	font-family: "azo-sans-uber", sans-serif;
	font-size: 30px;
	font-weight: 400;
	line-height: 1;
	color: var(--black);
	margin-bottom: 5px;
	display: block;
	transition: .4s;
}

ul.works li p {
	color: var(--black);
	font-weight: 400;
	font-size: 14px;
	text-align: right;
}

@media (hover: hover) and (pointer: fine) {
	ul.works li a img,
	ul.works li a video {
		transition: .4s ease;
		border-radius: 25px;
	}

  ul.works li a:hover img,
	ul.works li a:hover video {
		border-radius: 0 25px 25px 0;
    box-shadow: -10px 0 0 0 var(--red);
  }
}

ul.archive {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	column-gap: 20px;
}

ul.archive li {
	width: calc(50% - 15px);
}

@media screen and (min-width: 1000px) {
	ul.archive {
		column-gap: 30px;
	}

	ul.archive li {
		width: calc(33.333% - 20px);
	}
}

ul.archive li a {
	display: block;
	padding: 0;
	margin-bottom: 10px;
}

ul.archive li h3 {
	font-family: "azo-sans-uber", sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	color: var(--black);
	margin-bottom: 0;
	display: block;
	transition: .4s;
}

@media (hover: hover) and (pointer: fine) {
	ul.archive li a img {
    transition: .4s ease;
  }
  ul.archive li a:hover img {
    box-shadow: -7px 0 0 0 var(--red);
  }
}

.work-with-me {
	padding-top: 0;
	padding-bottom: 200px;
}

/************************************************************************************
CASES
*************************************************************************************/

.case-images {
	padding-bottom: 1px;
}

.case {
	padding-top: 100px;
}

.case .gallery:first-of-type {
	padding-top: 40px;
}

.case .gallery:last-of-type {
	padding-bottom: 40px;
}

.hero-slider {
  position: relative;
  width: 100%;
  margin: 35px 0 50px;
}

@media (max-width: 650px) {
	.hero-slider {
	  margin: 15px 0 50px;
	}
}

.slider-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.14%;
}

.device-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.device-frame svg {
  display: block;
  width: 100%;
  height: 100%;
}

.slider-screen {
  position: absolute;
  top: 4.3125%;
  left: 11.4035%;
  width: 77.193%;
  height: 87.5%;
  overflow: hidden;
  z-index: 1;
}

.slider-track {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

.slide {
  flex: 0 0 100%;
  max-width: 100%;
  height: 100%;
}

.slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.slide figcaption {
  position: absolute;
  bottom: -40px;
  left: 0;
  right: 0;
  padding: 10px 0;
  text-align: center;
  color: var(--black);
}

.slider-prev,
.slider-next {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  cursor: pointer;
  z-index: 10;
}

.slider-prev {
  left: 0;
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><text x="8" y="24" font-family="azo-sans-web, sans-serif" font-weight="900" font-size="28" fill="%23F80040">&lt;</text></svg>') 16 16, w-resize;
}

.slider-next {
  right: 0;
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><text x="8" y="24" font-family="azo-sans-web, sans-serif" font-weight="900" font-size="28" fill="%23F80040">&gt;</text></svg>') 16 16, e-resize;
}

.slider-dots {
	position: absolute;
	top: 80%;
	left: 0;
	transform: rotate(90deg);
  display: flex;
  gap: 5px;
  justify-content: center;
  padding: 5px 0;
  margin: 3px auto 0;
  max-width: 100px;
}

.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--black);
  transition: background 0.3s;
}

.slider-dot.active {
  background: var(--reda);
}

@media (max-width: 650px) {
	.slider-dots {
		top: 70%;
	}
	.slider-dot {
	  width: 7px;
	  height: 7px;
	}
}

.case h1 {
	font-family: "azo-sans-uber", sans-serif;
	font-size: 32px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--black);
	margin-bottom: 50px;
}

@media screen and (min-width: 500px) {
	.case h1 {
		font-size: 36px;
	}
}

p.case-meta {
	font-size: 21px;
	margin-bottom: 0;
	letter-spacing: .2px;
	line-height: 2;
	border-top: 1px solid var(--black);
}

.case-meta:last-of-type {
	margin-bottom: 50px;
	border-bottom: 1px solid var(--black);
}

.case-meta b {
	font-weight: 600;
	padding-right: 10px;
}

.case video {
	width: 100%;
	margin-bottom: 20px;
}

.case img {
	margin-bottom: 20px;
}

.case-text p strong {
	font-size: 23px;
}

.visit:before {
	content:"* ";
	color: #fff;
	font-weight: 900;
}

.visit {
	margin-bottom: 150px;
}

/************************************************************************************
SERVICES
*************************************************************************************/

.services-page .services ul {
	list-style: none;
	margin: 80px 0;
	width: 100%;
	display: flex;
	flex-flow: wrap;
	gap: 40px;
}

.services-page .services ul li {
	text-align: left;
}

@media (min-width: 1000px) {
	.services-page .services ul li {
		width: calc(33.33% - 33.33px);
	}
}

.services-page .services ul li a {
	position: relative;
	display: block;
	padding: 30px;
	width: 100%;
	height: 100%;
	border-radius: 25px;
	background: linear-gradient(to bottom, var(--yellow) 50%, var(--white) 50%);
	background-size: 100% 200%;
	background-position: 0 100%;
	transition: background-position 0.4s;
}

@media (hover: hover) and (pointer: fine) {
	.services-page .services ul li a:hover {
		background-position: 0 0;
	}
}

.services-page .services ul li h2,
.services-page .services ul li h3 {
	font-family: "azo-sans-uber", sans-serif;
	font-size: 30px;
	color: var(--black);
  margin: 0 0 30px;
	line-height: 1.2;
}

.services-page .services ul li svg {
	width: 100px;
	vertical-align: middle;
}

.services-page .services ul li svg circle,
.services-page .services ul li svg .cloud {
	fill: var(--white);
	opacity: .6;
  transform-origin: 100px 100px;
  transition: transform 1s ease-in-out;
}

.services-page .services ul li svg circle:first-of-type {
	fill: var(--reda);
	opacity: 1;
}

.services-page .services ul li svg .icon-item {
	fill: var(--reda);
}

@media (hover: hover) and (pointer: fine) {
	.services-page .services ul li a:hover svg path.cloud:nth-of-type(1) {
	  transform: rotate(180deg);
	}
	.services-page .services ul li a:hover svg path.cloud:nth-of-type(2) {
	  transform: rotate(-180deg);
	}
}

@media (max-width: 999px) {
	svg path.animate.cloud:nth-of-type(1) {
	  transform: rotate(180deg);
	}
	svg path.animate.cloud:nth-of-type(2) {
	  transform: rotate(-180deg);
	}
}

.services-page .services ul li p {
	margin: 30px 0 0;
	color: var(--black);
	font-size: 21px;
	font-weight: 300;
	line-height: 1.4;
}

/************************************************************************************
SERVICE PAGES
*************************************************************************************/

.service-page svg {
	width: 100px;
	margin-bottom: 20px;
}

.service-page svg circle,
.service-page svg .cloud {
	fill: var(--white);
	opacity: .6;
  transform-origin: 100px 100px;
  transition: transform 1s ease-in-out;
}

.service-page svg circle:first-of-type {
	fill: var(--red);
	opacity: 1;
}

.service-page svg .icon-item {
	fill: var(--violet);
}

@media (hover: hover) and (pointer: fine) {
	.service-page a:hover svg path.cloud:nth-of-type(1) {
	  transform: rotate(180deg);
	}
	.service-page a:hover svg path.cloud:nth-of-type(2) {
	  transform: rotate(-180deg);
	}
}

.service-item {
	position: relative;
	padding-bottom: 120px;
	margin: 80px 0 40px;
	background: var(--white);
	border-radius: 25px;
}

@media (min-width: 1000px) {
	.service-items {
		flex-flow: nowrap;
		gap: 40px;
	}

	.service-item {
		width: calc(33.33% - 26.66px);
	}
}

.service-item h2 {
	font-family: "azo-sans-uber", sans-serif;
	font-size: 30px;
	font-weight: 400;
	line-height: 1.2;
	margin: 0;
	display: block;
	transition: .4s;
	padding: 20px 20px 0;
}

.service-item p.item-subtitle {
	font-size: 18px;
}

.service-item .service-image-wrapper {
	position: relative;
	font-size: 0;
}

.service-item p {
	font-size: 21px;
	font-weight: 300;
	line-height: 1.4;
	padding: 0 20px;
	margin-bottom: 15px;
}

.service-item p.price-label {
	margin: 20px auto 0;
}

.service-item h3 {
	font-size: 40px;
	margin: 0 20px 30px;
	font-weight: 700;
}

.service-item .item-description p:last-of-type {
	margin-bottom: 0;
}

.service-item .item-button {
	position: absolute;
	bottom: 20px;
	width: 100%;
}

.service-item .item-button a.button {
	width: calc(100% - 40px);
	margin-left: 20px;
}

@media (hover: hover) and (pointer: fine) {
	.service-item .item-button a.button:hover {
		box-shadow: 0 0 1px 0 var(--violet);
	}
}

/************************************************************************************
DEFAULT PAGE
*************************************************************************************/

.default img {
	margin-bottom: 50px;
}

@media screen and (min-width: 500px) {
	.default img {
		max-width: 400px;
	}
}

.blocks {
	padding-bottom: 200px;
}

.faq-block {
  margin: 0 0 30px;
}

.faq-item {
  border-bottom: 2px solid var(--red);
}

.faq-question {
  width: 100%;
  text-align: left;
  padding: 10px 0;
  background: transparent;
  border: none;
  font-size: 25px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
	color: var(--red);
	transition: 0.5s;
}

@media (hover: hover) and (pointer: fine) {
	.faq-question:hover {
	  background: var(--white);
	}
}

.faq-icon {
  font-size: 24px;
  transition: transform 0.3s;
}

.faq-question[aria-expanded="true"] .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0;
  overflow: hidden;
  max-height: 0;
  transition: max-height 1s ease, padding 0.5s ease;
}

.faq-answer-inner {
  padding: 10px 0 20px 0;
}

.faq-answer[aria-expanded="true"] {
  max-height: 500px;
  padding: 0;
}

.faq-answer p {
  margin-bottom: 20px;
}

/************************************************************************************
CONTACT FORM
*************************************************************************************/

.contact-form-block {
  margin: 0 auto;
}

.form-description {
  margin-bottom: 30px;
}

.form-field {
  margin-bottom: 15px;
}

.form-field label {
  display: block;
  font-weight: 700;
  margin-bottom: 5px;
}

.required {
  color: var(--reda);
}

.field-description {
  font-size: 16px;
  margin: -8px 0 5px;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="phone"],
.contact-form input[type="date"],
.contact-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.4);
	background: rgba(255,255,255,.4);
  font-family: inherit;
  font-size: 18px;
}

.contact-form textarea {
  resize: vertical;
}

.radio-group,
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
	margin-top: 10px;
}

.radio-option,
.checkbox-option {
  display: flex;
  align-items: center;
  gap: 8px;
}

.radio-option input[type="radio"] {
  width: auto;
	margin-top: 0;
}

.checkbox-option input[type="checkbox"] {
  width: auto;
	margin-top: 3px;
}

.radio-option label,
.checkbox-option label {
	font-weight: 400;
	margin-bottom: 0;
}

.radio-other,
.checkbox-other {
  align-items: flex-start;
}

.radio-other .other-input,
.checkbox-other .other-input {
  flex: 1;
  margin-left: 8px;
	margin-top: -9px;
	max-width: 300px;
}

.radio-other input[type="radio"],
.checkbox-other input[type="checkbox"] {
	margin-top: 8px;
}

.form-actions {
  margin-top: 30px;
}



.form-success p {
  font-weight: 700;
}

.form-error p span {
	font-weight: 700;
  color: var(--red);
}

.form-error p {
	margin-bottom: 50px;
	border-top: 1px solid var(--black);
	border-bottom: 1px solid var(--black);
	padding: 20px 0;
}

/************************************************************************************
BLOG
*************************************************************************************/

.articles-grid {
	margin-bottom: 200px;
	border-top: 2px solid var(--red);
	counter-reset: post-counter;
}

.articles-grid article {
	border-bottom: 2px solid var(--red);
}

.articles-grid article a {
	padding: 10px 0 13px;;
	transition: .3s;
}

.articles-grid article a {
	counter-increment: post-counter;
  position: relative;
}

.articles-grid article a::before {
  content: counter(post-counter, decimal-leading-zero);
  position: absolute;
  left: 0;
  bottom: -14px;
  font-size: 100px;
  font-weight: 900;
  color: var(--red);
  letter-spacing: 1px;
	line-height: 1;
	opacity: .15;
}

.articles-grid article::before {
	content:'''
	position: absolute;

}

.articles-grid article a:hover {
	background: var(--white);
}

.articles-grid article a h2 {
	margin-bottom: 5px;
}

.articles-grid article a p {
	margin-bottom: 0;
	line-height: 1.4;
	font-size: 18px;
}

.articles-grid article a p b {
	font-weight: 300;
}

@media screen and (min-width: 500px) {
	.articles-grid article a p {
		font-size: 21px;
	}
}

.post-meta {
	border-bottom: 1px solid var(--black);
	font-size: 18px;
}

article hr {
	margin: 80px 0 30px;
}

@media screen and (min-width: 500px) {
	.post-meta {
		font-size: 21px;
	}
}

/************************************************************************************
ERROR
*************************************************************************************/

.error .nine.columns {
	width: 100%;
	margin-top: 50px;
}

.error .blocks p {
	text-align: center;
}

.error .blocks {
  position: relative;
  margin-top: 79px;
  height: calc(100vh - 79px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10%;
}

@media screen and (min-width: 500px) {
  .error img {
    max-width: 400px;
  }
}