/* .page-home *******************************/

.page-home {
	padding-top: 120px;

  > section {
		overflow: hidden;
		position: relative;

    > .wrapper {
	    margin: 0 auto;
	    max-width: 1400px;
      padding: 80px 20px;
      width: 100%;
		}
	}
}

@media (min-width: 1000px) {

  .page-home {

    > section {
      align-items: center;
      display: flex;

      > .wrapper {
	      padding: 80px 40px;
      }
    }
  }
}

/* .page-home section.welcome *******************************/

.page-home section.welcome {
  align-items: flex-start;
	background-color: transparent;
	height: calc(50svh - 50px);
	position: relative;
	text-align: center;
	z-index: 1;

	.wrapper {

		.logo {
			height: 60px;
			margin-bottom: 30px;
			width: auto;
		}

		.scroll {
			height: 20px;
			width: auto;
		}

		h1 {
			color: #1e032d;
			font-size: 1.5rem;
			line-height: 2.0rem;
			margin-bottom: 20px;
		}
	}
}

@media (min-width: 1000px) {

  .page-home section.welcome {
		height: auto;

		.wrapper {
			padding: 0 20px;

			h1 {
				font-size: 3.0rem;
				line-height: 4.0rem;
			}
		}
  }
}

/* .page-home section.hero *******************************/

.page-home section.hero {
  height: 50svh;
	position: relative;
	z-index: 1;
}

@media (min-width: 1000px) {

  .page-home section.hero {
		display: block;
	  height: 100svh;
  }
}

/* .page-home section.intro *******************************/

.page-home section.intro {
	background-color: rgba(10,1,15,0.9);
	color: var(--color-brand-cream);
	padding: 80px 20px;
	position: relative;
	text-align: center;
	z-index: 20;

	.wrapper {

		h2 {
			font-size: 3.0rem !important;
			font-weight: 300;

			span {
				font-weight: 900;
			}
		}
		
		p {
			font-size: 1.5rem;
  	  font-weight: 100;
  	  line-height: 2.5rem;
		}
	}
}

@media (min-width: 1000px) {

  .page-home section.intro {
    height: 100svh;

		.wrapper {

			h2 {
				font-size: 4.0rem;
			}
		}
  }
}

/* .page-home section.examples *******************************/

.page-home section.examples {
	background: url('../../../assets/images/bgs/valley.webp');
  background-attachment: fixed;
  background-position: center bottom;
	background-repeat: no-repeat;
	background-size: cover;
	display: none;
	position: relative;
	z-index: 20;

	.wrapper {
		align-items: center;
		background-color: rgba(255,255,255,0.9);
		display: flex;
		min-height: 100svh;
		max-width: 100%;
		padding: 0;

		.position {
			padding-bottom: 60px;
			width: 100%;

			h2 {
				color: var(--color-brand-purple);
				font-size: 3.5rem;
				font-weight: 300;
				margin: 80px 0;
				text-align: center;

				span {
					font-weight: 800;
				}
			}

			.clients {
				overflow: hidden;
				position: relative;

				.scroll {
					align-items: stretch;
					display: flex;
					gap: 40px;
					position: relative;
				}
	
				.scroll-left {
					animation: 100s linear alternate scroll-left;
					animation-iteration-count: infinite;
					justify-content: flex-start;
				}

				.scroll-right {
					animation: 100s linear alternate scroll-right;
					animation-iteration-count: infinite;
					justify-content: flex-end;
				}

				.client {
					background-color: #fff;
					border: 1px solid #fff;
					border-radius: 10px;
					box-shadow: 0 5px 5px rgba(0,0,0,0.05);
					flex-shrink: 0;
					margin-bottom: 40px;
					padding: 20px;
					transition: all ease 0.2s;
					width: 400px;

					&:hover {
						box-shadow: 0 5px 5px rgba(0,0,0,0.2);
					}

					.graphic {
						margin-bottom: 20px;

						img {
							height: 40px;
							width: auto;
						}
					}

					.quote {
						border-left: 5px solid #ccc;
						font-style: italic;
						margin-bottom: 20px;	
						padding-left: 10px;
					}

					.tags {

						span {
							color: #666;
							font-size: 0.7rem;
							font-weight: 600;
							margin-right: 5px;
  						text-transform: uppercase;
						}

						.tag {
							background-color: #eee;
							border: 0;
	  					border-radius: 20px;
							color: #444;
							display: inline-block;
							font-size: 0.8rem;
							margin-right: 5px;
							outline: 0;
							padding: 5px 20px;
						}
					}
				}
			}
		}
	}
}

@keyframes scroll-left {
	0% { left: 30px; }
	100% { left: calc(-1 * 100svw); }
}

@keyframes scroll-right {
	0% { right: 30px; }
	100% { right: calc(-1 * 100svw); }
}

@media (min-width: 1000px) {

  .page-home section.examples {
		display: block;
		min-height: 100svh;
  }
}

/* .page-home section.reviews *******************************/

.page-home section.reviews {
  background: url('../../../assets/images/slides/bgs/software.webp');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

 	.panel {
		background-color: rgba(0,0,0,0.75);
		color: #f5f5f5;
		width: 100%;

		.main {
			text-align: center;

			h1 {
				color: var(--color-brand-blue);
			}
		}
	}
}

@media (min-width: 1000px) {

	#slide-software {

	 	.sidebar {
			width: 30%;
		}

	 	.panel {
			width: 70%;

			.main {
				max-width: 1000px;
			}
		}
	}
}

/* .page-home section.start *******************************/

.page-home section.start {
	align-items: center;
	background: url('../../../assets/images/bgs/nightfall.webp');
  background-position: center bottom;
	background-repeat: no-repeat;
	background-size: cover;
	color: #fff;
	display: flex;
	height: 100svh;
	justify-content: center;
	z-index: 20;

	.wrapper {
		padding: 0;
		padding-bottom: 80px;
		position: relative;
		text-align: center;

		.wb-circle {
			position: relative;
			top: 80px;
			z-index: 22;

			img {
    		-webkit-animation: spin 60s infinite linear;
 	  		animation: spin 60s infinite linear;
				height: 160px;
				position: relative;
				right: -160px;
				width: auto;
			}
		}

		h2 {
			font-size: 4.0rem;
			font-weight: 900;
			margin: 0;
			text-transform: uppercase;
		}
	}
}

@keyframes spin {

	from {
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg); 
	}

	to {
		transform: rotate(360deg);
		-webkit-transform: rotate(360deg); 
	}
}

@media (min-width: 1000px) {

  .page-home section.start {
 	  height: 100svh;

		h2 {
			font-size: 4.0rem;
			line-height: 4.0rem;
		}
  }
}


	.gradient {
		background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%);
		bottom: 0;
		height: 0px;
		left: 0;
		position: absolute;
		width: 100%;
		z-index: 21;
	}