/* --- 02 COLORS

- Primary: #311557
- Tints:
#1C053A
#8F78AD
#6B4E90

- Shades: 
#cf711f
#45260a */


* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  
  html {
    /* font-size: 10px; */
  
    /* 10px / 16px = 0.625 = 62.5% */
    /* Percentage of user's browser font-size setting */
    font-size: 62.5%;
    overflow-x: hidden;
  
    /* Does NOT work on Safari */
    /* scroll-behavior: smooth; */
  }
  
  body {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif:
    line-height: 1;
    font-weight: 400;
    color: #555;
  
    /* Only works if there is nothing absolutely positioned in relation to body */
    overflow-x: hidden;
  }
  
  /**************************/
  /* GENRAL REUSABLE COMPONENTS */
  /**************************/
  
  .container {
    /* 1140px */
    max-width: 120rem;
    padding: 0 3.2rem;
    margin: 0 auto;
  }
  
  
  .heading-primary,
  .heading-secondary,
  .heading-tertiary {
    font-weight: 700;
    color: #fff;
   background-color: rgba(0, 0, 0, 0.5);
   padding: 6%;
    letter-spacing: -0.5px;
  }
  
  .heading-primary {
    font-size: 5.2rem;
    line-height: 1.05;
    margin-bottom: 3.2rem;
  }
  
  .heading-secondary {
    font-size: 4.4rem;
    line-height: 1.2;
    margin-bottom: 9.6rem;
  }
  
  .heading-tertiary {
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 3.2rem;
  }