@font-face {
	font-family: "Moderniz";
	src: url("Resources/Font/Moderniz.otf") format("opentype");
}

@font-face {
	font-family: "Moderniz";
	src: url('Resources/Font/MODERNIZ.woff') format("woff");
}

@font-face {
	font-family: "Moderniz";
	src: url('Resources/Font/MODERNIZ.woff2') format("woff2");
}

@font-face {
	font-family: "Moderniz";
	src: url('Resources/Font/MODERNIZ.ttf') format("truetype");
}

@font-face {
	font-family: "Moderniz";
	src: url('Resources/Font/MODERNIZ.svg#MODERNIZ') format("svg");
}

html
{
	--White: #FBFBFB;
	--Blue: #061A81;
	--BorderThickness: 5px;
	--ExpandedProductSize: 32rem;

	width: 100%;
	height: 100%;

	font-family: MODERNIZ;
}

.ScrollbarConsideration
{
	scrollbar-gutter: stable;
}

body
{
	background-color: var(--White);

	width: 100%;
	height: 100%;

	margin: 0;

	transition: 0.1s;
}

header
{
	z-index: 1;

	position: absolute;

	top: 0;
	left: 5%;

	width: 90%;
	height: 80px;

	background-color: var(--White);

	border-style: solid;
	border-width: var(--BorderThickness);
	border-radius: 0 0 50px 50px;
	border-color: var(--Blue);
	border-top: none;

	transition: 0.1s; /* For responsive resizing */
}

header > img
{
	position: relative;

	left: 24px;
	height: 56px;

	top: 50%;
	transform: translateY(-50%);

	user-select: none;
	-webkit-user-select: none;

	cursor: pointer;

	transition: 0.1s; /* For responsive resizing */
}

header > .HeaderButtons
{
	position: absolute;

	display: flex;
	justify-content: space-evenly;
	align-items: center;

	right: 14px;
	top: 0;

	width: 24rem;

	height: 100%;

	transition: 0.1s; /* For responsive resizing */
}

header > .HeaderButtons > div
{
	width: 10rem;
	height: 2.5rem;

	text-align: center;
	line-height: 2.75rem;
	font-size: 16px;

	background-color: var(--Blue);
	color: var(--White);

	cursor: pointer;

	border-radius: 1000px;

	transition: 0.1s;

	user-select: none;
	-webkit-user-select: none;
}

header > .HeaderButtons > div:hover
{
	transform: scale(1.1);
	
}

.LandingText
{
	z-index: 1;

	width: 80%;
	height: fit-content;

	margin: auto;

	top: 240px;

	left: 0;
	right: 0;

	margin-inline: auto;

	position: absolute;

	transition: 0.1s;
}

h1
{
	color: var(--White);
	font-size: 80px;

	margin: 0;

	cursor: default;

	transition: 0.1s;
}

h2
{
	color: var(--Blue);
	font-size: 40px;

	margin: 0;

	cursor: default;

	transition: 0.1s;
}

h3
{
	color: var(--White);
	font-size: 40px;

	margin: 0;

	cursor: default;

	transition: 0.1s;
}

p
{
	color: var(--Blue);
	font-size: 30px;

	margin: 0;

	cursor: default;

	transition: 0.1s;
}

.BGSlideshow::before
{
	content: "";
    position: absolute;
    width: 100%;
    height: 36em;
	
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);

	background-color: rgba(0, 0, 0, 0.3);

	transition: 0.1s;
}

.BGSlideshow
{
	width: 100%;
	height: 36em;

	transition: 0.1s;
}

.BGSlideshow > .Image
{
	width: 100%;
	height: 100%;

	background-size: cover;
	background-position-y: -200px;
	background-image: url("Resources/BG1.jpg");
	
	transition: 0.1s;
}

.LandingMain
{
	display: flex;
	justify-content: center;

	width: calc(100% - 4rem);

	height: calc(100% - 36em - var(--BorderThickness));

	border-top: var(--BorderThickness) solid var(--Blue);

	position: relative;

	padding-left: 2rem;
    padding-right: 2rem;

	transition: 0.1s;
}

