/* Reset some default styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Basic styles */
body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #111111;
  background-color: #f7f9f1;
  line-height: 1.6;
}

/* Reusable */
.text-accent {
  color: #de463b;
}

.text-md {
  font-size: 22px;
}

.text-lg {
  font-size: 24px;
}

.btn-primary {
  background-color: #111111;
  border-color: #111111;
  font-weight: bold;
  color: #fff;
  transition: all 0.3s ease-in-out;
}

.btn-primary:hover {
  background-color: #de463b;
  border-color: #de463b;
  color: #fff;
}

.btn-secondary {
  background-color: #fff;
  border-color: #fff;
  font-weight: bold;
  color: #111111;
  transition: all 0.3s ease-in-out;
}

.btn-secondary:hover {
  background-color: #de463b;
  border-color: #de463b;
  color: #fff;
}

.border-color {
  border-color: #d2d8c0 !important;
}

.bg-green {
  background-color: #66b40b;
  background-color: #54ce74;
}

/* Styles */
.navbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.navbar-brand {
  color: #fff;
  font-size: 26;
  font-weight: bold;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
  color: #de463b;
}

.nav-link {
  color: #111111;
  font-weight: bold;
}

.navbar-toggler {
  filter: invert(1);
}

.navbar-collapse {
  background-color: white;
}

#hero {
  /* min-height: 80vh; */
  position: relative;
  background-image: url("./images/hero-img.jpg");
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
}

#hero::before {
  content: "";
  height: 100%;
  width: 100%;
  background-color: #2c2927;
  display: block;
  position: absolute;
  inset: 0;
  opacity: 0.75;
}

#hero h1 {
  font-size: 24px;
  font-weight: bold;
}

#qualities {
  position: relative;
  background-color: transparent;
  margin-top: -80px;
}

#qualities h2 {
  color: #de463b;
}

.qualities-item {
  border: 1px solid #d2d8c0;
  border-radius: 2rem;
}

.qualities-item.item-1 {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.qualities-item.item-2 {
  border-radius: 0px;
}

.qualities-item.item-3 {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

#qualities a {
  text-decoration: none;
  color: #111111;
  font-weight: bold;
  transition: all 0.3s ease-in-out;
}
#qualities a:hover {
  color: #de463b;
}

#contact-card {
  margin-top: -80px;
}

@media (min-width: 992px) {
  /* Basic styles */
  h2 {
    font-size: 52px;
  }

  /* Reusable */
  .text-md {
    font-size: 32px;
  }

  .text-lg {
    font-size: 48px;
  }

  /* Styles */
  .navbar a,
  .navbar .navbar-brand {
    color: #fff;
  }

  .navbar-collapse {
    background-color: transparent;
  }

  .nav-link {
    color: #fff;
    font-weight: bold;
  }

  #hero h1 {
    font-size: 48px;
    font-weight: bold;
  }

  #hero p {
    font-size: 24px;
  }

  .qualities-item.item-1 {
    border-bottom-left-radius: 2rem;
    border-top-left-radius: 2rem;
    border-top-right-radius: 0px;
  }

  .qualities-item.item-3 {
    border-top-right-radius: 2rem;
    border-bottom-right-radius: 2rem;
    border-bottom-left-radius: 0px;
  }

  .btn-primary,
  .btn-secondary {
    font-size: 20px;
  }
}