/* 
======================
Font imports
======================
*/
@font-face {
  font-family: "roboto";
  src: url("../Assets/FONTS/Roboto-Regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "roboto";
  src: url("../Assets/FONTS/Roboto-Italic-webfont.woff") format("woff");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "roboto";
  src: url("../Assets/FONTS/Roboto-Bold-webfont.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}

/* 
================
Main settings 
================
*/
/*
=================
Grid staylimg
=================
*/
/* Clearfix on rows */
.row::after {
  content: " ";
  display: block;
  clear: both;
}
.row {
  margin-left: -0.75em;
  margin-right: -0.75em;
}
/* floating columns to the left */
[class*="column-"] {
  float: left;
  /* adds padding left and right and removes top margin overriding lobotomised owl selector */
  padding: 0 0.75em;
  margin-top: 0;
}
/* Setting column sizes */
.column-1 {
  width: 8.3333%;
}
.column-2 {
  width: 16.6667%;
}
.column-3 {
  width: 25%;
}
.column-4 {
  width: 33.3333%;
}
.column-5 {
  width: 41.6667%;
}
.column-6 {
  width: 50%;
}
.column-7 {
  width: 58.3333%;
}
.column-8 {
  width: 66.6667%;
}
.column-9 {
  width: 75%;
}
.column-10 {
  width: 83.3333%;
}
.column-11 {
  width: 91.6667%;
}
.column-12 {
  width: 100%;
}

/* clear floats */
.clearfix::before,
.clearfix::after {
  display: table;
  content: " ";
}
.clearfix::after {
  clear: both;
}
/* 
======================
Root styles and resets
======================
*/
:root {
  /* Box sizing fix */
  box-sizing: border-box;

  /* Fonts */
  --main-font: Roboto-Regular-webfont;

  /* Colors */
  --primary-color: #0196d0;
  /* --primary-color: #1d6fae; */

  --secondary-color: #384955;
  /* --secondary-color: #202f39; */
  /* --ternary-color: #9cadbc; */
  --ternary-color: #838d96;
  /*  Gradient colors

  #E99A27
  #00B2D7
  #00CCC8
  #42E1A9
  #A4F087
  #F9F871
  */
  --heading-text-color: #edfbff;
  /* Alt colors
  #f9fdff;
  #eee8a9;
  #E99A27;
  #ffeccc;
  */
  --link-base-color: #e6f4f1;
}

body {
  font-family: var(--main-font);
  font-size: 1.25em;
}

*,
::before,
::after {
  box-sizing: inherit;
}
/* 
============
Elements style
============
 */

#main_heading {
  color: var(--heading-text-color);
  margin: 0;
  letter-spacing: 0.1em;
}

section {
  box-shadow: 0px -1px 10px 0px rgba(63, 61, 61, 0.75);
  -webkit-box-shadow: 0px -1px 10px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px -1px 10px 0px rgba(49, 47, 47, 0.75);
  /* padding: 0.5rem; */
}
.main_nav {
  background-color: var(--primary-color);
  border-radius: 0.2rem 0.2rem 0 0;
  padding: 1em;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.main_nav a {
  text-decoration: none;
}

.main_nav a:hover {
  color: var(--secondary-color);
}

.logo_group > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.nav_items {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}

.nav_item {
  margin: 0.5em;
}

.nav_item a {
  color: var(--link-base-color);
}

.navbar-toggler {
  color: var(--link-base-color);
}

.container {
  /* max-width: 1180px; */
  margin: 0 auto;
}

footer {
  text-align: center;
  min-height: 3em;
  background-color: #384955;
  text-align: center;
  padding-top: 1em;
  font-style: italic;
  font-size: 0.75rem;
  color: var(--link-base-color);
}
.main_content {
  padding: 0 0.75em;
}
.hero {
  min-height: 70vh;
  background-image: url(/Assets/Images/greg-rosenke-vdxSOOZucTc-unsplash.jpg);
  background-attachment: fixed;
  background-size: cover;
  display: flex;
  justify-content: center;

  position: relative;
}

.hero_article {
  color: var(--heading-text-color);
  font-size: 0.9em;
  text-align: center;

  /* margin-top: 2em; */
}

.hero_article .text {
  padding: 1em;
  border-radius: 0.2em;
  background-color: #384955e4;
}

.cta {
  background-color: var(--primary-color);
  font-size: 1em;
  color: white;
  border-radius: 0.4em;
  padding: 0.4em 0.7em;
  border-style: none;
}

section {
  text-align: center;
}

h4 {
  font-size: 1.2em;
}
.services {
  color: var(--heading-text-color);
  background-color: var(--secondary-color);
  opacity: 0.95;
  min-height: 55vh;
  margin-top: 0.3em;
}
.services_article {
  padding: 0 0.5em 0.5em;
  margin: 1em 0;
}

.service_description {
  line-height: 1.2;
  font-size: 1em;
  text-align: left;
  color: var(--heading-text-color);
}

.service_icon {
  text-align: center;
  margin: 1.5em 0;
}

.wwa {
  color: var(--secondary-color);
}
.wwa_description {
  overflow: auto;
}
h2 {
  text-align: center;
  font-weight: bold;
}
h4 {
  margin-bottom: 1.25em;
}

.wwa {
  background-color: var(--primary-color);
  color: var(--heading-text-color);
  opacity: 0.95;
  margin-top: 0.3em;
  margin-bottom: 0.3em;
}

.wwa_description > p {
  /* background-color: chocolate; */
  text-align: justify;
  text-justify: newspaper;
  margin-bottom: 1.5rem;
}

.wwa_photo {
  overflow: hidden;
}

.wwa h4:first-of-type {
  margin-top: 0;
}

.contact_section {
  background-color: var(--secondary-color);
  opacity: 0.8;
  color: var(--heading-text-color);
  padding: 0.75rem;
  border-radius: 0.2em 0.2em 0 0;
}

.contact_container {
  /* display: flex;
  flex-wrap: wrap;
  justify-content: space-around; */
  line-height: 1.75;
}

.form_group input,
.form_group textarea {
  width: 100%;
}

.contact_btn {
  background-color: var(--primary-color);
  color: var(--heading-text-color);
}

.wwa img {
  background-color: var(--secondary-color);
  opacity: 0.7;
  border-radius: 0.2em;
}

.logo_group.navbar-brand {
  margin-right: 0;
  margin-bottom: 0.75em;
}