/* CSS Document */

/***************** fonts ******************/
@font-face {
	font-family: "Maven Pro";
	src: url("../fonts/MavenPro-Regular.ttf");
	font-weight: 400;
}

@font-face {
	font-family: "Maven Pro";
	src: url("../fonts/MavenPro-SemiBold.ttf");
	font-weight: 600;
}

@font-face {
	font-family: "Maven Pro";
	src: url("../fonts/MavenPro-Bold.ttf");
	font-weight: 700;
}

/***************** html tag ******************/
:root {
	--brand-color-1: #009FDA;
	--brand-font-family: "Maven Pro", sans-serif;
	--brand-text-color: #575757;

	--border-radius-pill: 50rem;
	--border-radius-xl: 24px;

    --font-size-lg: 1.25rem;

	--white: #FFFFFF;
}

html {
	cursor: default;
	scroll-behavior: smooth;
}

body {
	color: var(--brand-text-color);
	font-family: var(--brand-font-family);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.33em;
}

a, 
a:hover {
	color: var(--brand-color-1);
}

footer a, 
footer a:hover {
	color: var(--white);
	text-decoration: none;
}

header {
	height: 2rem;
	margin-bottom: 6rem;
}

p {
	font-size: var(--font-size-lg);
	line-height: 1.33em;
}

.btn {
	--bs-border-radius: var(--border-radius-pill);
	font-weight: 600;
	padding: .6rem 1rem;
}

.btn:active, 
.btn:active:focus, 
.btn:focus, 
.btn:hover {
	box-shadow: var(--box-shadow-small);
	opacity: 1;
}

.btn-primary, 
.btn-primary:not(:disabled):not(.disabled):active, 
.btn-primary:not(:disabled):not(.disabled):focus, 
.btn-primary:not(:disabled):not(.disabled):hover {
	background-color: var(--brand-color-1);
	border-color: var(--brand-color-1);
	color: var(--white);
	text-transform: uppercase;
}

.brand-bg-primary {
	background-color: var(--brand-color-1);
}

.brand-text-primary {
	color: var(--brand-color-1);
}

.brand-logo {
	margin-bottom: 4rem;
	max-width: 250px;
}


@media (min-width: 768px) {
	:root {
		--font-size-lg: 1.5rem;
	}
}