:root {
	/*--white: #EFFAFD;
	--lightblue: #E9F1FA;
	--grey: #333333;
	--main-color: #FF5722;
	--black: #111111;*/
	--white: #FFFCF2;
	--platinum: #E7E7E7;
	--cream: #FFFFF0;
	--lightblue: #DBE3E7;
	--grey: #14213d;
	--main-color: #EB5E28;
	--black: #000000;
}

body,
html {
	/*background-color: var(--platinum);*/
	background: linear-gradient(to right, #effafd, #e9f1fa);
	background-repeat: repeat-y;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 100%;
	overflow-x: none;
	color: var(--black);
	height: 100%;
	margin: 0;
}

h1 {
	font-family: Roboto, sans-serif;
	font-size: 2.5em;
	user-select: none;
}

h2 {
	font-family: Tahoma, sans-serif;
}

h4 {
	font-family: Roboto, sans-serif;
	font-size: 1.2em;
}

/*Top Navigation Bar*/
.top-nav {
	overflow: hidden;
	background-color: var(--grey);
	position: fixed;
	z-index: 2;
	top: 0;
	width: 100%;
	user-select: none;

	.icon {
		display: none;
	}

	.logo {
		display: flex;
		float: left;
		font-weight: bold;
		color: var(--main-color);
		text-align: center;
		padding: 15px 30px;
		text-decoration: none;
	}

	.top-nav-right {
		display: flex;
		justify-content: right;
		padding: 0;
	}

	.top-nav-right a {
		color: var(--white);
		text-align: center;
		padding: 15px;
		text-decoration: none;
	}

	a:hover:not(.active) {
		background-color: var(--lightblue);
		color: var(--grey);
	}

	a.active {
		background-color: var(--lightblue);
		color: var(--grey);
	}
}

@media screen and (max-width: 750px) {
	.top-nav a:not(:first-child) {
		display: none;
	}

	.top-nav a.icon {
		float: right;
		display: flex;
	}

	.top-nav.responsive {
		position: fixed;
	}

	.top-nav.responsive.icon {
		position: absolute;
		right: 0;
		top: 0;
	}

	.top-nav.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
}

/*End of Top Navigation Bar*/

/*Homepage*/
/*Background Image Header*/
.bg-image {
	background-position: center;
	background-size: cover;
	background-image: url("images/construction-site.jpg");
	background-repeat: no-repeat;
	min-height: 100%;
	/*darken image*/
	background-color: #000000AA;
	background-blend-mode: multiply;
	position: relative;
	user-select: none;

	.bg-text {
		color: var(--white);
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 1;
		width: 80%;
		padding: 20px;
		text-align: center;
		text-shadow: 0px 0px 20px var(--black);

		h2 {
			font-size: 1em;
		}
	}
}

/*Contact Us Button on Image Header & Explore Now Button*/
.button {
	color: var(--main-color);
	font-weight: bold;
	margin: 3% 0;
	padding: 0.8em 2em;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	border: 2px solid var(--main-color);
	user-select: none;
}

.button:hover {
	color: var(--white);
	background-color: var(--main-color);
	transition: 0.5s;
}

/*Slideshow*/
.slideshow-container {
	position: relative;
	background-color: var(--cream);

	.slide {
		display: none;
		flex-wrap: nowrap;
		flex-direction: row;
		justify-content: space-between;
		width: 70%;
		height: 50%;
		margin: auto;
		padding: 10%;

		.slideshow-image {
			float: left;
			padding: 10px;
			margin: auto;
			max-width: 40%;

			img {
				max-width: 100%;
			}
		}

		@media screen and (max-width: 700px) {
			.slideshow-image {
				float: none;
				display: block;
				margin: auto;
				max-width: 50%;
				height: auto;
			}
		}

		.slideshow-text {
			align-content: center;
			text-align: center;
			margin: auto;
			padding: 5%;
			line-height: 1.5em;

			h2 {
				color: var(--main-color);
			}
		}
	}

	/*Slideshow arrows*/
	.prev,
	.next {
		cursor: pointer;
		position: absolute;
		top: 50%;
		width: auto;
		padding: 16px;
		margin-top: -24px;
		color: var(--main-color);
		font-weight: bold;
		font-size: 3em;
		transition: 0.6s ease;
		border-radius: 0 4px 4px 0;
		-webkit-user-select: none;
		user-select: none;
	}

	.next {
		right: 0;
		border-radius: 4px 0 0 4px;
	}

	@media screen and (min-width: 700px) {

		.prev:hover,
		.next:hover {
			color: var(--white);
			background-color: var(--main-color);
		}
	}
}

/*Dots under the slideshow*/
.dot-container {
	text-align: center;
	user-select: none;
	padding: 2%;

	.dot {
		cursor: pointer;
		height: 15px;
		width: 15px;
		margin: 0 2px;
		background-color: var(--grey);
		border-radius: 50%;
		display: inline-block;
		transition: background-color 0.6s ease;
	}

	/*remove dots on smaller screens*/
	@media screen and (max-width: 700px) {
		.dot {
			display: none;
		}
	}

	.active,
	.dot:hover {
		background-color: var(--main-color);
	}
}

/* Fading animation for slides*/
.fade {
	animation-name: fade;
	animation-duration: 1.5s;
}

@keyframes fade {
	from {
		opacity: 0.4;
	}

	to {
		opacity: 1;
	}
}

.subtitle {
	text-align: center;
	margin-top: 10%;
	padding: 5%;

	/*border: 1px solid black;*/
	h2 {
		color: var(--main-color);
		font-size: 1.8em;
	}

	h3 {
		color: var(--grey);
		font-weight: 400;
	}
}

/*Flexboxes for "Key Features of ai.Rectitude" & "What Our Clients Say"*/
.flexbox-container {
	/*background-color: var(--cream);*/
	margin-bottom: 5%;
	background-color: var(--cream);

	.flexbox {
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 60%;
		margin: auto;
		padding: 3% 0;
		/*border: 1px solid black;*/

		.text-right {
			padding: 0 0 0 5%;
			animation-duration: 2s;
			animation-name: slide-in-right;
		}

		.text-left {
			padding: 0 5% 0 0;
			animation-duration: 2s;
			animation-name: slide-in-left;
		}

		.image {
			max-height: 250px;
			width: 100%;
			animation-duration: 2s;
			animation-name: fade-in;
			/*border: 1px solid black;*/
		}

		h4 {
			color: var(--main-color);
		}

		/*increase width on smaller screens*/
		@media screen and (max-width: 700px) {
			width: 90%;
		}
	}
}

@keyframes slide-in-left {
	from {
		translate: -10vw 0;
		opacity: 0;
	}

	to {
		translate: 0 0;
		opacity: 1;
	}
}

@keyframes slide-in-right {
	from {
		translate: 10vw 0;
		opacity: 0;
	}

	to {
		translate: 0 0;
		opacity: 1;
	}
}

@keyframes fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.our-clients {
	text-align: center;
	color: var(--grey);
	margin: 10%;

	.our-clients-flexbox {
		margin: 5% 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;

		img {
			max-height: 100px;
			max-width: 80%;
			margin: 1%;
		}
	}
}

/*End of Homepage*/

/*About Us*/
.about {
	margin: 2% 0 0;
	padding: 5%;
	background-position: center;
	background-size: cover;
	background-image: url("https://www.rectitude.com.sg/images/subbanner.jpg");
	background-repeat: no-repeat;
	background-color: rgba(0, 0, 0, 0.2);
	background-blend-mode: multiply;
	max-width: 100%;

	h1 {
		color: var(--white);
		text-align: center;
		bottom: 0%;
		padding: 5%;
		line-height: 150%;
		text-shadow: 0px 0px 20px var(--black);
	}
}

/*ai.Rectitude is brought to you by*/
.about-content {
	text-align: center;
	padding: 5% 10%;
	line-height: 2em;
	/*border: 1px solid black;*/

	h2 {
		padding: 5%;
	}

	p {
		margin: 2% auto;
	}
}

/*Image container for images from Rectitude*/
.flexbox-about {
	display: flex;
	margin: 5% 0;

	img {
		max-width: 25%;
	}
}

/*End of About Us*/

/*Services*/
.bg-image-services {
	background-position: center;
	background-size: cover;
	/*background-image: url("https://upload.wikimedia.org/wikipedia/commons/f/f1/Berlin_Alexanderplatz_construction_cranes.jpg");*/
	background-image: url("images/pexels-alexisricardoalaurin-12076957.jpg");
	background-position: 50% 65%;
	background-repeat: no-repeat;
	min-height: 100%;
	background-color: #00000080;
	background-blend-mode: multiply;
	position: relative;

	.title-services {
		padding: 5%;
		color: var(--cream);
		font-size: 1.5em;
		position: absolute;
		bottom: 0%;
		line-height: 3em;
		text-shadow: 0px 0px 20px black;
		animation-duration: 2s;
		animation-name: slide-in-right;
	}
}

.subtitle-services-1,
.subtitle-services-2 {
	font-family: Tahoma;
	color: var(--grey);
	text-align: center;
	font-size: 1.5em;
	line-height: 2em;
	margin: 15%;
	/*border: 1px solid black;*/

	i {
		display: inline-block;
		margin: 5%;
	}
}

/*Embed MOM Facebook*/
.flexbox-embed-1,
.flexbox-embed-2 {
	display: flex;
	flex-wrap: wrap;
	padding: 5%;
	justify-content: center;
	/*border: 1px solid black;*/

	.flexbox-embed-text {
		font-family: Tahoma;
		color: black;
		line-height: 2em;
		text-align: right;
		padding: 1%;
		margin: auto 1%;
		/*border: 1px solid black;*/

		.underline {
			color: orangered;
			text-decoration: underline;
			text-decoration-style: double;
		}
	}

	.flexbox-embed-iframe {
		padding: 0 1%;
		max-width: 500px;
		/*border: 1px solid black;*/
	}
}

.flexbox-embed-1 {
	background-color: var(--cream);
}

.our-goals-container {
	background-color: var(--cream);

	.our-goals {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		align-self: center;
		align-items: center;
		text-align: center;
		width: 50%;
		margin: auto;
		font-size: 1.5em;
		line-height: 4em;
		padding: 10%;
		/*border: 1px solid black;*/

		h2 {
			font-family: Roboto;
			font-size: 2em;
			color: var(--main-color);
			animation-duration: 2s;
			animation-name: slide-in-left;
			/*border: 1px solid black;*/
		}

		.green-arrow,
		.red-arrow,
		.cross {
			font-size: 2em;
			color: red;
			vertical-align: middle;
			user-select: none;
			animation-duration: 2s;
			animation-name: slide-in-right;
		}

		/*specify green for the green arrow*/
		.green-arrow {
			color: green;
		}

		p {
			color: var(--grey);
			animation-duration: 2s;
			animation-name: slide-in-right;
		}
	}
}

.flexbox-container-services {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

	.flexbox-services {
		margin: 5% 2% 0%;
		width: 400px;
		/*border: 1px solid black;*/
		background-color: var(--cream);
		box-shadow: 0 0 10px var(--grey);
		overflow: hidden;

		img {
			height: 300px;
			display: block;
			margin: 0 auto;
		}

		.flexbox-services-text {
			padding: 0 10% 5%;
			line-height: 1.5em;

			h2 {
				line-height: 1.5em;
				color: var(--main-color);
			}

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

	@media screen and (min-width: 700px) {
		.flexbox-services:hover {
			transition: 0.5s;
			transform: translateY(-10px);
		}
	}
}

.paragraph-services {
	max-width: 70%;
	margin: auto;
	padding: 10%;
	/*border: 1px solid black;*/

	h2 {
		padding: 4% 0;
		font-family: Tahoma;
		color: var(--grey);
		font-size: 1.5em;
		/*border: 1px solid black;*/
	}

	h4 {
		padding: 2% 0;
		margin: 0 10%;
		font-size: 1.2em;
		font-family: Tahoma;
		color: var(--main-color);
		/*border: 1px solid black;*/
	}

	p {
		padding: 0 0 1%;
		margin: 0 0 1% 15%;
		/*border: 1px solid black;*/
	}
}

/*End of Services*/

/*Our VR Training*/
.bg-image-vr {
	background-position: center;
	background-size: cover;
	background-image: url("images/Rectitude Pte Ltd's Cutting-Edge VR Solutions.jpeg");
	background-repeat: no-repeat;
	max-height: 100%;
	text-align: right;
	margin: 0 10%;
	background-color: rgba(0, 0, 0, 0.1);
	background-blend-mode: multiply;
	border: 1px solid var(--lightblue);

	.title-vr {
		margin: 15% auto 60%;
		display: flex;
		justify-content: center;
		color: var(--white);
		/*border: 1px solid black;*/
		border-radius: 5%;
		text-shadow: 0px 0px 20px var(--grey);
	}
}

@media screen and (max-width: 700px) {
	.bg-image-vr {
		margin: 0;
	}
}

.vr-showcase {
	margin: 2% 10% 8%;

	.vr-showcase-flexbox {
		display: flex;
		flex-wrap: wrap;

		.vr-showcase-flexbox-image {
			position: relative;
			width: 50%;

			img {
				width: 100%;
			}

			.vr-showcase-flexbox-caption {
				position: absolute;
				left: 10px;
				bottom: 0;
				background-color: color-mix(in srgb, var(--lightblue) 90%, transparent);
				color: var(--grey);
				padding: 1%;
			}
		}

		@media screen and (max-width: 700px) {
			.vr-showcase-flexbox-image {
				position: relative;
				width: 100%;
			}
		}
	}
}

.subtitle-vr {
	width: 80%;
	padding: 5%;
	margin: auto;
	color: var(--grey);
	line-height: 1.5em;
	/*border: 1px solid black;*/

	.why-vr {
		padding: 5% 10%;
		font-size: 2em;
		/*border: 1px solid black;*/
	}

	.why-vr-because {
		text-align: right;
		font-size: 1.5em;
		padding: 0 10%;
		/*border: 1px solid black;*/

		.underline {
			font-weight: bold;
			color: var(--main-color);
			text-decoration: underline;
			text-decoration-style: double;
		}
	}
}

.paragraph-vr {
	min-width: 70%;
	margin: 5%;
	display: flex;
	padding: 10% 5%;
	background-color: var(--cream);
	box-shadow: 0 0 10px var(--grey);

	* {
		line-height: 1.5em;
	}

	.paragraph-vr-box {
		width: 60%;
		/*border: 1px solid black;*/

		.square-bullet {
			font-size: 1.5em;
			user-select: none;
		}

		.arrow-vr {
			padding-left: 15%;
			font-size: 1.5em;
			color: var(--main-color);
			user-select: none;
		}
	}

	.paragraph-vr-image-box {
		width: 40%;
		vertical-align: middle;
		margin: auto;

		.paragraph-vr-image {
			max-width: 100%;
			opacity: 50%;
			/*border: 1px solid black;*/
		}
	}

	h2 {
		padding: 0 0 4%;
		color: var(--grey);
	}

	h4 {
		padding: 2% 0;
		margin: 0 10%;
		font-size: 1.2em;
		font-family: Tahoma;
		color: var(--main-color);
	}

	p,
	li {
		margin: 1% 0 1% 15%;
	}
}

@media screen and (max-width: 800px) {
	.paragraph-vr {
		flex-wrap: wrap;
		max-width: 95%;

		.paragraph-vr-image-box {
			margin: auto;
		}

		.paragraph-vr-box {
			width: 100%;
		}
	}
}

.examples-embed-container {
	text-align: center;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 10%;
	/*border: 1px solid black;*/

	.examples-embed {
		margin: 1%;
		padding: 1%;
		line-height: 1.5em;
		flex-grow: 1;
		width: fit-content;
		max-width: 420px;
		background-color: var(--cream);
		box-shadow: 0 0 10px var(--grey);

		.examples-embed-flexbox {
			display: flex;
			flex-wrap: wrap;
			flex-grow: 0;
			justify-content: center;
		}
	}

	* {
		padding: 1%;
	}
}

/*End of Contact Us*/

/*Contact Us*/
.contact {
	margin: 2% 0;
	padding: 5%;
	background-position: center;
	background-size: cover;
	background-image: url("images/pexels-dariaobymaha-1684151.jpg");
	background-position: 0 75%;
	background-repeat: no-repeat;
	background-color: rgba(0, 0, 0, 0.5);
	background-blend-mode: multiply;
	max-width: 100%;

	.title-contact {
		color: var(--white);
		text-align: center;
		padding: 5%;
		line-height: 150%;
		text-shadow: 0px 0px 20px black;
		/*border: 1px solid black;*/
	}
}

.flexbox-contact {
	display: flex;
	flex-wrap: wrap;

	.paragraph {
		width: 35%;
		padding: 1%;
		margin: 5%;
		line-height: 2em;
	}

	.contact-card {
		padding: 1% 2%;
		margin: 5%;
		width: fit-content;
		color: var(--grey);
		border: 5px solid var(--grey);
		border-radius: 10px;
		background-color: var(--cream);

		a:link {
			color: var(--grey);
			text-decoration: none;
		}

		a:hover {
			text-decoration: underline;
		}
	}

	@media screen and (max-width: 700px) {
		.paragraph {
			width: 90%;
		}
	}
}

/*End of Contact Us*/

.paragraph {
	padding: 5% 10%;
	/*border: 1px solid black;*/

	h2 {
		padding: 5% 0 0;
		text-align: center;
		color: #505050;
	}
}

.underline {
	text-decoration-line: underline;
	padding: 10px 0;
}

.techRectitude {
	color: var(--main-color);
	text-decoration-color: var(--main-color);
}

.RectitudePteLtd {
	color: #E5342E;
}

.get-started-today-button {
	background-color: var(--cream);
	text-align: center;
	padding: 10%;
	/*border: 1px solid black;*/

	h2 {
		color: var(--main-color);
		padding: 5%;
	}

	.contact-button {
		padding: 1em 2em;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		color: var(--cream);
		background-color: var(--main-color);
		border-radius: 10px;
	}
}

/*Footer*/
.footer {
	padding: 2% 10%;
	background-color: var(--grey);
	/*border: 1px solid black;*/

	.flexbox-footer {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		/*border: 1px solid blue;*/

		.flexbox-footer-content {
			/*border: 1px solid var(--main-color);*/
			width: 39%;

			.techRectitude {
				font-size: 1.5em;
				text-align: center;
				text-decoration: none;
				/*border: 1px solid black;*/
			}

			.footer-links {
				color: var(--cream);
				text-align: center;
				text-decoration: none;
			}

			/*for the logos*/
			.flexbox-footer-rectitude {
				text-align: center;
				/*border: 1px solid black;*/

				.flexbox-footer-rectitude-logo {
					max-width: 100%;
					/*border: 1px solid var(--main-color);*/
				}

				.flexbox-footer-social-media {
					display: flex;
					justify-content: center;
					gap: 5%;
					margin: 1% auto;
					width: 70%;
					/*border: 1px solid black;*/

					i {
						text-align: center;
						color: var(--cream);
						user-select: none;
					}
				}
			}
		}

		.flexbox-footer-bar {
			border: 1px solid var(--main-color);
			margin: 0 10%;
		}

		@media screen and (max-width: 750px) {
			.flexbox-footer-content{
				width: 100%;
			}
			.flexbox-footer-bar {
				margin: 10% 0;
				width: 100%;
			}
		}
	}
}