/* =========== Fonts ============ */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap");
/* =========== Browser Reset ============ */
:root {
  /* Color Variables */
  --primary: #ffc400;
  --text-1: #0f2341;
  --text-2: #a9a9a9;
  --white: #fff;
  --shadow-300: 0 5px 5px rgba(0, 0, 0, 0.3);
  --shadow-500: 0 5px 5px rgba(0, 0, 0, 0.5);
  --transition-300: all 300ms ease-in-out;
  --transition-500: all 500ms ease-in-out;
    
  --oxford-blue_60: hsla(224, 34%, 13%, 0.6);
  --green-pigment: hsl(202, 86%, 51%);
  --oxford-blue: hsl(224, 34%, 13%);
  --maximum-red: hsl(0, 72%, 51%);
  --eerie-black: hsl(0, 0%, 9%);
  --mint-cream: hsl(146, 41%, 97%);
  --cadet-gray: hsl(215, 20%, 65%);
  --light-gray: hsl(216, 12%, 84%);
  --carcoal_20: hsla(214, 19%, 29%, 0.2);
  --carcoal_15: hsla(214, 19%, 29%, 0.15);
  --carcoal_10: hsla(214, 19%, 29%, 0.10);
  --sea-green: hsl(205, 77%, 41%);
  --gainsboro: hsl(220, 13%, 91%);
  --white_70: hsla(0, 0%, 100%, 0.7);
  --gunmetal: hsl(215, 28%, 17%);
  --manatee: hsl(218, 11%, 65%);
  --mango: hsl(43, 96%, 56%);
  --white: hsl(0, 0%, 100%);
  --black: hsl(0, 0%, 0%);   
    
    
  /*======= typography ========*/

  --ff-spartan: 'League Spartan', sans-serif;

  --fs-1: 3.6rem;
  --fs-2: 2.4rem;
  --fs-3: 2rem;
  --fs-4: 1.8rem;
  --fs-5: 1.7rem;

  --fw-600: 600;
  --fw-500: 500;

  /*======== spacing =========*/

  --section-padding: 10px;

  /*======= shadow =======*/

  --shadow-1: 0 1px 2px hsla(0, 0%, 0%, 0.2);
  --shadow-2: 0 10px 15px -5px var(--carcoal_20);
  --shadow-3: 0 10px 25px -3px var(--carcoal_20);
  --shadow-4: 0 0 3px var(--carcoal_15);
  --shadow-5: 0 20px 25px -5px var(--carcoal_10),
              0 10px 10px -5px var(--carcoal_10);

  /*======== border radius ========*/    
    
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 65.5%;
  box-sizing: border-box;
  font-size: 10px;
  scroll-behavior: smooth;
}





img,
video {
  width: 100%;
  height: 100%;
}

/* =========== Custom Classes ============ */
.d-flex {
  display: flex;
  align-items: center;
}

.container {
  max-width: 118rem;
  margin: 0 auto;
}

.section {
  margin: 5rem 0;
  padding: 3rem 0 2rem;
  overflow: hidden;
}

.title {
  margin-bottom: 2rem;
}

.title h1 {
  font-size: 4rem;
}
/* =========== Navigation ============ */