@font-face {
	font-family: font-family-1;
	src: url("../font/BeVietnamPro-Regular.ttf");
}
@font-face {
	font-family: font-family-2;
	src: url("../font/BeVietnamPro-Light.ttf");
}
/* variables */
:root {
	--white: #fff;
	--black: #000;
	--dark-theme: #003566;
	--primary-clr: #0274b7;
	--dark: #0d1321;
	--font-family-1: font-family-1;
	--font-family-2: font-family-2;
	--whitesmoke: #fdfdfd77;
}
html {
	scroll-behavior: smooth;
}
/* defaults */
:is(*, *::before, *::after) {
	margin: 0;
	padding: 0;
	font-family: var(--font-family-2);
	line-height: 1.4;
	box-sizing: border-box;
	-webkit-font-smoothing: antialised;
	-moz-osx-font-smoothing: grayscale;
	font-smooth: always;
}
ul {
	list-style-type: none;
	padding: 0;
}
* :is(h1, h2, h3, h4, h5, h6, ul, p) {
	margin: 0;
	color: var(--light-dark);
}
* :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--font-family-1);
}
a {
	text-decoration: none;
}
a,
button {
	-webkit-transition: 250ms ease-in;
	-moz-transition: 250ms ease-in;
	-ms-transition: 250ms ease-in;
	-o-transition: 250ms ease-in;
	transition: 250ms ease-in;
	font-size: 14px;
	font-family: font-family-2;
}
button {
	all: unset;
}
/* page styles */
body {
	position: relative;
	background-color: var(--white);
}
header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	padding: 0.9rem 1.8rem;
	min-height: 60px;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
	background-color: var(--white);
}
@media all and (max-width: 600px) {
	header nav {
		padding: 0.5rem 0.8rem;
	}
}
header #logo img {
	width: 153px;
}
header nav ._nav-links {
	column-gap: 2rem;
}
._nav-links a {
	font-size: 0.9rem;
	position: relative;
	color: var(--dark);
	padding-bottom: 1px;
	white-space: nowrap;
}

._nav-links a::before {
	position: absolute;
	content: "";
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--primary-clr);
	transform: scaleX(0);
	transition: transform 280ms ease, background-color 300ms ease;
	transform-origin: bottom right;
	border-radius: 6px;
}
._nav-links a:hover::before {
	transform: scaleX(1);
	transform-origin: bottom left;
}
._nav-links .menu-toggler em {
	font-size: 1.5rem;
}
@media all and (max-width: 600px) {
	._banner-section {
		height: auto;
	}
}
/* burger menu */

.nav-theme .button-toggler {
	border: none;
	color: var(--white);
}
.nav-theme .button-toggler span {
	font-size: 2rem;
	line-height: 1;
	display: flex;
}
.offcanvas-header {
	justify-content: flex-end;
}
.offcanvas-body ul {
	display: flex;
	flex-direction: column;
	row-gap: 2rem;
	align-items: center;
}
.offcanvas-body ul li a {
	color: var(--dark);
	font-size: 1rem;
}
@media all and (min-width: 769px) {
	.offcanvas.show:not(.hiding),
	.offcanvas.showing {
		display: none;
	}
	.offcanvas-backdrop.show {
		display: none;
	}
}

@media all and (max-width: 600px) {
	html {
		font-size: 15px;
	}
	header {
		padding: 0;
	}
}

/* only main */

main {
	margin-top: 80px;
	margin-bottom: 4rem;
}
.wrapper {
	background-color: var(--whitesmoke);
}