:root {
  --primary-color: #ffc70d;
  --primary-dark-color: #a37f08;
  --secondary-color: #3a3a3a;
  --links-color: #ffffff;
  --links-color-hover: #d8d8d8;
  --default-icon-size: 3rem;
  --header-size: 72px;
  --hero-height: 400px;
  /* Bootstrap Overwrites */
  --bs-primary: #ffc70d;
  --bs-secondary: #3a3535;
  --bs-primary-rgb: 255, 199, 13;
  --bs-secondary-rgb: 58, 53, 53;
  --bs-navbar-active-color: var(--primary-color);
  --navbar-toggler-icon-bg: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23fff'%3E%3Cpath d='M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z'/%3E%3C/svg%3E");
}

/****** FONT FACES ********/
@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-Bold.woff2') format('woff2'),
    url('../fonts/Raleway-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-BlackItalic.woff2') format('woff2'),
    url('../fonts/Raleway-BlackItalic.woff') format('woff');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-BoldItalic.woff2') format('woff2'),
    url('../fonts/Raleway-BoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-ExtraBold.woff2') format('woff2'),
    url('../fonts/Raleway-ExtraBold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-ExtraBoldItalic.woff2') format('woff2'),
    url('../fonts/Raleway-ExtraBoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-ExtraLight.woff2') format('woff2'),
    url('../fonts/Raleway-ExtraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-ExtraLightItalic.woff2') format('woff2'),
    url('../fonts/Raleway-ExtraLightItalic.woff') format('woff');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-Italic.woff2') format('woff2'),
    url('../fonts/Raleway-Italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-Light.woff2') format('woff2'),
    url('../fonts/Raleway-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-LightItalic.woff2') format('woff2'),
    url('../fonts/Raleway-LightItalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-Medium.woff2') format('woff2'),
    url('../fonts/Raleway-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-MediumItalic.woff2') format('woff2'),
    url('../fonts/Raleway-MediumItalic.woff') format('woff');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-Regular.woff2') format('woff2'),
    url('../fonts/Raleway-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-SemiBold.woff2') format('woff2'),
    url('../fonts/Raleway-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-SemiBoldItalic.woff2') format('woff2'),
    url('../fonts/Raleway-SemiBoldItalic.woff') format('woff');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-ThinItalic.woff2') format('woff2'),
    url('../fonts/Raleway-ThinItalic.woff') format('woff');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-Black.woff2') format('woff2'),
    url('../fonts/Raleway-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-Thin.woff2') format('woff2'),
    url('../fonts/Raleway-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-Bold.woff2') format('woff2'),
    url('../fonts/Lato-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-Italic.woff2') format('woff2'),
    url('../fonts/Lato-Italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-BoldItalic.woff2') format('woff2'),
    url('../fonts/Lato-BoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-Regular.woff2') format('woff2'),
    url('../fonts/Lato-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato Hairline';
  src: url('../fonts/Lato-HairlineItalic.woff2') format('woff2'),
    url('../fonts/Lato-HairlineItalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-Black.woff2') format('woff2'),
    url('../fonts/Lato-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato Hairline';
  src: url('../fonts/Lato-Hairline.woff2') format('woff2'),
    url('../fonts/Lato-Hairline.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-Light.woff2') format('woff2'),
    url('../fonts/Lato-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-LightItalic.woff2') format('woff2'),
    url('../fonts/Lato-LightItalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-BlackItalic.woff2') format('woff2'),
    url('../fonts/Lato-BlackItalic.woff') format('woff');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}


/****** FONT FACES ********/

/****** COMMON ********/

body * {
  font-family: 'Lato' !important;

}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Raleway' !important;
}

.font-lato {
  font-family: 'Lato' !important;
}

.font-raleway {
  font-family: 'Raleway' !important;
}

/****** COMMON ********/




.text-primary-dark {
  color: var(--primary-dark-color);
}

input.form-control:focus {
  outline-color: var(--primary-color);
}

.default-icon svg {
  width: var(--default-icon-size);
  height: var(--default-icon-size);
}

.text-justified {
  text-align: justify;
}


/****** HEADER ********/
header.main-header,
header nav {
  height: var(--header-size);
}

.navbar-toggler-icon {
  background-image: var(--navbar-toggler-icon-bg) !important;
}

.nav-link {
  color: #fff;
  font-weight: bold;
}

.nav-link:hover {
  color: var(--primary-color);
}

.nav-link.active {
  color: var(--primary-color) !important;
}



/****** HEADER ********/

/****** HERO ********/

.main-hero {
  background-color: #d8d8d8;
  height: var(--hero-height);
}

.download-btn {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--secondary-color);
  ;
  font-weight: bold;
}

.download-btn:hover {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  color: #fff;
}


/****** HERO ********/

/****** FEATURES ********/

.features .row p {
  text-align: justify !important;
}

.how-it-works ol li {
  margin-bottom: 1.2rem;
}


/****** FEATURES ********/

/****** FOOTER ********/
.footer {
  background-color: var(--secondary-color);
  color: #fff;
  padding: 20px 0;
}

.footer .logo img {
  max-width: 150px;
}

.footer .social-icons a {
  color: #fff;
  margin: 0 10px;
  font-size: 24px;
  text-decoration: none;
}

.footer .social-icons a:hover {
  color: #77aaff;
}

/****** FOOTER ********/