/* Variables */

:root{
	
	--title-color: #101828;
	--text-color: #4A5565;
	--accent-color: #FB2C36;
	--accent-gradient: linear-gradient(135deg, #FB2C36 0%, #E7000B 100%);
	
}

/* Fonts */

@font-face{
	
	src: url("assets/fonts/BM_HANNA_TTF_Regular.ttf");
	font-family: 'BM Hanna';
	
}

/* Default Behavior */

body, html{margin: 0; font-family: "Poppins", sans-serif; color: var(--text-color); background-color: #F4F8FD; scroll-behavior: smooth;}

h1, h3, h5{color: var(--title-color);}
h1, h3{font-family: 'BM Hanna', sans-serif; font-size: 2.25rem;}

a{text-decoration: none; color: inherit;}

img,
svg{max-width: 100%; vertical-align: bottom;}

*{box-sizing: border-box; margin: 0; border: 0; background-color: initial;}

/* Helper Classes */

.content{width: 1200px; max-width: 90vw; margin: auto;}

.row,
.grid,
.column{display: flex; gap: inherit;}
.column{flex-direction: column;}
.grid{display: grid;}

.btn{padding: 12px 24px; border-radius: 16px; background: var(--accent-gradient); color: #fff;}

/* Top Bar */

section#topBar{justify-content: center; padding: 8px 0; background-color: var(--accent-color); color: #fff; font-size: 0.875rem; gap: 1em; flex-wrap: wrap;}
section#topBar .row{gap: 0.5em;}

/* Header */

header#mainHeader .content{grid-template-columns: max-content 1fr max-content; align-items: center; justify-items: center; gap: 55px; padding: 10px 0;}
header#mainHeader nav{align-items: center;}
header#mainHeader a.login{gap: 12px; align-items: center;}

/* Footer */

footer#mainFooter{grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 16px; padding: 30px 18px; background-color: #C9C9C9;}
footer#mainFooter .column{align-items: start;}
footer#mainFooter > .column:not(.slogan){padding-top: 40px;}
footer#mainFooter .column h5{font-size: 1.125rem;}
footer#mainFooter .column .column{gap: 10px;}
footer#mainFooter .slogan img:last-child{margin-top: auto;}
footer#mainFooter section#hours{color: #fff; gap: 8px; background-color: #1E2939; border-radius: 10px; padding: 16px; width: 100%;}
footer#mainFooter section#hours h5{font-size: 1rem; color: #fff; font-weight: 400;}

section#bottomBar{padding: 25px 16px; border-top: 1px solid #1E2939; background-color: #C9C9C9; align-items: center; justify-content: space-between; gap: 20px;}

/* Home */

	/* Banner */

section#banner img{width: 100%; object-fit: cover;}

	/* About */

section#about{padding: 80px 0;}
section#about .content{align-items: center; gap: 70px;}
section#about header{width: 60%; align-items: center; text-align: center; gap: 22px;}
section#about .strengths{grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center; gap: 13px 40px;}
section#about .strengths article{align-items: center;}
section#about .strengths article i{aspect-ratio: 1; width: 64px; border-radius: 16px; background: var(--accent-gradient); place-content: center;}
section#about .strengths article h5{font-size: 1.25rem; font-weight: 600;}

		/* Mission */

section#about section#mission{gap: 30px 95px;}
section#about section#mission header{align-items: start; text-align: left;}
section#about section#mission header .row{align-items: center;}
section#about section#mission img{width: 600px; aspect-ratio: 600/400; max-width: 50%; object-fit: cover; border-radius: 16px; box-shadow: 0px 25px 50px -12px #00000040;}

/* Partners */

section#partners{padding: 80px 0 48px;}
section#partners .content{text-align: center; gap: 70px;}
section#partners header{gap: 20px;}
section#partners .partnerLogos{flex-wrap: wrap; gap: 32px; justify-content: center;}
section#partners .partnerLogos div{width: calc((100% - 32px*3)/4); place-items: center; background-color: #fff; aspect-ratio: 288/168;}

/* Numbers */

section#numbers{margin: 0 16px; background-image: var(--accent-gradient); padding: 46px 48px; color: #fff; grid-template-columns: repeat(2, 1fr); gap: 20px 100px; border-radius: 24px;}
section#numbers :is(h3, h5){color: #fff;}
section#numbers .numbers{grid-template-columns: repeat(2, 1fr); text-align: center; gap: 24px;}
section#numbers .numbers .column{gap: 8px;}
section#numbers .numbers .column h5{font-size: 2.25rem; font-weight: 700; line-height: 2.5rem;}

/* Diferentials */

section#diferentials{padding: 48px 0 80px;}
section#diferentials .content{grid-template-columns: repeat(3, 1fr); gap: 20px 55px;}
section#diferentials article{align-items: center; text-align: center;}
section#diferentials article i{width: 64px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 16px;}
section#diferentials article:first-child i{background-color: #DCFCE7;}
section#diferentials article:nth-child(2) i{background-color: #DBEAFE;}
section#diferentials article:last-child i{background-color: #F3E8FF;}
section#diferentials article h5{font-size: 1.25rem; font-weight: 400;}

/* Termos de uso */

section#terms{padding: 100px 0;}
section#terms .content{width: 765px; align-items: center; gap: 42px;}

/* Responsive */

@media(min-width: 901px){
	
	.mobile{display: none;}
	
}

@media(max-width: 900px){
	
	.desktop{display: none;}
	
	h1, h3{font-size: 2.125rem;}
	
	body{overflow-x: hidden;}
	
	section#topBar{gap: .5em .7em;}
	
	header#mainHeader{position: relative;}
	header#mainHeader .content{display: flex; justify-content: space-between; gap: 12px;}
	header#mainHeader nav{position: absolute; top: calc(100% + 5vw); left: 5vw; width: 90vw; flex-direction: column; background-color: #fff; padding: 48px; align-items: end; border-radius: 24px; gap: 48px; transform: translateX(100vw); transition: all .3s ease;}
	header#mainHeader:has(label#menuTrigger input:checked) nav{transform: translateX(0);}
	header#mainHeader nav a.btn{place-self: center;}
	
	footer#mainFooter{grid-template-columns: 1fr; padding: 20px 45px;}
	footer#mainFooter .slogan{justify-self: center;}
	footer#mainFooter .contact img.mobile{align-self: center; margin: 28px 0;}
	
	section#bottomBar{flex-direction: column; font-size: 0.875rem; align-items: start;}
	
	section#about header{width: 100%;}
	
	section#about .strengths{grid-template-columns: 1fr; gap: 48px;}
	section#about .strengths article{gap: 12px;}
	
	section#about section#mission{flex-direction: column; gap: 24px;}
	section#about section#mission header{gap: 18px;}
	section#about section#mission img{max-width: 100%;}
	
	section#partners .partnerLogos{gap: 6px;}
	section#partners .partnerLogos div{width: calc((100% - 6px)/2);}
	
	section#numbers{padding: 24px 10px; grid-template-columns: 1fr; gap: 48px;}
	section#numbers header{gap: 20px;}
	
	section#diferentials .content{grid-template-columns: 1fr; gap: 55px;}
	section#diferentials article{gap: 20px;}
	
	section#terms{padding: 48px 0;}
	section#terms .content{gap: 12px;}
	
}