/* --------------- Text --------------- */
.text-primary
{
  color: var(--primary-color);
  font-weight: 200;
}


/* Logo Colour: Blue: #222261 Black: #231F20*/

.bg-dark
{
  color: var(--off-white);
  /* background: #525252; */
  background: var(--mid-grey);

}

.bg-dark-alternate
{
  color: var(--off-white);
  background: var(--dark-grey)
}

.bg-light
{
  color: var(--secondary-color);
  background: var(--off-white);
}

.bg-light-extra
{
  color: var(--secondary-color);;
  background: var(--off-white);
}

.bg-light-alternate
{
  color: var(--secondary-color);
  background: var(--light-grey);
}

.section-header
{
  padding:40px 0px;
  font-size: 1.2rem;
  font-weight: 200;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* --------------- Buttons --------------- */

.btn
{
  display: inline-block;
  border: none;
  cursor: pointer;
  padding: 10px 30px;
  background: var(--primary-color);
  color:#fff;
  border-radius: 5px;
}

.btn-alternate
{
  background: var(--off-white);
  opacity: 0.4;
  color: var(--secondary-color);
  border-radius: 25px;
}

.btn:hover
{
  cursor: pointer;
  opacity: 0.8;
}

.btn-alternate:hover
{
  background: var(--off-white);
  opacity: 0.8;
  color: var(--secondary-color);
}


/* --------------- Flex Items --------------- */

.column-reverse
{
  flex-direction: column-reverse;  
}


.flex-items
{
  display: flex;
  text-align: center;
  justify-content: center;
  height: 100%;
}

.flex-items > div
{
  padding: 20px;
}

/* --------------- Flex Coloumns --------------- */

.flex-column .row
{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}


.flex-column .column
{
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.flex-column.flex-reverse .row
{
  flex-direction: row-reverse;
}

.flex-column .column .column-1,
.flex-column .column .column-2
{
  height: 100%;
  align-items: center;
  justify-content: center;
}

.flex-column img
{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flex-column .column-2 .about-us-info
{ 
  max-height: 300px;
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  
}

.flex-column .column-2
{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 30px;
}

.flex-column h2
{
  font-size: 2rem;
  font-weight: 100;
  margin-bottom: 30px;
}

.flex-column h4
{
  margin-bottom: 10px;
}

.flex-column p
{
  margin:20px 0px;
}