:root {
	--sixty: #222629;
	--thirty: #4A70FD;
	--ten: #ECB73C;
	--sixty-rgb: 34, 38, 41;
	--red: #EA4335;
}

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

body {
	margin: 0;
	font-family: 'Inter';
	background-color: var(--sixty);
	color: white;
}

h1 {
	text-transform: uppercase;
	font-size: 2.986rem;
	font-weight: 700;
}

h2 {
	text-transform: uppercase;
	font-size: 2.488rem;
	font-weight: 600;
}

h3 {
	text-transform: uppercase;
	font-size: 2.074rem;
	font-weight: 600;
}

h4 {
	text-transform: uppercase;
	font-size: 1.728rem;
}

h5 {
	text-transform: uppercase;
	font-size: 1.44rem;
	font-weight: 400;
}

h6 {
	text-transform: uppercase;
	font-size: 1.2rem;
	font-weight: 400;
}

p {
	font-size: 1rem;
}

p.thick {
	font-weight: bold;
}

.small {
	font-size: 0.833rem;
}

.half-transparent {
	opacity: 0.5;
}

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

.blue-text {
	color: var(--thirty)
}

.yellow-text {
	color: var(--ten)
}

.red-text {
 color: var(--red);
}

.section-title {
	text-transform: uppercase;
	font-size: 1rem;
	opacity: 0.5;
	margin: 0;
}

.btn {
	border: 0;
	border-radius: 20px;
	color: white;
	background-color: var(--thirty);
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

hr {
	opacity: 0.5;
	height: 2px;
	border: none;
	color: white;
	background-color: white;
}

.container {
	max-width: 1485px;
	margin: 0 auto;
	height: 100%;
}

.top-bar {
	display: flex;
	height: 32px;
	font-size: 12px;
	align-items: center;
}

.top-bar-icon {
	width: 16px;
	height: 16px;
	fill: white;
}

.top-bar-element {
	display: flex;
	align-items: center;
}

.top-bar-info > .top-bar-element {
	gap: 8px;
}

.top-bar-social-media {
	gap: 16px;
}

.top-bar-element>a {
	color: white;
	text-decoration: none;
}

.top-bar-info {
	display: flex;
	justify-content: space-between;
	width: 915px;
	margin: 0 auto;
}

.site-header {
	position: absolute;
	z-index: 1111;
	color: white;
	height: 72px;
	width: 100%;
	top: 32px;
	left: 0;
	background-color: rgba(var(--sixty-rgb), 0.7);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.site-header > .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

nav {
	text-transform: uppercase;
	display: flex;
	gap: 32px;
}

.nav-item {
	position: relative;
	transition: 0.3s ease;
}

.nav-item > a {
	color: rgb(255, 255, 255);
	text-decoration: none;
	font-weight: bold;
}

.nav-item::after {
	content: '';
	height: 2px;
	width: 100%;
	background-color: var(--thirty);
	position: absolute;
	left: 0;
	bottom: -8px;
	opacity: 0;
	transition: 0.3s ease;
}

.nav-item:hover::after {
	opacity: 1;
}

.selected-nav-item::after {
	opacity: 1;
}

#main-header.fixed {
	position: fixed;
	top: 0;
}

/* FOOTER STYLES */

footer {
	height: 352px;
	background-color: rgb(255, 255, 255, 0.95);
	padding: 24px;
	color: var(--sixty);
	margin-top: 64px;
}

.footer-four-sections {
	display: flex;
	justify-content: space-between;
}

.footer-part {
	text-align: left;
	width: 360px;
}

.footer-part a {
	text-decoration: none;
	color: var(--thirty)
}

.footer-contact-us > h5 {
	margin: 0;
	margin-bottom: 16px;
}

.footer-contact-us {
	display: flex;
	flex-direction: column;
}

.footer-contact-us-item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.footer-contact-us-item-link {
	text-decoration: none;
	color: var(--thirty);
}

.footer-part > h5 {
	margin: 0;
}

.footer-logo-img {
	width: 260px;
}

.footer-hr {
	margin-bottom: 0;
	margin-top: 56px;
	color: var(--sixty);
	background-color: var(--sixty);
}

.last-line {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 48px;
}

.last-line > span > a {
	text-decoration: none;
}

.hamburger {
  display: none;
  font-size: 28px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}

.mobile {
	display: none;
}

.messages-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1050;
    max-width: 300px;
    font-family: Arial, sans-serif;
}

.alert {
    color: #fff;
		background-color: var(--ten);
		height: 40px;
		width: auto;
    padding: 10px 15px;
    border-radius: 10px;
    opacity: 1;
    transition: opacity 0.5s ease;
		z-index: 2222;
		position: absolute;
		left: 24px;
		top: 24px;
}

.alert.success {
    background-color: #28a745;
}

.alert.error {
    background-color: #dc3545;
}

.alert.warning {
    background-color: #ffc107;
    color: #333;
}

.alert.info {
    background-color: #17a2b8;
}

.alert.hide {
    opacity: 0;
}

@media (max-width: 1550px) {
  .container {
    width: 800px;
  }
}

@media (max-width: 800px) {
	.container {
		width: 600px;
	}
}

@media (max-width: 560px) {
	.container {
		width: 360px;
	}

	.mobile {
		display: block;
	}

	.hamburger {
		display: block;
	}

	#main-header {
		top: 0;
	}

  nav {
    display: none;
    flex-direction: column;
    background-color: rgba(var(--sixty-rgb), 0.9);
    position: absolute;
    top: 72px;
	right: 0;
    width: 400px;
    padding: 16px;
    gap: 16px;
  }

	.nav-item > a {
		user-select: none;
	}

  nav.show {
    display: flex;
  }

	.mobile-top-bar-info {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		gap: 16px;
		height: 128px;
	}

	.mobile-top-bar-info {
		font-size: 0.833rem;
	}

	.mobile-top-bar-info a {
		text-decoration: none;
		color: white;
	}

	.top-bar {
		display: none;
	}

	footer {
		height: 944px;
	}

	.footer-four-sections {
		display: grid;
		grid-template-columns: auto;
	}
}