/* -------- Custom Property -------- */

:root {

  /* -------- Colors -------- */

  --rich-black-fogra-29_50: hsl(254, 41%, 12%, 0.5);
  --rich-black-fogra-29-1: hsl(254, 41%, 12%);
  --rich-black-fogra-29-2: hsl(210, 50%, 4%);
  --silver-metallic: hsl(240, 9%, 67%);
  --coquelicot_20: hsla(263, 98%, 52%, 0.2);
  --coquelicot_10: hsla(261, 98%, 52%, 0.1);
  --sonic-silver: hsl(0, 0%, 47%);
  --cadet-gray: hsl(214, 15%, 62%);
  --light-gray: hsl(0, 0%, 80%);
  --coquelicot: hsl(237, 97%, 74%);
  --gainsboro: hsl(0, 0%, 88%);
  --white_20: hsla(0, 0%, 100%, 0.2);
  --white_10: hsla(0, 0%, 100%, 0.1);
  --black_10: hsla(0, 0%, 0%, 0.1);
  --white: hsl(0, 0%, 100%);
  --background-color: hsl(227, 100%, 96%);

  /* -------- Typography -------- */

  --ff-catamaran: 'Catamaran', sans-serif;
  --ff-rubik: 'Rubik', sans-serif;

  --fs-1: 3.8rem;
  --fs-2: 3rem;
  --fs-3: 2.5rem;
  --fs-4: 2rem;
  --fs-5: 1.8rem;
  --fs-6: 1.5rem;

  --fw-900: 900;
  --fw-800: 800;
  --fw-700: 700;
  --fw-500: 500;

  /* -------- Spacing -------- */

  --section-padding: 80px;

  /* -------- Shadow -------- */

  --shadow-1: 0 0 20px var(--black_10);
  --shadow-2: 0px 10px 24px var(--coquelicot_20);

  /* -------- Border Radius -------- */

  --radius-15: 15px;
  --radius-13: 13px;
  --radius-10: 10px;

  /* -------- Transition -------- */

  --transition-1: 0.25s ease;
  --transition-2: 0.5s ease;
  --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
  --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);

}





/*-----------------------------------*\
  #RESET
\*-----------------------------------*/





/*-----------------------------------*\
  #REUSED STYLE
\*-----------------------------------*/





/*-----------------------------------*\
  #HEADER
\*-----------------------------------*/





/*-----------------------------------*\
  #HERO
\*-----------------------------------*/





/*-----------------------------------*\
  #ABOUT
\*-----------------------------------*/





/*-----------------------------------*\
  #VIDEO
\*-----------------------------------*/





/*-----------------------------------*\
  #CLASS
\*-----------------------------------*/





/*-----------------------------------*\
  #BLOG
\*-----------------------------------*/





/*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/





/*-----------------------------------*\
  #BACK TO TOP
\*-----------------------------------*/





/*-----------------------------------*\
  #MEDIA QUERIES
\*-----------------------------------*/



/* -------- Responsive For Larger Than 575px Screen -------- */





/* -------- Responsive For Larger Than 768px Screen -------- */





/* -------- Responsive For Larger Than 992px Screen -------- */





/* -------- Responsive For Larger Than 1200px Screen -------- */