.LandingMain > .TextBox
{
	display: flex;
	justify-content: space-between;

	height: fit-content;

	top: 4em;

	position: relative;

	width: 65rem;

	margin-right: 10rem;

	transition: 0.1s;
}

.LandingMain > .TextBox > p
{
	margin-left: 2.5em;

	transition: 0.1s;
}

.LandingMain > .ButtonBox
{
	display: flex;
	flex-direction: column;
	
	height: fit-content;

	top: 1em;

	position: relative;
}

.LandingMain > .ButtonBox > div
{
	font-family: MODERNIZ;
	font-size: 30px;
	color: var(--White);

	text-align: center;
	line-height: 9rem;

	padding: 0;

	width: 25rem;
	height: 9rem;

	border-radius: 50px;

	margin-top: 1rem;
	margin-bottom: 1rem;

	overflow: clip;

	position: relative;
	z-index: 2;

	transition: 0.1s;

	cursor: pointer;

	user-select: none;
	-webkit-user-select: none;
}

.BTBG
{
	content: "";
	position: absolute;

	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	background-image: url("Resources/BG1.jpg");
	background-size: cover;

	filter: blur(8px) brightness(0.7);
	-webkit-filter: blur(8px) brightness(0.7);

	transform: scale(1.2);

	z-index: -1;

	transition: 0.25s;
}

.AboutContainer
{
	display: flex;
	flex-direction: column;

	position: relative;

	width: 100%;

	gap: 5rem;

	top: 15rem;

	transition: 0.1s;
}

.AboutTitle
{
	width: 100%;

	position: relative;

	text-align: center;

	top: 10rem;

	color: var(--Blue);

	transition: 0.1s;
}

.AboutTextBox
{
	display: flex;
	justify-content: space-between;

	height: fit-content;

	left: 50%;
	transform: translateX(-50%);

	position: relative;

	width: 60rem;

	gap: 2rem;

	transition: 0.1s;
}

.ContactsTextBox
{
	flex-direction: column;
	gap: 0.5rem !important;

	align-items: center;
}

.MapContainer
{
	width: fit-content;

	transition: 0.1s;
}

.MapContainer > p
{
	font-size: 9px;
	text-align: center;
}

.Map
{
	transition: 0.1s;
}

.AtSymbol
{
	font-family: Verdana;
	font-weight: bolder;
}

.UltraSmall
{
	font-size: 18px;
}

.ProductsContainer
{
	display: flex;
	flex-direction: column;

	position: relative;

	align-items: center;

	width: 100%;

	gap: 2rem;

	top: 15rem;

	transition: 0.1s;
}

.ProductEntry
{
	width: 70rem;
	height: calc(14rem + 10px);

	position: relative;

	border-radius: 50px;
	border-style: solid;
	border-color: var(--Blue);
	border-width: var(--BorderThickness);

	user-select: none;
	-webkit-user-select: none;

	cursor: pointer;

	transition: 0.1s;

	overflow: hidden;
}

.ProductIdentity
{
	display: flex;

	margin: 2rem;

	transition: 0.1s;
}

.ProductImage
{
	height: 10rem;

	border-radius: 50px;
	border-style: solid;
	border-color: var(--Blue);
	border-width: var(--BorderThickness);

	transition: 0.1s;
}

.ProductName
{
	height: fit-content;
	align-self: center;

	margin-left: 2rem;
}

.ProductEntry > .ProductIdentity > .ProductName > h3
{
	color: var(--Blue);
}

.ProductEntry > .ProductIdentity > .ProductName > p
{
	color: var(--Blue);
	font-size: 20px;
}

.ProductEntry > .ProductDescription
{
	color: var(--Blue);
	font-size: 16px;

	opacity: 100%;

	margin-left: 2rem;
	margin-right: 2rem;
}

.EndPageSpacer
{
	width: 100%;
	height: 1rem;
}