/* FICLOGOS */
body {
	--dark: #242F38;
	--metal: #4D5761;
	--lite: #D4D9De;
	--white: #f1f5fb;
	--main: #1500ff;
	--seco: #5832c9;
	--high: #00ff8c;
	--high2: #ff146a;
	--tex: "DM Sans", sans-serif;
	--tit: "Syne", sans-serif;

	font-family: var(--tex);
	color: var(--metal);
}

/* GLOBAL */
html,body {
	margin: 0;
	min-height: 100%
}

a {
	color: var(--main);
	text-decoration: none
}

:is(header, section, main, nav, .wrap,.d-flex,.row, .col, .logo) {
	display: flex;
	align-items: center;
	justify-content: center; 
}

.wrap {
	max-width: 1400px;
	width: 100%;
}

main, .col {
	flex-direction: column; 
}

section {
	min-height: 80vh;
	width:100%
}

:is(.btn, .btn-pill, .btn-big) {
	background: var(--dark);
	color: var(--white);
	font-family: var(--tit);
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	padding: .5em 1.2em;
	border-radius: .4em;
	outline: 1px solid var(--dark);
	box-shadow: 0 2px 0 0 var(--metal) inset, 0 -1px 5px var(--metal) inset, 0 -5px 15px -2px #fff0;
	transition: all 0.12s
}

:is(.btn, .btn-pill, .btn-big):hover {
	box-shadow: 0 2px 0 0 var(--metal) inset, 0 -5px 10px -5px var(--lite) inset, 0 -5px 15px -2px var(--high);
	translate: 0 2px
}


.btn-pill {
	border-radius: 50em
}

/* HEADER */
header {
	background: linear-gradient(to bottom, #d4d9de 18%, #f1f5fb 89%, #f1f5fb 89%, #f4f6f7 100%);
	min-height: 90px;
	align-items: center;
	justify-content: center;
	position: sticky;
	top: 0
}

header .wrap {
	justify-content: space-between;
}

header .logo {
	align-items: center;
	perspective: 1000px;
	transition: all .2s
}

header .logo:hover {
	rotate: -2deg
}

header .btn-pill {
	font-size: 1.2em
}

header nav {
	font-family: var(--tit);
	gap: .1em;
	align-self: stretch;
}

header nav a {
	color: var(--dark);
	font-size: 1.5em;
	text-transform: uppercase;
	font-weight: 600;
	padding: .5em 1em;
	box-shadow: 0 0px 0 #000 inset;
	transition: all .2s
}

header nav a:hover {
	box-shadow: 0 -5px 0 var(--main) inset;
	color: var(--main)
}
/* HOME */
#hero .wrap{
	justify-content:space-between
}
/* PLANS */
#plans{
	background:var(--white)
}
#plans .wrap{
	justify-content:space-evenly;
	gap:1%
}
#plans .col{
		flex-basis:40%
}
#plans .plan{
	background:#fff;
	min-height:40vh;
	border-radius:.5em;
	box-shadow:0 10px 10px -10px;
	padding:1em;
	justify-content:flex-end;
	flex-basis:30%
}