@charset "utf-8";
/* CSS Document */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html {
	/*scroll-behavior: smooth;*/
}
body {
	margin: 0;
	font-family: "Manrope", sans-serif;
}

.content-wrap {
	width: 90%;
	max-width: 1250px;
	margin: 0 auto;
}

section {
	padding: 40px 0 110px;
}
main section:first-of-type {
	padding-top:1px; /* remove top padding on first section */
}

/*					BANNER					*/

header#hero {
	position: relative;
	max-width:1920px;
	height: 1200px;
	margin:0 auto;
	overflow: hidden;
	background:#1C103D url("img/sky.png") no-repeat;
	background-position: top center;
}

.parallax {
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
}

.hero-text {
	position: absolute;
	z-index: 6;
	width: 737px;
	height: 284px;
	left: 50%;
	top: 13%;
	margin-left: -368px;
}

.hill1 {
	background-image: url("img/hills1.png");
	background-position: center top;
	top: 420px;
	z-index: 5;
}
.hill2 {
	background-image: url("img/hills2.png");
	background-position: center top;
	top: 370px;
	z-index: 4;
}
.hill3 {
	background-image: url("img/hills3.png");
	background-position: center top;
	top: 190px;
	z-index: 3;
}
.hill4 {
	background-image: url("img/hills4.png");
	background-position: calc(50% - 80px) top;
	top: 280px;
	z-index: 2;
}

.windmill-sails {
	position: absolute;
	top: 4px;
	left: calc(50% + 418px);
	background: url("img/windmill-sails.png") no-repeat;
	width: 108px;
	height: 109px;
	animation: sails-spin 15s linear infinite;
}
@keyframes sails-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(-360deg);
	}
}

.clouds-layer {
	z-index:1;
}

.clouds {
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(img/clouds.png) center top no-repeat;
	z-index: 2;
}

.plane1,
.plane2 {
	position: absolute;
	top: 0;
	left: 50%;
	width: 145px;
	height: 60px;
	margin-left: -72px;
	background: url(img/plane.png) no-repeat;
	z-index: 1;
	transform-origin: center center;
}
.plane1 {
	animation:
		plane-flash 2s steps(2) infinite,
		plane1-fly 54s linear infinite;
}
.plane2 {
	animation:
		plane-flash 2s steps(2) infinite,
		plane2-fly 56s linear infinite;
		animation-delay: 2.3s, 0s;
}

@keyframes plane-flash {
	from {
		background-position:0 0;
	}
	to {
		background-position:0 -120px;
	}
}

@keyframes plane1-fly {
	0% {
		transform: translate(-1100px, 320px) rotate(-12.6deg);
	}
	92% {
		transform: translate(800px, -120px) rotate(-12.6deg);
	}
	100% {
		transform: translate(800px, -120px) rotate(-12.6deg);
	}
}
@keyframes plane2-fly {
	0% {
		transform: translate(510px, 700px) rotate(-140deg);
	}
	95% {
		transform: translate(-420px, -100px) rotate(-140deg);
	}
	100% {
		transform: translate(-420px, -100px) rotate(-140deg);
	}
}

.sign {
	position: fixed;
	bottom: 0px;
	left: 5%;
	width: 154px;
	height: 177px;
	background:url(img/sign.png);
	z-index: 6;
}
.sign-arrow {
	position:absolute;
	top:-21px;
	right:-35px;
	width: 55px;
	height: 100px;
	background: url(img/signarrow.png) no-repeat;
	animation: sign-arrow 3s steps(5) infinite;
}

@keyframes sign-arrow {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 0 -500px;
	}
}

/* hide bottom of sign below header on scroll */
header#hero.border1:after {
	border-bottom:50px solid #FFF;
}

/*				PARAGRAPHS HEADINGS ANCHORS ETC			*/

h2.home-title {
	position: relative;
	font-family: "Bebas Neue", sans-serif;
	font-size: 75px;
	font-weight: normal;
	color: #3D40B6;
	line-height: 1;
	text-align: center;
	text-shadow: 4px 4px 6px #0000004d;
	margin: 20px 0 50px;
}
h2.home-title:after {
	content: " ";
	display: block;
	position: absolute;
}
section:nth-child(even) h2 {
	color:#FAFC24;
}

#websites h2.home-title:after {
	width: 350px;
	height: 41px;
	bottom: -24px;
	left: calc(50% - 200px);
	background: url(img/underline1.png) no-repeat;
}
#about h2.home-title:after {
	width: 383px;
	height: 27px;
	bottom: -20px;
	left: calc(50% - 190px);
	background: url(img/underline2.png) no-repeat;
}
#design-work h2.home-title:after {
	width: 375px;
	height: 28px;
	bottom: -25px;
	left: calc(50% - 185px);
	background: url(img/underline3.png) no-repeat;
}

