/* INDEX PAGE COLORS AND FONTS
	================================================== */

/* Page Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Taviraj:wght@300;400;500;600&display=swap');

/* Body Options */
body {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	letter-spacing: 0px;
}

body * {
	outline: none;
}


/* INDEX PAGE STYLES
	================================================== */

/* Sizes home section */
.home {
	position: relative;
	width: 100vw;
	height: 70vh;
	background: transparent !important;
	overflow: hidden !important;
}

/* Image backgrounds */
.home .svg-mask,
.home .background-elements,
.home .image-backgrounds {
	position: absolute;
	left: 0;
	top: 0;
	width: 100vw;
	height: 70vh;
	z-index: 0;
	pointer-events: none;
}

.home .svg-mask {
	z-index: 2;
}

.home .image-backgrounds {
	z-index: 1;
}

.home .svg-mask .desktop-only path {
	-webkit-transition: all 6s;
	transition: all 6s;
}

/* Home texts */
.home .titles .title {
	font-size: 40px;
	margin-left: -2px;
	color: #000;
	line-height: 65px;
	letter-spacing: -0.77px;
	text-shadow: 0 0 16px rgba(255, 255, 255, 0.41);
}

.home .titles .home-desc {
	font-size: 12px;
	margin-top: 30px;
	color: #393939;
	letter-spacing: 1px;
	line-height: 23px;
	text-transform: uppercase;
	text-shadow: 0 0 16px rgba(255, 255, 255, 0.41);
}

@media only screen and (max-width: 992px) {}

.home .titles .home-btn {
	font-weight: 700;
	margin-top: 25px;
	font-size: 11px;
	color: #2C2C2C;
	letter-spacing: 3px;
	text-align: center;
	display: inline-flex;
	padding: 20px 50px;
	background: transparent;
	border: 1px solid #7E7E7E;
}

.home .titles .home-btn:hover {
	color: #000;
	border: 1px solid #000;
}

@media only screen and (max-width: 1440px) {
	.home .titles .title {
		font-size: 48px;
		margin-left: -1px;
		line-height: 54px;
		letter-spacing: -0.68px
	}
}

@media only screen and (max-width: 1280px) {
	.home .titles .title {
		font-size: 42px;
		line-height: 51px;
		letter-spacing: -0.58px
	}
}

@media only screen and (max-width: 992px) {
	.home .titles .title {
		font-size: 34px;
		margin-left: 0px;
		line-height: 39px;
		letter-spacing: -0.38px
	}

	.home .titles .home-desc {
		margin-top: 15px;
		line-height: 21px;
	}

	.home .titles .home-btn {
		margin-top: 20px;
		letter-spacing: 2px;
		padding: 14px 40px;
		background: transparent;
		border: 1px solid #7E7E7E;
	}
}

@media only screen and (max-width: 640px) {
	.home .titles .title {
		font-size: 23px;
		line-height: 29px;
		letter-spacing: -0.18px
	}
}

/* Socials on home */
.home .home-socials {
	position: absolute;
	z-index: 5;
	left: 0;
	bottom: 0;
	width: auto;
	display: flex;
	display: -ms-flexbox;
	flex-direction: column-reverse;
	-ms-flex-direction: column-reverse;
	align-items: flex-end;
	-ms-flex-align: end;
}

.home .home-socials .main-socials {
	display: flex;
	display: -ms-flexbox;
	flex-direction: column;
	-ms-flex-direction: column;
	padding: 15px 30px;
}

.home .home-socials a {
	position: relative;
	display: inline-flex;
	display: -ms-inline-flexbox;
	margin: 10px 0;
	font-size: 15px;
	color: #000;
	width: 29px;
	height: 29px;
	align-items: center;
	border-radius: 50%;
	-ms-flex-align: center;
	justify-content: center;
	-ms-flex-pack: center;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
}

.home .home-socials a:before {
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	z-index: -1;
	border-radius: 50%;
	-ms-transform: scale(1) translateZ(0);
	-webkit-transform: scale(1) translateZ(0);
	transform: scale(1) translateZ(0);
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
	backface-visibility: hidden;
}

.home .home-socials a.more-trigger.active:before,
.home .home-socials a:hover:before {
	background-color: #eee;
	-ms-transform: scale(1.7) translateZ(0);
	-webkit-transform: scale(1.7) translateZ(0);
	transform: scale(1.7) translateZ(0);
}

.home .home-socials a.more-trigger.active:active:before,
.home .home-socials a:active:before {
	-ms-transform: scale(1) translateZ(0);
	-webkit-transform: scale(1) translateZ(0);
	transform: scale(1) translateZ(0);
}

/* Hidden social links on home */
.home .home-socials .others {
	background: transparent;
	display: flex;
	display: -ms-flexbox;
	flex-direction: column;
	-ms-flex-direction: column;
	padding: 15px 30px;
}

.home .home-socials .others a {
	-ms-transform: translateY(10px);
	-webkit-transform: translateY(10px);
	transform: translateY(10px);
	opacity: 0;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
}

.home .home-socials .others.active a {
	-ms-transform: translateY(0);
	-webkit-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
}

/* Animation delays for hidden social links on home */
.home .home-socials .others>a:nth-of-type(8) {
	transition-delay: 0.05s;
}

.home .home-socials .others>a:nth-of-type(7) {
	transition-delay: 0.1s;
}

.home .home-socials .others>a:nth-of-type(6) {
	transition-delay: 0.15s;
}

.home .home-socials .others>a:nth-of-type(5) {
	transition-delay: 0.2s;
}

.home .home-socials .others>a:nth-of-type(4) {
	transition-delay: 0.25s;
}

.home .home-socials .others>a:nth-of-type(3) {
	transition-delay: 0.3s;
}

.home .home-socials .others>a:nth-of-type(2) {
	transition-delay: 0.35s;
}

.home .home-socials .others>a:nth-of-type(1) {
	transition-delay: 0.4s;
}

@media only screen and (max-width: 992px) {

	.home .home-socials .main-socials,
	.home .home-socials .others {
		padding: 0;
	}

	.home .home-socials {
		width: 50px;
		padding: 0 10px;
	}
}

/* About Section */
.about {
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-style: solid;
	border-color: #E2E2E2
}

.about .about-title {
	color: #262626;
	letter-spacing: -0.8px;
	line-height: 46px;
	font-size: 32px;
	font-weight: 400;
}

.about .about-button {
	display: inline-flex;
	display: -ms-inline-flexbox;
	padding: 10px 40px;
	color: white;
	box-shadow: 0 6px 26px 0 rgba(241, 62, 62, 0.30);
	font-size: 12px;
	font-weight: 700;
}

/* Wishbox */
.wishbox {
	border-bottom: 1px solid #E2E2E2;
}

.wishbox .wishbox-title {
	color: #262626;
	letter-spacing: -0.8px;
	line-height: 46px;
	font-size: 32px;
	font-weight: 400;
}

.wishbox .wishbox-button {
	display: inline-flex;
	display: -ms-inline-flexbox;
	padding: 10px 40px;
	color: white;
	font-size: 12px;
	font-weight: 700;
}