@import url("https://fonts.googleapis.com/css2?family=Lilita+One&family=Varela+Round&display=swap");

:root {
  --primary-color: #f14902;
  --secondary-color: #f4b324;
  --tertiary-color: #eedfa7;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Lilita One", cursive;
}

a,
p,
span,
label,
button,
.btn,
li {
  font-family: "Varela Round", sans-serif;
}

header .company {
  font-family: "Lilita One", cursive;
}

header button.btn {
  background-color: var(--primary-color);
  color: #fff;
  transition: all 0.2s ease-in;
  border-radius: 20px;
}

header button.btn:hover {
  color: var(--primary-color);
  background-color: #fff;
  border: 1px solid var(--primary-color);
}

.banner {
  height: calc(100vh - 100px);
}

.banner p {
  color: var(--primary-color);
}

.mission {
  background-color: var(--tertiary-color);
}

.vision-image {
  border: 1px solid var(--primary-color);
}

#blog-section {
  background-color: var(--tertiary-color);
}

.blog-card a {
  color: var(--primary-color);
}

.get-started h2 {
  color: var(--primary-color);
}

.get-started a {
  background-color: var(--primary-color);
  color: white;
  border-radius: 25px;
  font-size: 20px;
  transition: all 0.2s ease-in;
}

.get-started a:hover {
  color: var(--primary-color);
  background-color: white;
  border: 1px solid var(--primary-color);
}

/* Footer */
footer {
  background-color: var(--primary-color);
}

footer a,
footer a.nav-link {
  color: white;
}

footer a.nav-link:hover {
  color: black;
}

/* About */
.about .banner h1 {
  color: var(--primary-color);
}

/* Programs */
.programs .banner h1 {
  color: var(--primary-color);
}

.programs h2 {
  color: var(--primary-color);
}

.programs .contact-us {
  font-size: 2rem;
  text-decoration: none;
  color: white;
  background-color: var(--primary-color);
  transition: all 0.2s ease-in;
}

.programs .contact-us:hover {
  color: var(--primary-color);
  background-color: #fff;
  border: 1px solid var(--primary-color);
}

/* Contact Us */
.contact .form-submit {
  background-color: var(--primary-color);
  color: #fff;
  transition: all 0.2s ease-in;
  border-radius: 20px;
  width: 100px;
  font-size: large;
}

.contact .form-submit:hover {
  color: var(--primary-color);
  background-color: #fff;
  border: 1px solid var(--primary-color);
}

/* Blog */

.blog h1 {
  color: var(--primary-color);
}

.blog .blog-card {
  border: 1px solid var(--primary-color);
}

/* Form Submit */
.form-submit button {
  background-color: var(--primary-color);
  color: white;
  transition: all 0.2s ease-in;
}

.form-submit button:hover {
  color: var(--primary-color);
  background-color: white;
  border: 1px solid var(--primary-color);
}