main p {
	font-size: 1.3rem;
	color: #666;
	text-align: center;
	text-shadow: 2px 2px 2px #00000025;
	line-height: 1.6;
	padding: 0 0 1rem 0;
}
#about p {
	color: #FFF;
}

#about p a {
	color: #FAFC24;
	text-decoration: none;
}
#about p a:nth-of-type(even) {
	color: #F86E12;
}
#about p a:hover {
	animation: link-glow 0.8s ease-in-out infinite alternate;
}
#about p a:nth-of-type(even):hover {
	animation-direction: alternate-reverse;
}
@keyframes link-glow {
	from {
		color: #FAFC24;
	}
	to {
		color: #F86E12;
	}
}


/*				DECORATED SECTION BORDERS				*/

.border1,
.border2 {
	position:relative;
}

.border1:after,
.border2:after {
	content: " ";
	height: 85px;
	width:100%;
	position: absolute;
	bottom: 0;
	z-index: 100;
}
.border1:after {
	background:url(img/border1.png) repeat-x;
}
.border2:after {
	background:url(img/border2.png) repeat-x;
}


/*				WEBSITE THUMBNAILS				*/

.websites-wrap {
	display: grid;
	grid-template-columns: repeat(3, 385px);
	justify-content: space-between;
	row-gap: 30px;
	margin-top: 50px;
}

.web-thumb {
	position: relative;
	display: block;
	width: 385px;
	height: 274px;
}

.web-thumb img {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 310px;
	height: 212px;
	z-index: 1;
}

.web-thumb-text {
	display: flex;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	height: 90%;
	align-items: center;
	justify-content: center;
	padding: 50px;
	z-index: 2;
	font-family: "Bebas Neue", sans-serif;
	font-size: 40px;
	color: #FFF;
	text-align: center;
	text-decoration: none;
	text-shadow: 2px 2px 2px #0000004d;
	line-height: 1.2;
	background: #3d3fb6bd;
	transition: opacity 0.6s ease;
}

.web-thumb:hover .web-thumb-text {
	opacity: 0;
}

.web-thumb::after {
	content: "";
	position: absolute;
	width: 385px;
	height: 274px;
	left: 0;
	top: 0;
	z-index: 3;
}
.web-thumb:nth-child(1)::after {
	background-image: url("img/thumbframe1.png");
}
.web-thumb:nth-child(2)::after {
	background-image: url("img/thumbframe2.png");
}
.web-thumb:nth-child(3)::after {
	background-image: url("img/thumbframe3.png");
}
.web-thumb:nth-child(4)::after {
	background-image: url("img/thumbframe4.png");
}
.web-thumb:nth-child(5)::after {
	background-image: url("img/thumbframe5.png");
}
.web-thumb:nth-child(6)::after {
	background-image: url("img/thumbframe6.png");
}

/*					ABOUT				*/

#about {
	background: #3D40B6 url(img/bluebg.png) fixed;
}
#about .content-wrap {
	position: relative;
	z-index: 2;
}
#about:before {
	content: " ";
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top:0;
	background: linear-gradient(
	to bottom,
	rgba(46, 48, 143, 1) 0%,
	rgba(46, 48, 143, 0) 40%,
	rgba(46, 48, 143, 0) 60%,
	rgba(46, 48, 143, 1) 100%);
	z-index: 1;
}


/*					MARQUEE				*/

.contact-marquee {
	position: fixed;
	z-index: 100;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 10px 0;
	background-color:#C92828;
	opacity: 0;
	transform: translateY(20px);
	pointer-events: none;
	transition: opacity 0.5s ease, transform 0.5s ease;
}
.contact-marquee:before {
	content: " ";
	display: block;
	position: absolute;
	bottom: 100%;
	width: 100%;
	height: 20px;
	background: url(img/border3.png) repeat-x;
}

.contact-marquee.visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.marquee-track {
	display: flex;
	width: max-content;
	animation: marquee 40s linear infinite;
}
.marquee-track:hover {
	animation-play-state: paused;
}
.marquee-content {
	display: flex;
	align-items: center;
	gap: 40px;
	padding-right: 40px;
	white-space: nowrap;
}
.marquee-content span,
.marquee-content a {
	font-family: "Bebas Neue", sans-serif;
	color: #FFF;
	font-size: 31px;
}
.marquee-content a {
	color: #FAFC24;
	text-shadow: 0 0 2px #0000000e;
}
.marquee-content a:hover {
	animation: marquee-link-glow 0.8s ease-in-out infinite alternate;
}

@keyframes marquee-link-glow {
	from {
		color: #FAFC24;
		text-shadow: 0 0 2px #0000000e;
	}
	to {
		color: #F86E12;
		text-shadow: 0 0 5px #00000034;
	}
}

@keyframes marquee {
	from {
		transform: translateX(100vw);
	}
	to {
		transform: translateX(-100%);
	}
}

/*					MISC				*/

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}