@import url("https://fonts.cdnfonts.com/css/gilroy-bold");

:root {
  --main: #297b29;
  --sub: #cddac7;
  --black: #383838;
}

body {
  font-family: "Gilroy-Bold", sans-serif;
  font-family: "Gilroy-Heavy", sans-serif;
  font-family: "Gilroy-Light", sans-serif;
  font-family: "Gilroy-Medium", sans-serif;
  font-family: "Gilroy-Regular", sans-serif;
}

h1 {
  color: var(--main);
  font-size: 48px;
  font-family: "Gilroy-Bold", sans-serif;

}

h2{
  font-size: 32px;
  font-family: "Gilroy-Bold", sans-serif;
}

h3{
  font-size: 21px;
  font-family: "Gilroy-Regular", sans-serif;
}

p{
  text-align: justify;
}

.bg-main {
  background-color: var(--main) !important;
}

.bg-sub {
  background-color: var(--sub) !important;
}

.border-main {
  border-color: var(--main) !important;
}

.text-main {
  color: var(--main) !important;
}

nav.navbar {
  margin-bottom: 20px;
  display: flex;
  height: 80px;
  margin: 24px 24px;
  justify-content: center;
  align-items: center;
  text-decoration-color: var(--main);
}

.navbar-toggler:focus {
  box-shadow: none !important;
}

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-light .navbar-toggler,
.navbar-light .navbar-nav .nav-link {
  color: var(--main) !important;
}

.navbar a {
  font-size: 24px;
  color: var(--main);
}

.navbar a:hover {
  color: var(--sub);
}
.navbar img {
  height: 69px;
}

.navbar-collapse {
  align-items: right;
}

.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.container-y {
  padding-top: 7rem;
  padding-bottom: 7rem;
}

.container-t {
  padding-top: 7rem;
}

.container-b {
  padding-bottom: 3rem;
}

.container-y p {
  font-size: 21px;
  font-weight: 300px;
  text-align: justify;
}

.bd-heading {
  padding: 2.5rem 7rem;
}


.link {
  background-color: white;
  border-color: white;
  color: var(--main);
  text-decoration: none;
}

.link:hover {
  color: var(--sub);
}

@media (max-width: 768px) {
  .container-y {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  .container-t {
    padding-top: 5rem;
  }
  .container-b {
    padding-bottom: 5rem;
  }
}

.card-title, .card-text {
  color: var(--black);
}