@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;700&family=Poppins:ital,wght@0,100;0,200;0,300;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
	--primary-color: #00adb5;
	--second-color: #007c82;
	--black-color: #222831;
	--black-color-medium: #0c0c0c;
	--semi-black: #393e46;
	--white-color: #eeeeee;
}

* {
	font-family: 'Poppins', sans-serif;
}

body {
	background-color: var(--black-color);
}

/* CONTAINER PRINCIPAL */
.container {
	width: 100%;
	max-width: 1246px; /* 15px de cada lado x2 = 30px */
	margin: 0 auto;
	padding: 0px 15px;
}

/* BOTÃO PRINCIPAL */
.btn-primary {
	font-weight: 700;

	background-color: var(--primary-color);
	color: var(--black-color);

	border-radius: 2rem;
	padding: 1rem 2rem;

	font-size: 1.6rem;
	text-transform: uppercase;

	transition: all 0.2s;
}

.btn-primary:hover {
	background-color: var(--white-color);
	transform: scale(1.04);
}

i.btn-toggle {
	background-repeat: no-repeat;
	background-size: cover;
	width: 6.4rem;
	height: 6.4rem;
	cursor: pointer;
	display: none;
}

/* MENU-ITEM */

.menu-item {
	color: var(--primary-color);
	font-weight: 700;
	font-size: 1.6rem;

	text-transform: uppercase;

	transition: all 0.2s;
}

.menu-item:hover {
	color: var(--white-color);
	transform: scale(2.04);
}

/* * TEXT PATTENS */
h2 {
	font-family: 'Inter';
	font-weight: 800;
	font-size: 6.4rem;
	line-height: 7.7rem;
	color: var(--white-color);
	/* margin-top: 2rem; */
	text-transform: uppercase;
}

h2 span {
	color: var(--primary-color);
}

.tag {
	border-radius: 5rem;
	padding: 0.6rem 1.4rem;
	background-color: var(--white-color);
	font-size: 1.4rem;
	font-weight: 400;
}

/* * FORM PATTERNS */
input,
textarea {
	background-color: var(--semi-black);
	border: 1px solid var(--semi-black);
	border-radius: 0.4rem;
	width: 100%;
	padding: 2rem;
	resize: none;
	color: var(--white-color);
	outline: none;
	transition: all 0.4s;
}

input:hover,
textarea:hover {
	border: 1px solid var(--primary-color);
}

input:focus,
textarea:focus {
	border: 1px solid var(--primary-color);
}