@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

:root {
  --sytco-color: #449ba9;
  --styco-color-p20: #367c87;
  --styco-color-m20: #69afba;
  --styco-color-m80: #daebee;
  --white: #fff;
}

* {
  font-family: 'Open Sans', sans-serif;
  /* font-family: "Poppins", sans-serif; */
  word-break: break-word;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
}

h1.main-head {
  font-size: 3rem;
}

header, .nav-link {
  background-color: var(--sytco-color);
  color: var(--white);
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  background-color: var(--white);
  color: var(--sytco-color);
}

.nav-link:focus, .nav-link:hover {
  color: var(--styco-color-m80);
}

a {
  color: #39828E;
  text-decoration: none;
}

.btn-styco {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--sytco-color);
  --bs-btn-border-color: var(--sytco-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--styco-color-p20);
  --bs-btn-hover-border-color: var(--styco-color-p20);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--styco-color-p20);
  --bs-btn-active-border-color: var(--styco-color-p20);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--styco-color-m20);
  --bs-btn-disabled-border-color: var(--styco-color-m20);
}

.bi-star-fill {
  font-size: 0.6rem;
  color: var(--sytco-color);
  vertical-align: top;
  margin-left: 0.07rem;
}