/* Fonts
================================*/
@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 400;
	src: local(''),
		url('../fonts/raleway-v28-latin/raleway-v28-latin-regular.woff2') format('woff2'),
		url('../fonts/raleway-v28-latin/raleway-v28-latin-regular.woff') format('woff');
}

@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 500;
	src: local(''),
		url('../fonts/raleway-v28-latin/raleway-v28-latin-500.woff2') format('woff2'),
		url('../fonts/raleway-v28-latin/raleway-v28-latin-500.woff') format('woff');
}

@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 700;
	src: local(''),
		url('../fonts/raleway-v28-latin/raleway-v28-latin-700.woff2') format('woff2'),
		url('../fonts/raleway-v28-latin/raleway-v28-latin-700.woff') format('woff');
}
/*
================================*/

/* Reboot
================================*/
*,
*::before,
*::after {
	box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
	:root {
		scroll-behavior: smooth;
	}
}

body {
	margin: 0;
	background-color: #ffffff;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

figure {
	margin: 0;
}

img,
svg {
	vertical-align: middle;
}

table {
	caption-side: bottom;
	border-collapse: collapse;
}

th {
	text-align: inherit;
	text-align: -webkit-match-parent;
}

thead,
tbody,
tfoot,
tr,
td,
th {
	border-width: 0;
	border-style: solid;
	border-color: inherit;
}

label {
	display: inline-block;
}

button {
	border-radius: 0;
}

button:focus:not(:focus-visible) {
	outline: 0;
}

input,
button,
select,
optgroup,
textarea {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

button,
select {
	text-transform: none;
}

select {
	word-wrap: normal;
}

button,
[type=button],
[type=reset],
[type=submit] {
	-webkit-appearance: button;
}

textarea {
	resize: vertical;
}

iframe {
	border: 0;
}

:active,
:focus {
	outline: 0;
}

[hidden] {
	display: none !important;
}
/*
================================*/


/* Global setting
================================*/
:root {
	--color-primary: #555555;
	--color-secondary: #004674;
	--color-tertiary: #004674;
	--color-black: #000000;
	--color-link-primary: #555555;
	--color-link-secondary: #004674;
	--font-family-primary: 'Raleway', sans-serif;
	--font-family-secondary: 'Raleway', sans-serif;
	--font-size-primary: 1rem;
	--font-weight-primary: 400;
	--font-weight-secondary: 500;
	--font-weight-tertiary: 700;
	--letter-spacing-primary: 0;
	--letter-spacing-secondary: 0.025em;
}

body {
	color: var(--color-primary);
	font-family: var(--font-family-primary);
	font-size: var(--font-size-primary);
	font-weight: var(--font-weight-primary);
	line-height: 1.6;
	letter-spacing: var(--letter-spacing-primary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 1.3em 0 0.6em 0;
	color: var(--color-secondary);
	font-family: var(--font-family-secondary);
	font-weight: var(--font-weight-secondary);
	text-transform: none;
	line-height: calc(1.6em + ((var(--font-size-primary) - 1em) / 2));
	letter-spacing: 0.025em;
}

h1 {
	font-size: clamp(1.5625rem, 2.333333333333333vw, 1.75rem); /* 25-28 */
}

h2 {
	font-size: clamp(1.4375rem, 2.166666666666667vw, 1.625rem); /* 23-26 */
}

h3 {
	font-size: clamp(1.3125rem, 2vw, 1.5rem); /* 21-24 */
}

h4 {
	font-size: clamp(1.1875rem, 1.833333333333333vw, 1.375rem); /* 19-22 */
}

h5 {
	font-size: clamp(1.0625rem, 1.666666666666667vw, 1.25rem); /* 17-20 */
}

h6 {
	font-size: clamp(0.9375rem, 1.5vw, 1.125rem); /* 15-18 */
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
	margin-top: 0;
}

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child {
	margin-bottom: 0;
}

p,
ul,
ol,
dl,
address {
	margin: 0 0 0.9375rem 0;
}

ul,
ol {
	padding-left: 1.875rem;
}

	ul ul,
	ol ol,
	ul ol,
	ol ul {
		margin-top: 0.9375rem;
	}

dd {
	margin: 0;
}

p:last-child,
ul:last-child,
ol:last-child,
dl:last-child,
address:last-child {
	margin-bottom: 0;
}

strong,
b {
	color: var(--color-secondary);
	font-weight: var(--font-weight-secondary);
}

h1 strong,
h1 b,
h2 strong,
h2 b,
h3 strong,
h3 b,
h4 strong,
h4 b,
h5 strong,
h5 b,
h6 strong,
h6 b {
	font-weight: var(--font-weight-tertiary);
}

a {
	color: var(--color-link-primary);
	text-decoration: underline;
	transition: color 0.3s ease;
}

a strong {
	color: var(--color-link-primary);
	transition: color 0.3s ease;
}

a:hover,
a:focus,
a:hover strong,
a:focus strong  {
	color: var(--color-link-secondary);
}

img {
	max-width: 100%;
	height: auto;
}

hr {
	height: 1px;
	border: 0;
	background-color: #e5e5e5;
	margin-top: 1.875rem;
	margin-bottom: 1.875rem;
}

::-moz-selection {
    color: #ffffff;
    background-color: var(--color-tertiary);
}

::selection {
    color: #ffffff;
    background-color: var(--color-tertiary);
}

::-webkit-input-placeholder {
	color: inherit;
	opacity: 0.7;
}

:-ms-input-placeholder {
	color: inherit;
	opacity: 0.7;
}

::placeholder {
	color: inherit;
	opacity: 0.7;
}

.light {
	font-weight: 300;
}

.regular {
	font-weight: 400;
}

.medium {
	font-weight: 500;
}

.semi-bold {
	font-weight: 600;
}

.bold {
	font-weight: 700;
}
/*
================================*/


/* Global style
================================*/

/* Title
================*/
.title-1,
.title-2,
.title-3 {
	margin-top: 0;
	color: var(--color-secondary);
	font-family: var(--font-family-secondary);
	font-weight: var(--font-weight-tertiary);
	text-transform: uppercase;
}

.title-1 {
	font-size: clamp(1.875rem, 3vw, 2.25rem); /* 30-36 */
}

.title-2 {
	font-size: clamp(1.4375rem, 2.166666666666667vw, 1.625rem); /* 23-26 */
}

.title-3 {
	font-size: clamp(1.3125rem, 2vw, 1.5rem); /* 21-24 */
}
/*
================*/

/* Text
================*/
.text-italic {
	font-style: italic;
}

.text-lowercase {
    text-transform: lowercase;
}

.text-uppercase {
    text-transform: uppercase;
}

.text-capitalize {
    text-transform: capitalize;
}

.text-underline {
    text-decoration: underline;
}

.text-1 {
	font-size: clamp(1.25rem, 1.833333333333333vw, 1.375rem); /* 20-22 */
}

.text-2 {
	font-size: clamp(1rem, 1.5vw, 1.125rem); /* 16-18 */
}
/*
================*/

/* Button
================*/
.button-1,
.button-2,
.button-3 {
	display: inline-block;
	border-width: 2px;
	border-style: solid;
	border-radius: 0;
	padding: 0.625rem 2.5rem;
	text-align: center;
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: inherit;
	cursor: pointer;
	transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.button-1 {
	border-color: var(--color-tertiary);
	background-color: var(--color-tertiary);
	color: #ffffff;
}

.button-1:hover,
.button-1:focus {
	border-color: var(--color-secondary);
	background-color: var(--color-secondary);
	color: #ffffff;
	text-decoration: none;
}

.button-2 {
	border-color: var(--color-secondary);
	background-color: var(--color-secondary);
	color: #ffffff;
}

.button-2:hover,
.button-2:focus {
	border-color: var(--color-tertiary);
	background-color: var(--color-tertiary);
	color: #ffffff;
	text-decoration: none;
}

.button-3 {
	border-color: #ffffff;
	background-color: transparent;
	color: #ffffff;
}

.button-3:hover,
.button-3:focus {
	border-color: var(--color-tertiary);
	background-color: var(--color-tertiary);
	color: #ffffff;
	text-decoration: none;
}
/*
================*/

/* Color
================*/
.white {
	color: #ffffff;
}

.black {
	color: var(--color-black);
}

.secondary {
	color: var(--color-secondary);
}

.tertiary {
	color: var(--color-tertiary);
}
/*
================*/
/*
================================*/


/* Content area
================================*/
.content {
	position: relative;
	height: 100vh;
}

.content::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: url('../../images/logo-icon.svg') center right no-repeat;
	background-size: auto 100%;
	opacity: 0.05;
}

	.content > div {
		display: flex;
		position: relative;
		height: 100%;
		z-index: 1;
	}

		.content .content-wrap {
			margin: auto;
			padding: 1.875rem;
		}

			.content .content-row-1 img {
				height: 8rem;
			}

			.content .content-row-2 h1 {
				text-transform: uppercase;
			}

				.content .content-row-2 h1 span {
					display: block;
					font-size: 0.8125em;
					text-transform: none;
				}
/*
================================*/