@import url(css/pages/default/at-header.css);
@import url(css/pages/default/at-footer.css);

@import url(css/pages/default/at-breadcrumb.css);
@import url(css/pages/default/at-popup-form.css);

@import url(css/pages/inc-at-cta.css);

:root{
	/* Cores Neutras */
	--color-neutral-100: #000000;
	--color-neutral-200: #131311;
	--color-neutral-300: #21211F;
	--color-neutral-400: #434343;
	--color-neutral-500: #7F7F7F;
	--color-neutral-600: #CCCCCC;
	--color-neutral-700: #E0E0E0;
	--color-neutral-800: #F1F1F1;
	--color-neutral-900: #FFFFFF;

	/* Cores Principais */
	--color-primary: #003e8b;
	--color-secondary: #f4a900;
	--color-tertiary: #008230;
	--color-details-green: #0C6934;

	/* Fonts Family */
	--font-family-01: 'Space Grotesk', sans-serif;
    --font-family-02: 'Rubik', sans-serif;

    /* Font-sizes */
	--heading-size-xs: 1.375rem; /* 22px */
	--heading-size-sm: 1.5rem; /* 24px */
	--heading-size-md: 1.75rem; /* 28px */
	--heading-size-lg: 2rem; /* 32px */
	--heading-size-xl: 2.25rem; /* 36px */
	--heading-size-xxl: 3rem; /* 48px */

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

/* 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{
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: var(--font-family-02);
	color: var(--color-neutral-100);
}

p{
    font-size: var(--text-size-xl);
	color: var(--color-neutral-400);
    line-height: 1.2;
	font-weight: 300;
	letter-spacing: 0.0625rem;
}

body a:hover{
	color: inherit;
}

.container{
    max-width: 1330px;
}

/*********** 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-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-600{
	color: var(--color-neutral-600);
}
.text-color-neutral-700{
	color: var(--color-neutral-700);
}
.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-secondary{
	color: var(--color-secondary);
}
.text-color-tertiary{
	color: var(--color-tertiary);
}

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

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

.heading-size-xs {
	font-size: var(--heading-size-xs); /* 22px */
}
.heading-size-sm {
	font-size: var(--heading-size-sm); /* 24px */
}
.heading-size-md {
	font-size: var(--heading-size-md); /* 28px */
}
.heading-size-lg {
	font-size: var(--heading-size-lg); /* 32px */
}
.heading-size-xl {
	font-size: var(--heading-size-xl); /* 36px */
}
.heading-size-xxl {
	font-size: var(--heading-size-xxl); /* 48px */
}


.text-size-xs {
	font-size: var(--text-size-xs);  /* 10px */
}
.text-size-sm {
	font-size: var(--text-size-sm); /* 12px */
}
.text-size-md {
	font-size: var(--text-size-md); /* 14px */
}
.text-size-lg {
	font-size: var(--text-size-lg); /* 16px */
}
.text-size-xl {
	font-size: var(--text-size-xl); /* 18px */
}
.text-size-xxl {
	font-size: var(--text-size-xxl); /* 20px */
}

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


/* Btns */
.at-btn-1{
	color: var(--color-neutral-900);
	padding: 16px 32px;
	background-color: var(--color-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 300;
	gap: 10px;
	font-size: var(--text-size-xl);
	border-radius: 50px;
	letter-spacing: 1px;
	border: none;
	transition: .3s ease-out;
}
.at-btn-1:hover {
	color: var(--color-neutral-900);
}
.at-btn-1 img{
	max-height: 17px;
	transition: .3s ease-out;
}
.at-btn-1:hover img {
    transform: translateX(5px);
}
.at-btn-2{
	padding: 16px 32px;
	border: 1px solid var(--color-neutral-900);
	color: var(--color-neutral-900);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 300;
	gap: 10px;
	font-size: var(--text-size-xl);
	border-radius: 50px;
	letter-spacing: 1px;
}
.at-btn-2:hover{
	color: var(--color-neutral-900);
}

.at-btn-play{
	display: flex;
	align-items: center;
	padding-top: 40px;
	margin-bottom: -80px;
	gap: 20px;
	color: var(--color-neutral-900);
	font-size: var(--text-size-xxl);
	font-weight: 300;
	letter-spacing: 1px;
}
.at-btn-play:hover{
	color: var(--color-neutral-900);
}
/* Btns */

/* Title */
.at-title-header-01{
    text-align: center;
	max-width: 700px;
	margin: auto;
}
.at-title-header-01 p{
    max-width: 840px;
    margin: auto;
    color: var(--color-neutral-400);
}
.at-title-01{
	font-family: var(--font-family-01);
	font-size: var(--heading-size-xl);
	color: var(--color-neutral-200);
	font-weight: 700;
	margin-bottom: 20px;
}
/* Title */

/* Estilos para dispositivos com largura entre 993px e 1200px */
/* Estilos específicos para desktops e dispositivos com telas maiores */
@media screen and (min-width: 993px) and (max-width: 1200px) {

}

/* Estilos para dispositivos com largura entre 769px e 992px */
/* Estilos específicos para tablets e dispositivos com telas maiores */
@media screen and (max-width: 999px) {

	html,body{
		overflow-x: hidden;
		width: 100vw;
	}

	.container{
		padding: 0 20px;
	}
	.at-ellipse_detalhe01{
		width: 150px;
		height: 150px;
	}
	.at-ellipse_detalhe02,
	.at-ellipse_detalhe03{
		width: 105px;
		height: 105px;
	}
}

/* Estilos para dispositivos com largura entre 577px e 768px */
/* Estilos específicos para tablets e dispositivos com telas um pouco maiores */
@media screen and (min-width: 577px) and (max-width: 768px) {


}

/* Estilos para dispositivos com até 576px de largura */
 /* Estilos específicos para dispositivos móveis */
 @media screen and (max-width: 576px) {

    
}