@font-face {
	font-family: juliettaMessie;
	src: url('./fonts/Julietta-Messie.otf') format("opentype");
/*	src: url('./fonts/Julietta-Messie.ttf');*/
}
@font-face {
	font-family: mexcellent;
	src: url('./fonts/Mexcellent3d.ttf');
}

html
{
	--themeOrange0: #F7C31F;
	--themeOrange1: #F07848;
}

.kcGalleryTintAnim
{
	background-color: #f2933947;
	width: 100%;
	height: 100%;
	animation: kcGalleryTint 0.5s 1;
}
@keyframes kcGalleryTint
{
	0%
	{
		background-color: #f2933900;
	}
	100%
	{
		background-color: #f2933947;
	}
}

.kcFadeInRightAnim
{
	animation: kcFadeInRight 1.5s 1;
}
@keyframes kcFadeInRight
{
	0%
	{
		padding-right: 20px;
		color: #8D8B8B14;
	}
	100%
	{
		padding-right: 0px;
		color: #8D8B8B59;
	}
}

.kcFadeInLeftAnim
{
	animation: kcFadeInLeft 1.5s 1;
}
@keyframes kcFadeInLeft
{
	0%
	{
		padding-right: 20px;
		margin-left: -20px;
		color: #8D8B8B14;
	}
	100%
	{
		padding-left: 0px;
		color: #8D8B8B59;
	}
}

.kcFadeInTopAnim
{
	animation: kcFadeInTop 1.5s 1;
}
@keyframes kcFadeInTop
{
	0%
	{
		padding-top: 20px;
		color: #F078482B;
	}
	100%
	{
		padding-top: 0px;
		color: var(--themeOrange1);
	}
}

body
{
	font-family: "Montserrat", sans-serif;
}

#loadingOverlay
{
	display: block;
	visibility: visible;
	position: fixed;
	width: 100%;
	z-index: 10;
	background-color: #eeeeee61;
	cursor: wait;
}

#loadingBox
{
	width: 100%;
	height: 100vh;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
}

