@font-face {
    font-family: 'MPLUSRounded1c-Regular';
    src: url('../fonts/MPLUSRounded1c-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}

@font-face {
    font-family: 'MPLUSRounded1c-Bold';
    src: url('../fonts/MPLUSRounded1c-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}

@font-face {
    font-family: 'MPLUSRounded1c-Black';
    src: url('../fonts/MPLUSRounded1c-Black.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}

html, body {
    font-family: 'MPLUSRounded1c-Regular', sans-serif;	
	/* max-width: 1920px; */
	margin: 0 auto;
	font-size: 1.125rem;
}

strong, b, .strong {
    font-family: 'MPLUSRounded1c-Bold';	
}

.black {
    font-family: 'MPLUSRounded1c-Black';	
}

.bg-primary {
	background: #f8c0d8!important;
}

.text-primary {
	color: #f8c0d8!important;
}

.bg-secondary {
	background: #401a8f!important;
}

.text-secondary {
	color: #401a8f!important;
}

	h1 {
		font-size: 3rem;
	}

@media (min-width:1200px) {
	h1 {
		font-size: 4rem;
	}
		h2 {
		font-size: 2.125rem;
	}
		h4 {
		font-size: 1.75rem;
	}
	
	.box {
		font-size: 1.25rem;
	}
}

@media (min-width:1400px) {
	h1 {
		font-size: 6rem;
	}
		h2 {
		font-size: 2.125rem;
	}
		h4 {
		font-size: 1.75rem;
	}
	
	.box {
		font-size: 1.25rem;
	}
}



#hero {
	margin-bottom: -5.6rem;
	position: relative;
	z-index: 2;
}

.hero {
  display: grid; 
  grid-template-columns: 50% 660px 1fr; 
  grid-template-rows: 1fr 1fr 1fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    "pic text ."
    "pic text ."
    "pic text ."; 
}
.pic { grid-area: pic; }
.text { grid-area: text; }

@media (max-width:1199px) {

}

.grid {
  display: grid; 
  grid-template-columns: 1fr 870px 1fr; 
  grid-template-rows: 1fr 1fr 1fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    ". gtext rpic"
    ". gtext rpic"
    ". gtext rpic"; 
}
.rpic { grid-area: rpic; 	margin-bottom: -6rem;}
.gtext { grid-area: gtext; }

@media (max-width:1199px) {

}

#icons {

	position: relative;
	z-index: 2;	
}

.how {
  display: grid; 
  grid-template-columns: 33% 870px 1fr; 
  grid-template-rows: 1fr 1fr 1fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    "hpic htext ."
    "hpic htext ."
    "hpic htext ."; 
}
.hpic { grid-area: hpic; }
.htext { grid-area: htext; }

.hpic img {
	margin-top: -5rem;
}

.rotated {
	transform: rotate(-2.5deg);
}

.herohl {
	margin-left: -12rem;
}

@media (max-width:1399px) {
	
.hero {
  display: grid; 
  grid-template-columns: 50% 600px 1fr; 
  grid-template-rows: 1fr 1fr 1fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    "pic text ."
    "pic text ."
    "pic text ."; 
}
.pic { grid-area: pic; align-self: end}
.text { grid-area: text; }

.how {
  display: grid; 
  grid-template-columns: 25% 670px auto; 
  grid-template-rows: auto; 
  gap: 0px 0px; 
  grid-template-areas: 
    "hpic htext ."; 
}
.hpic { grid-area: hpic; }
.htext { grid-area: htext; }	
.hpic img {
	margin-top: -3rem;
}
.herohl {
	margin-left: 0;
}
}

@media (max-width:1199px) {
	#hero {
	margin-bottom: -4.6rem;
	position: relative;
	z-index: 2;
}
.hero {
  display: grid; 
  grid-template-columns: auto 1fr auto; 
  grid-template-rows: auto auto; 
  gap: 0px 0px; 
  grid-template-areas: 
    ". text ."
    ". pic ."; 
}
.pic { grid-area: pic; }
.text { grid-area: text; }	
.grid {
  display: grid; 
  grid-template-columns: auto 1fr auto; 
  grid-template-rows: auto auto; 
  gap: 0px 0px; 
  grid-template-areas: 
    ". gtext ."
    ". rpic ."; 
}
.rpic { grid-area: rpic;	margin-bottom: -1rem; }
.gtext { grid-area: gtext; }	
.how {
  display: grid; 
  grid-template-columns: 0 1fr 0; 
  grid-template-rows: auto auto; 
  gap: 0px 0px; 
  grid-template-areas: 
    ". htext ."
    "hpic . ."; 
}
.hpic { grid-area: hpic; }
.htext { grid-area: htext; }	
.hpic img {
	margin-top: -3rem;
}

#icons {
	margin-bottom: -1rem;
	position: relative;
	z-index: 2;	
}

.rotated {
	transform: rotate(-1.5deg);
}
}

.swiper-button-next, .swiper-button-prev {
	color: #f8c0d8;
}