/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/

:root {
  /*colors*/
  --slate-blue: #9fa0c3;
  --slate-blue-light: #c1c1e2;
  --white: #fff;
  --dark-blue: #040416;
  --dark-blue-text: #0c0d1f;
  --eerie-black: #363444;
  --alice-blue-2: #f5f5ff;
  --alice-blue-1: #dedff3;
  --carolina-blue: #1b1e89;
  --orange: #fb8501;
  --orange-hover: #d67c10;
  --dark-bg-par: #c2c2d9;
  --icon-color: #282828;
  --footer-bg: hsl(237.14deg 100% 98.07%);
  /**
   * typography
   */

  --ff-nunito: "Nunito", sans-serif;
  --ff-open-sans: "Open Sans", sans-serif;

  --fs-1: 2.125rem;
  --fs-2: 1.875rem;
  --fs-3: 1.5rem;
  --fs-4: 1.375rem;
  --fs-5: 1.125rem;
  --fs-6: 0.875rem;
  --fs-7: 0.625rem;

  --fw-400: 400;
  --fw-600: 600;

  /**
   * transition
   */

  --transition: 0.5s ease;

  /**
   * spacing
   */

  --section-padding: 50px;

  /**
   * radius
   */

  --radius-10: 10px;
  --radius-14: 14px;
  --radius-18: 18px;
  --max-width: 1200px;

  /**
   * shadow
   */

  --shadow-1: 3px 3px 9px hsla(240, 14%, 69%, 0.2);
  --shadow-2: 3px 3px 9px hsla(204, 92%, 59%, 0.3);
}
/* Layout */
.grid-list {
  display: grid;
  gap: 25px;
}

.w-100 {
  width: 100%;
}
.section-container {
  max-width: var(--max-width);
  margin: auto;
  padding: 5rem 1rem;
}