#loadingImg
{
	filter: drop-shadow(0 0 5px #0d0d0de3);
}

#loadingText
{
	font-family: "Montserrat", sans-serif;
	font-size: 18px;
	font-weight: 450;
	color: #333333;
	margin-top: 10px;
}

#loadingProgressBox
{
	height: 7px;
	border-radius: 4px;
	margin-top: 15px;
	animation: animateBg 2s linear infinite;
	background-image: linear-gradient(90deg,#126a9c,#06e3ec,#126a9c,#06e3ec);
	background-size: 300% 100%;
}
@keyframes animateBg {
	0% { background-position: 100% 0%; }
	100% { background-position: 0% 0%; }
}

.hiddenSection
{
	display: none;
	visibility: hidden;
}

#innerPage
{
	width: 100%;
}

.sectionKS
{
	display: none;
	visibility: hidden;
}

#navBarLogo
{
	position: fixed;
	top: 20px;
	left: 20px;
	z-index: 3;
	filter: drop-shadow(0 0 5px #0d0d0d73);
}
.navBarLogoImg
{
	height: 120px;
}

#navBarLogoText
{
	display: block;
	position: fixed;
	top: 20px;
	left: 70px;
	z-index: 3;
	visibility: hidden;
	filter: drop-shadow(0 0 5px #0d0d0d73);
}

#navBarTogglerKC
{
	border: 2px solid var(--themeOrange0);
}

.navbar-toggler
{
	color: var(--themeOrange0) !important;
}

.navbar-toggler-icon
{
	background-color: var(--themeOrange0) !important;
}

.navBarTogglerBtn
{
	font-size: 20px;
}

.navbar-toggler:focus {
	box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.45);
	-webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.45);
	-moz-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.45);
}

.nav-item
{
	width: 100%;
	text-align: center;
}

#navBarTop
{
	position: fixed;
	top: 0px;
	width: 100%;
	background-color: #00000003;
	padding: 20px;
	z-index: 2;
}

.navBarNavKC
{
	gap: 40px;
	width: fit-content;
}

.navLinkKC
{
	font-family: "Montserrat", sans-serif;
	font-size: 18px;
	color: #eeeeee;
	letter-spacing: 1px;
	font-weight: 600;
	text-shadow: 0px 0px 3px #000000ab;
	padding-left: 40px;
	padding-right: 40px;
	z-index: 3;
}
.navLinkKC:hover
{
	color: var(--themeOrange0);
}

.navLinkKCActive
{
	color: var(--themeOrange0) !important;
	border-bottom: 4px solid var(--themeOrange0);
}

.topBannerCarousel
{
	height: 100vh;
}
.topBannerCarouselItem
{
/*	position: relative;*/
	width: calc(100vw - (100vw - 100%));
/*	width: 100vw;*/
	height: 100vh;
	overflow: hidden;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.topBannerCarouselItemElement
{
	position: absolute;
	top: 0px;
	left: 0px;
	object-fit: cover;
	height: 100%;
	width: 100%;
}

#topBannerNavBtnPrev
{
	position: absolute;
	display: inline-block;
	width: fit-content;
	color: #eeeeee;
	font-weight: 450;
	padding: 5px;
	padding-left: 20px;
	padding-right: 20px;
	top: 50%;
	z-index: 2;
	text-shadow: 0px 0px 2px #000000;
	cursor: pointer;
	transform: rotate(90deg);
}
#topBannerNavBtnPrev:before
{
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	padding: 2px;
	border-radius: 10px 10px 0px 0px;
	background: linear-gradient(to right, var(--themeOrange0), var(--themeOrange1));
	-webkit-mask: 
	linear-gradient(#fff 0 0) content-box, 
	linear-gradient(#fff 0 0);
	mask: 
	linear-gradient(#fff 0 0) content-box, 
	linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

#topBannerNavBtnNext
{
	position: absolute;
	display: inline-block;
	width: fit-content;
	color: #eeeeee;
	font-weight: 450;
	padding: 5px;
	padding-left: 20px;
	padding-right: 20px;
	top: 50%;
	z-index: 2;
	text-shadow: 0px 0px 2px #000000;
	cursor: pointer;
	transform: rotate(270deg);
}
#topBannerNavBtnNext:before
{
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	padding: 2px;
	border-radius: 10px 10px 0px 0px;
	background: linear-gradient(to right, var(--themeOrange1), var(--themeOrange0));
	-webkit-mask: 
	linear-gradient(#fff 0 0) content-box, 
	linear-gradient(#fff 0 0);
	mask: 
	linear-gradient(#fff 0 0) content-box, 
	linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

.clientsBox
{
	background: linear-gradient(90deg, var(--themeOrange0) 36%, var(--themeOrange1) 100%);
	display: flex;
	flex-flow: column;
	justify-content: center;
	gap: 20px;
	align-items: center;
	width: calc(100vw - (100vw - 100%));
/*	width: 100vw;*/
	overflow: hidden;
	padding: 20px;
	padding-left: 80px;
	padding-right: 80px;
	padding-bottom: 50px;
}
.clientsBoxHeading
{
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 20px;
}
.clientsBoxLogosArrowBox
{
	position: absolute;
	margin-top: 50px;
	height: fit-content;
	cursor: pointer;
}
#clientsBoxLogosArrowBoxPrev
{
	left: 0px;
	padding-left: 20px;
}
#clientsBoxLogosArrowBoxNext
{
	right: 0px;
	padding-right: 20px;
}
.clientsBoxLogosNavBtn
{
	font-size: 30px;
	color: #fff;
}

.clientsBoxLogoImgBox
{
	padding: 10px;
	padding-left: 30px;
	padding-right: 30px;
	display: flex;
	flex-flow: row;
	justify-content: center;
	align-items: center;
}
.clientsBoxLogoImg
{
	height: 100px;
	filter: grayscale(100%) drop-shadow(0 0 2px #00000075);
}

.clientsBoxLogos
{
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	gap: 60px;
	align-items: center;
	overflow-x: hidden;
	width: 100%;
}

.aboutUsSection
{
	font-family: "Inter", sans-serif;
	background-color: #F7F5F5;
	padding: 50px;
	display: flex;
	flex-flow: column;
	justify-content: flex-end;
}
.aboutUsSectionContentBox
{
	display: flex;
	flex-flow: row;
	justify-content: space-between;
	align-items: flex-start;
	gap: 50px;
}
.aboutUsSectionWeAreBox
{
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 20px;
	background-image: url("../img/kcLogoGrey.png");
	background-position: right bottom;
	background-size: contain;
	background-repeat: no-repeat;
}
.aboutUsSectionWeAreBoxText
{
	text-align: justify;
}
.aboutUsSectionWeAreBoxHeadingSmall
{
	font-weight: 600;
	font-size: 20px;
}
.aboutUsSectionWeAreBoxHeadingBigBold
{
	font-weight: 800;
}
.aboutUsSectionWeAreBoxHeadingBig
{
	font-size: 45px;
	font-weight: 600;
}
.aboutUsSectionPrideBox
{
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
	align-items: center;
	gap: 20px;
}
.aboutUsSectionPrideBoxHeading
{
	font-size: 20px;
	font-weight: 600;
}
.aboutUsSectionPrideBoxFactors
{
	display: flex;
	flex-flow: row wrap;
	gap: 3px;
	justify-content: flex-start;
	align-items: flex-start;
}
.aboutUsSectionPrideBoxFactorsElement
{
	background-color: #fff;
	text-align: center;
	flex-grow: 1;
	padding: 20px;
	display: flex;
	flex-flow: column;
	justify-content: space-evenly;
	align-items: center;
	transition: 0.6s;
}
.aboutUsSectionPrideBoxFactorsElement:hover
{
	background: linear-gradient(135deg, var(--themeOrange0) 48%, var(--themeOrange1) 100%);
}

.aboutUsSectionPrideBoxFactorsElementImg
{
	height: 50px;
	margin-bottom: 30px;
}
.aboutUsSectionPrideBoxFactorsElementHeading
{
	font-size: 14px;
	font-weight: 600;
}
.aboutUsSectionPrideBoxFactorsElementText
{
	font-size: 12px;
	color: #13121299;
}
.aboutUsSectionAboutBtnBox
{
	padding-top: 30px;
	text-align: left;
}
.aboutUsBtn
{
	padding-left: 20px;
	padding-right: 20px;
	font-size: 20px;
	font-weight: 600;
	color: #fff;
	border: none;
	border-radius: 0px;
	background: linear-gradient(180deg, var(--themeOrange0) 36%, var(--themeOrange1) 100%);
	transition: 0.3s;
}
.aboutUsBtn:hover
{
	color: #000000b8;
}
.aboutUsKCGreyBGImg
{
	height: 200px;
	position: absolute;
	bottom: 0px;
}

.sectionWrapper
{
	padding: 40px;
	padding-top: 70px;
	padding-bottom: 100px;
	width: calc(100vw - (100vw - 100%));
}
.sectionSeparator
{
	height: 10px;
	width: calc(100vw - (100vw - 100%));
/*	width: 100vw;*/
	background: linear-gradient(90deg, #fff 20%, var(--themeOrange1) 60%, var(--themeOrange0) 100%);
}
.sectionSeparatorFlipped
{
	height: 10px;
	width: calc(100vw - (100vw - 100%));
/*	width: 100vw;*/
	background: linear-gradient(270deg, #fff 20%, var(--themeOrange1) 60%, var(--themeOrange0) 100%);
}

.sectionHeading
{
	width: 100%;
	display: flex;
	flex-flow: row;
	align-items: center;
/*	margin-top: 30px;*/
}
.sectionHeadingLeft
{
	justify-content: flex-start;
}
.sectionHeadingRight
{
	justify-content: flex-end;
}
.sectionHeadingWrapper
{
	width: fit-content;
	display: flex;
	flex-flow: column;
	justify-content: flex-end;
	align-items: flex-end;
}
.sectionHeadingEngg
{
	font-family: "Inter", sans-serif;
	font-weight: 900;
	font-size: 11vw;
	color: #8D8B8B59;
}
.sectionHeadingArt
{
	font-family: juliettaMessie, sans-serif;
/*	font-weight: 900;*/
	font-size: 10vw;
	margin-top: -10vw;
	height: 1.8em;
	color: var(--themeOrange1);
}

.servicesCategoriesWrapper
{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
	align-items: flex-start;
	gap: 20px;
}

.servicesCategoriesBox
{
	position: relative;
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
	align-items: center;
	width: 220px;
	cursor: pointer;
	filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.42));
	transition: 0.4s;
}
.servicesCategoriesBox::before
{
	content: "";
	position: absolute;
	inset: 0;
	
	border: 3px solid transparent;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	border-radius: 16px;
	background: linear-gradient(90deg,#B3B3B3,#fff) border-box;
	-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}
.servicesCategoriesBox:hover
{
	filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.42));
}

.servicesCategoriesBoxImgWrapper
{
	flex-grow: 4;
	width: 100%;
	height: 140px;
	background-size: cover;
	background-position: center;
	-webkit-border-radius: 18px 18px 0px 0px;
	-moz-border-radius: 18px 18px 0px 0px;
	border-radius: 18px 18px 0px 0px;
}
.servicesCategoriesBoxContent
{
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
	flex-grow: 6;
	width: 100%;
	padding: 25px;
	background: linear-gradient(90deg, #ffffff 0%, #B3B3B3 100%);
	-webkit-border-radius: 0px 0px 16px 16px;
	-moz-border-radius: 0px 0px 16px 16px;
	border-radius: 0px 0px 16px 16px;
	transition: 0.4s;
}
.servicesCategoriesBoxContentHeading
{
	font-family: "Inter", sans-serif;
	font-weight: 400;
	font-size: 25px;
	line-height: 1em;
	height: 3em;
	margin-bottom: 15px;
	flex-grow: 3;
}
.servicesCategoriesBoxContentText
{
	font-family: "Inter", sans-serif;
	font-weight: 200;
	font-size: 15px;
	line-height: 1em;
	flex-grow: 7;
	height: 8em;
}

.statsSection
{
	padding-bottom: 0px;
}
.statsWrapper
{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: center;
	gap: 45px;
	padding: 40px;
	width: calc(100vw - (100vw - 100%));
	background: linear-gradient(270deg, #fff 0%, var(--themeOrange1) 60%, var(--themeOrange0) 100%);
}
.statsElement
{
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
}
.statsElementValue
{
	font-family: mexcellent;
	font-size: 100px;
	color: #fff;
	text-align: center;
}
.statsElementText
{
	font-family: "Inter", sans-serif;
	font-weight: 800;
	font-size: 20px;
	color: #fff;
}

.gallerySection .sectionHeading
{
	background: url('../img/kcLogoGrey.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right;
}
.gallerySectionTitle
{
	text-align: center;
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 5vw;
}

.gallerySectionWrapper
{
	width: 100vw;
	display: flex;
	flex-flow: row;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30vh;
}
.gallerySectionBorderStripe
{
	height: 30vh;
	width: 3vw;
}
#gallerySectionBorderStripeLeft
{
	background: linear-gradient(90deg, var(--themeOrange0) 20%, var(--themeOrange1) 100%);
}
#gallerySectionBorderStripeRight
{
	background: linear-gradient(90deg, var(--themeOrange1) 20%, var(--themeOrange0) 100%);
}

.gallerySectionContentWrapper
{
	width: 100%;
	display: flex;
	flex-flow: row;
	justify-content: flex-start;
	align-items: center;
	gap: 20px;
	padding-left: 20px;
	padding-right: 20px;
}
.gallerySectionContentWrapperImg
{
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	height: 70vh;
	flex-grow: 6;
}
.gallerySectionContentWrapperVideo
{
	background-color: #aaa;
	height: 70vh;
	flex-grow: 4;
}

.gallerySectionContentWrapperImgRow
{
	width: 100%;
	height: 33.33%;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
}
.gallerySectionContentWrapperImgColWidth1
{
	flex-grow: 1;
	height: 100%;
}
.gallerySectionContentWrapperImgColWidth2
{
	flex-grow: 2;
	height: 100%;
}
.gallerySectionContentWrapperImgItem
{
	cursor: pointer;
}
.gallerySectionContentWrapperImgItem:hover
{
	filter: ;
}
.tintOverlay
{
	height: 100%;
	width: 100%;
}
/*.gallerySectionVideoElementBox
{
	display: flex;
	flex-flow: row;
	justify-content: center;
	padding: 10px;
}
.gallerySectionVideoElement
{
	width: 34vw;
}*/



@media all and (max-width: 990px)
{
	.nav-item
	{
		background-color: #06060636;
		margin-top: 5px;
	}
	.navLinkKC
	{
		padding-top: 5px;
		padding-bottom: 5px;
		border: 1px solid var(--themeOrange0);
		font-size: 15px;
	}
	.navBarNavKC
	{
		gap: 0px;
	}
	.statsWrapper
	{
		background: linear-gradient(0deg, #fff 0%, var(--themeOrange1) 60%, var(--themeOrange0) 100%);
	}
}
@media all and (max-width: 850px)
{
	.gallerySectionContentWrapper
	{
		flex-flow: column;
	}
	.gallerySectionContentWrapperImg
	{
		width: 100%;
		height: 40vh;
	}
	.gallerySectionContentWrapperVideo
	{
		width: 100%;
		height: 40vh;
	}
	.aboutUsSectionContentBox
	{
		flex-flow: column;
		justify-content: space-between;
		align-items: flex-start;
	}
	.aboutUsSectionAboutBtnBox
	{
		text-align: center;
	}
}
@media all and (max-width: 700px)
{
	.statsElementValue
	{
		font-size: 15vw;
	}
	.aboutUsSectionWeAreBoxHeadingBig
	{
		font-size: 40px;
	}
}