:root{
	/* Cores */

	--color-neutral-100: #000000;
	--color-neutral-200: #1B1B1B;
	--color-neutral-300: #363636;
	--color-neutral-400: #EEEEEE;
	--color-neutral-500: #7F7F7F;
	--color-neutral-600: #A7A7A7;
	--color-neutral-700: #DEDEDE;
	--color-neutral-800: #F7F7F7;
	--color-neutral-900: #FFFFFF;

	/* Cores */
	--color-primary: #018017; /* Fonte sem o tom, o inicio dela é no 500 então se o tom for mais claro será abaixo de 500. */
	--color-secondary: #fff200;
	--color-tertiary: #018017;

	--color-border-opacity01: #;

	/* Box Shadows */
	--box-shadow-sm: 0 30px 30px 0 #eee;
	--box-shadow-md: 0 30px 30px 0 #eee;
	--box-shadow-lg: 0 30px 30px 0 #eee;
	--box-shadow-form: 0 0 0 .25rem rgba(0, 157, 116, .25);

	/* Fonts Family */
	--font-family-01: "Open Sans", sans-serif;
	--font-family-02: "Roboto", sans-serif; /* No máximo dois estilos de fonte por site. */

    --swiper-navigation-color: var(--color-primary);
}

/* Variáveis Bootstrap */
:root, [data-bs-theme=light] {
	--bs-primary: var(--color-primary);
	--bs-secondary: var(--color-secondary);

	--bs-gray-100: var(--color-neutral-900);
	--bs-gray-200: var(--color-neutral-800);
	--bs-gray-300: var(--color-neutral-700);
	--bs-gray-400: var(--color-neutral-600);
	--bs-gray-500: var(--color-neutral-500);
	--bs-gray-600: var(--color-neutral-400);
	--bs-gray-700: var(--color-neutral-300);
	--bs-gray-800: var(--color-neutral-200);
	--bs-gray-900: var(--color-neutral-100);
}

body{
	font-size: 1.125rem;
	color: var(--color-neutral-300);
	font-family: var(--font-family-01);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: var(--color-neutral-800);
	letter-spacing: 0.015em;
}


/*********** Start Background ***********/

.bg-color-neutral-100{
	background-color: var(--color-neutral-100);
}
.bg-color-neutral-200{
	background-color: var(--color-neutral-200);
}
.bg-color-neutral-400{
	background-color: var(--color-neutral-400);
}
.bg-color-neutral-500{
	background-color: var(--color-neutral-500);
}
.bg-color-neutral-800{
	background-color: var(--color-neutral-800);
}
.bg-color-neutral-900{
	background-color: var(--color-neutral-900);
}

.bg-color-primary{
	background-color: var(--color-primary);
}
.bg-color-primary-750{
	background-color: var(--color-primary-750);
}
.bg-color-secondary{
	background-color: var(--color-secondary);
}
.bg-color-tertiary{
	background-color: var(--color-tertiary);
}

/*********** End Background ***********/

/*********** Start Colors ***********/

.text-color-neutral-100{
	color: var(--color-neutral-100);
}
.text-color-neutral-200{
	color: var(--color-neutral-200);
}
.text-color-neutral-300{
	color: var(--color-neutral-300);
}
.text-color-neutral-400{
	color: var(--color-neutral-400);
}
.text-color-neutral-500{
	color: var(--color-neutral-500);
}
.text-color-neutral-800{
	color: var(--color-neutral-800);
}
.text-color-neutral-900{
	color: var(--color-neutral-900);
}

.text-color-primary{
	color: var(--color-primary);
}
.text-color-primary-750{
	color: var(--color-primary-750);
}
.text-color-secondary{
	color: var(--color-secondary);
}
.text-color-tertiary{
	color: var(--color-tertiary);
}

/*********** End Colors ***********/

/*********** Start Text sizes ***********/

.heading-size-xs {
	font-size: 1.25rem; /* 20px */
}
.heading-size-sm {
	font-size: 1.5rem; /* 24px */
}
.heading-size-md {
	font-size: 1.75rem; /* 28px */
}
.heading-size-lg {
	font-size: 2.25rem; /* 36px */
}
.heading-size-xl {
	font-size: 2.375rem; /* 38px */
}
.heading-size-xxl {
	font-size: 3rem; /* 48px */
}


.text-size-xs {
	font-size: 0.625rem;  /* 10px */
}
.text-size-sm {
	font-size: 0.75rem; /* 12px */
}
.text-size-md {
	font-size: 0.875rem; /* 14px */
}
.text-size-lg {
	font-size: 1rem; /* 16px */
}
.text-size-xl {
	font-size: 1.125rem; /* 18px */
}
.text-size-xxl {
	font-size: 1.25rem; /* 20px */
}

/*********** End Text sizes ***********/

.at-btn{
	display: inline-block;
	font-size: 1rem;
	color: var(--color-neutral-900);
	padding: 12px 24px;
	border-radius: 30px;
	border: none;
	background-color: var(--color-primary);
}
.at-btn:hover{
	color: var(--color-neutral-900);
}

.at-btn-02{
	display: inline-block;
	font-size: 1rem;
	color: var(--color-primary);
	padding: 12px 24px;
	border-radius: 30px;
	border: none;
	background-color: var(--color-neutral-900);
}
.at-btn-02:hover{
	color: var(--color-primary);
}


@media screen and (max-width: 599px) {

	.at-btn{
		width: 100%;
		display: inline-flex;
		gap: 10px;
		justify-content: center;
	}

}