@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&family=Vina+Sans&display=swap');


:root {
  --bs-body-font-family: "Host Grotesk", sans-serif;
  --bs-body-color: #000000;


  --font-heading: "Vina Sans", sans-serif;

  --color-orange: #FF6B00;
  --color-green: #00953B;
  --color-blue: #0097CE;
  --color-blue-light: #e5eff3;
  --color-blue-dark: #006F98;
  --color-teal: #008080;
  --color-yellow: #FFD100;
  --color-pink: #FF40B4;
  --color-red: #ea0029;
  --color-red-dark: #C70000;
  --color-body-bg: #f6f6f6;
  
  --bs-table-bg: var(--color-body-bg);
  --bs-border-color: #d0d5dd;

  --transition-all: all 0.2s ease-in-out;
  --transition-all-slow: all 0.3s ease-in-out;

  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1),
            0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),
               0 2px 4px -2px rgb(0 0 0 / 0.1);

}

body,#tinymce {
  background: var(--color-body-bg);
  font-size: 18px;

  @media (min-width: 768px) {
    font-size: 20px;
  }

}

a { 
  color: black; 
  text-decoration: underline;
  transition: var(--transition-all);
}

p {
  margin-bottom:  1.5rem;
}

ul, ol {
  margin-bottom: 1.5rem;
}

h1, h2 {
  font-family: var(--font-heading);
}

h2 { 
  font-size: 50px;
  font-weight: 400;
  margin-bottom: 1rem;
}

@media (max-width: 767px) {
  .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    line-height: 1;  
  }
}

table td, table th {
  font-size: 100%;
}
.table-styled {

  border-collapse: collapse;
  margin-bottom: 1.5rem;

  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    font-size: 100%;
  }

  thead th {
    border-bottom: 2px solid #ddd;
    font-weight: 700;
    background-color: #dedede;
  }

}
.table-light {
  --bs-table-bg: var(--color-body-bg);
  th,td {
    text-align: left;
  }
}

.no-wrap {
  white-space: nowrap;
}

.button {
  display: inline-block;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  background-color: var(--color-red);
  color: white;
  border-radius: 4px;
  border: none;

  
  padding: 15px 15px;
  @media (min-width: 768px) {
    padding: 15px 30px;
  }

  .arrow {
    display: inline-block;
    margin-left: 6px;
    font-size: 15px;
    transition: var(--transition-all);
  }

  &:hover {
    background-color: var(--color-red-dark);
    color: white;
    .arrow {
      transform: translateX(5px);
    }
  }
}


.text-green { color: var(--color-green); }
.text-blue  { color: var(--color-blue-dark); }
.text-teal  { color: var(--color-teal); }
.text-orange  { color: var(--color-orange); }
.text-red   { color: var(--color-red); }   
 
.bg-green { background: var(--color-green); }
.bg-blue  { background: var(--color-blue-dark); }
.bg-teal  { background: var(--color-teal); }
.bg-orange  { background: var(--color-orange); }
.bg-red   { background: var(--color-red); }

.text-right { text-align: right; }
.text-center { text-align: center; }