/* Light definition - 300 */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../assets/fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Medium definition - 500 */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../assets/fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Bold definition - 700 */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../assets/fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

#wrapper {
	color: #51284F;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 16px;
	font-weight: 300;
	overflow-x: hidden;
}

#wrapper .container {
	max-width: 1480px;
}

h1, .sec_title {
	font-size: 3rem;
	font-weight: 500;
	margin-bottom: 0.5em;
}

.main_desc {
	font-size: 1.25rem;
}

a, .ease, img {
	transition: .4s all;
	-moz-transition: .4s all;
	-webkit-transition: .4s all;
	-o-transition: .4s all;
}

a:hover {
	text-decoration: none;
}

.center {
	text-align: center;
}

.full_bt {
	display: inline-block;
	padding: 0.8em 3em 1em 3em;
	border-radius: 99px;
	color: #fff;
	font-size: 1rem;
	font-weight: 500;
	margin: 3em 0;
	margin-right: 1em;
}

.full_bt:hover {
	background: linear-gradient(90deg,rgba(235, 62, 200, 1) 0%, rgba(81, 40, 79, 1) 100%);
	color: #fff;
}

.full_bt img, a img, button img {
	margin-left: 1em;
}

.pink_color {
	background: #EB3EC8;
}

.brown_color {
	background: #51284F;
}

.gray_color {
	background: #F2F5F9;
	color: #51284F;
}

.pink_text {
	color: #EB3EC8;
}

.gray_bg {
	background: #F2F5F9;
}

#content .lead {
	color: #EB3EC8;
	text-transform: uppercase;
	font-size: 1.25rem;
	font-weight: 500;
}

/* Layouts */

section {
	padding: 5em 0;
}

.grid_3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 2em;
    grid-row-gap: 2em;
}

.flex {
	display: flex;
	flex-wrap: wrap;
}

@media (max-width: 966px) {
	section {
    	padding: 2em 0;
	}

	.flex {
		display: block;
	}

	.full_bt {
        display: block;
		margin: 1.5em 0;
	}

	h1, .sec_title {
    	font-size: 2rem;
	}

	#content .lead {
    	font-size: 1rem;
	}

	.grid_3 {
		grid-template-columns: 1fr;
		grid-row-gap: 1em;
	}
}