@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}

body{
	padding: 0;
	margin: 0;
	background:#f4f4f4;
}

h1, h2 {
  font-family: 'El Messiri', sans-serif;
	font-weight: bold;
}

.h1 {
  font-family: 'El Messiri', sans-serif;
	font-weight: bold;
}

p, h5 {
  font-family: 'Montserrat', sans-serif;
}



h4 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
}

.jumbotron {
  background-image: url("../images/1920x1080_elbameet_banner.jpg");
  background-size: cover;
  color: white;
  padding-top: 25vh;
  padding-bottom: 25vh;
}

a {
	color: white;
  text-decoration: underline;
}

a:hover {
  color: black;
	text-decoration: none;
}

.my-5 {
	margin-top: ($spacer * 3) !important;
	margin-bottom: ($spacer * 3) !important;
}

.mt-5 {
	margin-top: ($spacer * 3) !important;
}

.mt-4 {
  margin-top: $spacer * 1.5 !important;
}

.py-4 {
	padding-top: $spacer * 1.5 !important;
	padding-bottom: $spacer * 1.5 !important;
}

.my-4 {
	padding-top: $spacer * 1.5 !important;
	padding-bottom: $spacer * 1.5 !important;
}