/*=======================
    Main
=======================*/
@import url("https://fonts.googleapis.com/css2?family=Aclonica&family=Aldrich&family=Alegreya+Sans+SC:wght@100&family=Audiowide&family=Bebas+Neue&family=Berkshire+Swash&family=Black+Han+Sans&family=Black+Ops+One&family=Bowlby+One+SC&family=Capriola&family=Cinzel&family=Cinzel+Decorative&family=Concert+One&family=Dancing+Script&family=Days+One&family=Faster+One&family=Frijole&family=Gloria+Hallelujah&family=Holtwood+One+SC&family=Lobster&family=Macondo+Swash+Caps&family=Meddon&family=Noto+Sans+Display:wght@100&family=Open+Sans+Condensed:wght@300&family=Orbitron&family=Oswald:wght@200&family=Permanent+Marker&family=Righteous&family=Roboto:wght@100&family=Rock+3D&family=Russo+One&family=Saira+Semi+Condensed:wght@100&family=Shadows+Into+Light&family=Shizuru&family=Sigmar+One&family=Titan+One&family=Ubuntu:wght@300&family=Yuji+Hentaigana+Akari&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap');
body {
  margin: 0;
  padding: 0;
}

/*=======================
    !Main
=======================*/
/*=======================
    Grid Layout
=======================*/
/* Main grid to be specified at the start of a new section */
.main-grid {
  --column-count: 12;
  /* Specify the number of columns in the grid layout */
  overflow: hidden;
  display: grid;
  column-gap:1rem;
  grid-template-columns: minmax(1rem, 1fr) repeat(var(--column-count), minmax(0, 5.5rem)) minmax(1rem, 1fr);
  /* Acts as a container */
}

.main-grid > * {
  /* Main grid child elements inheriting grid components (alternative until support for sub-grid is popularized) */
  grid-column: 1/-1;
  grid-gap: inherit;
  display: grid;
  grid-template-columns: inherit;
}

@media (max-width: 950px) {
  /* All children will occupy full screen width*/
  .main-grid {
    column-gap: 0;
  }

  .main-grid > * > * {
    grid-column: 2/-2;
  }
}
@media (min-width: 950px) {
  /* Grid columns layout. Specify even columns class and number of columns or custom column width. */
  /* Custom width can be specified with --col-width in pseudo class elements */
  .even-columns > * {
    grid-column: span var(--col-width);
  }

  .even-columns > *:first-child {
    grid-column: var(--col-start, 2)/span var(--col-width);
  }

  .even-columns > *:last-child {
    grid-column: span var(--col-width)/calc(var(--col-start, 2) * -1);
  }

  .even-columns > *:only-child {
    grid-column: var(--col-start, 2)/var(--col-width, -2);
  }

  .one-column {
    --col-width: var(--column-count) ;
    /* occupy the entire grid width */
  }

  .two-columns {
    --col-width: 6;
  }

  .three-columns {
    --col-width: 4;
  }

  .four-columns {
    --col-width: 3;
  }

  .six-columns {
    --col-width: 2;
  }

  .full-split > *:first-child {
    grid-column: 1/span 7;
    /* Must be changed if --column-count is changed */
  }

  .full-split > *:last-child {
    grid-column: span 7/-1;
    /* Must be changed if --column-count is changed */
  }

  .full-split > *:only-child {
    grid-column: 1/-1;
  }
}
/*=======================
    !Grid Layout
=======================*/
/*=======================
    Flex Layouts
=======================*/
.wrapped-row {
  flex-wrap: wrap;
  flex-direction: row;
}

.wrapped-column {
  flex-wrap: wrap;
  flex-direction: column;
}

.conventional-read {
  justify-content: left;
}

.unconventional-read {
  justify-content: right;
}

.centered {
  justify-content: center;
}
.center-v {
  align-items: center;
}

.spaced {
  justify-content: space-between;
}

.gap-1 {
  gap: 1rem;
}

.gap-2 {
  gap: 2rem;
}

.gap-3 {
  gap: 3rem;
}

.gap-4 {
  gap: 4rem;
}

.gap-5 {
  gap: 5rem;
}

/*=======================
    !Flex Layouts
=======================*/
/*=======================
    Typography
=======================*/
a,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  /* margins to be specified with custom margin classes e.g my-1 (margin: 1rem 0; */
  font-weight: normal;
  /* removes bold on heading tags */
}

a,
a:hover {
  text-decoration: underline;
  /* Allows for easier link customization */
}
.a-none:hover {
  text-decoration: none !important;
}

/*=======================
    !Typography
=======================*/
/*=======================
    Fonts
=======================*/
.aclonica {
  font-family: "Aclonica", sans-serif;
}

.aldrich {
  font-family: "Aldrich", sans-serif;
}

.alegraya {
  font-family: "Alegreya Sans SC", sans-serif;
}
.architects-daughter {
  font-family: 'Architects Daughter', cursive;
}
.audiowide {
  font-family: "Audiowide", cursive;
}

.bebas {
  font-family: "Bebas Neue", cursive;
}

.berkshire {
  font-family: "Berkshire Swash", cursive;
}

.blackhan {
  font-family: "Black Han Sans", sans-serif;
}

.blackops {
  font-family: "Black Ops One", cursive;
}

.bowlby {
  font-family: "Bowlby One SC", cursive;
}

.capriola {
  font-family: "Capriola", sans-serif;
}

.cinzel {
  font-family: "Cinzel", serif;
}

.cinzeld {
  font-family: "Cinzel Decorative", cursive;
}

.concert {
  font-family: "Concert One", cursive;
}

.dancing {
  font-family: "Dancing Script", cursive;
}

.days {
  font-family: "Days One", sans-serif;
}

.faster {
  font-family: "Faster One", cursive;
}

.frijole {
  font-family: "Frijole", cursive;
}

.gloria {
  font-family: "Gloria Hallelujah", cursive;
}

.holtwood {
  font-family: "Holtwood One SC", serif;
}

.lobster {
  font-family: "Lobster", cursive;
}

.maconda {
  font-family: "Macondo Swash Caps", cursive;
}

.meddon {
  font-family: "Meddon", cursive;
}

.noto {
  font-family: "Noto Sans Display", sans-serif;
}

.opensans {
  font-family: "Open Sans Condensed", sans-serif;
}

.orbitron {
  font-family: "Orbitron", sans-serif;
}

.oswald {
  font-family: "Oswald", sans-serif;
}

.marker {
  font-family: "Permanent Marker", cursive;
}

.righteous {
  font-family: "Righteous", cursive;
}

.roboto {
  font-family: "Roboto", sans-serif;
}

.rock3d {
  font-family: "Rock 3D", cursive;
}

.russo {
  font-family: "Russo One", sans-serif;
}

.saira {
  font-family: "Saira Semi Condensed", sans-serif;
}

.shadows {
  font-family: "Shadows Into Light", cursive;
}

.shizuru {
  font-family: "Shizuru", cursive;
}

.sigmar {
  font-family: "Sigmar One", cursive;
}

.titan {
  font-family: "Titan One", cursive;
}

.ubuntu {
  font-family: "Ubuntu", sans-serif;
}

.yuji {
  font-family: "Yuji Hentaigana Akari", cursive;
}

/*=======================
    !Fonts
=======================*/

.step_-2{
  font-size: clamp(0.91rem, 0.89rem + 0.10vw, 0.96rem);
}
.step_-1 {
  font-size: clamp(1rem, 1.00rem + 0.21vw, 1.20rem);
} 
.step_0 {
  font-size: clamp(1.25rem, 1.15rem + 0.3vw, 1.55rem);
}
.step_1 {
  font-size: clamp(1.58rem, 1.46rem + 0.59vw, 1.88rem);
}
.step_2 {
  font-size: clamp(1.89rem, 1.71rem + 0.89vw, 2.34rem);
}
.step_3 {
  font-size: clamp(2.27rem, 2.01rem + 1.29vw, 2.93rem);
}
.step_4 {
  font-size: clamp(2.72rem, 2.36rem + 1.83vw, 3.66rem);
}
.step_5 {
  font-size: clamp(3.27rem, 2.75rem + 2.56vw, 4.58rem);
}

/*=======================
    Colors
=======================*/
.text-dark {
  color: #333333
}
.text-black {
  color: #000000
}
.text-light {
  color: #fff
}

/*=======================
    Background
=======================*/

.whiteSmoke-bg {
  background: #F4F4F4
}
.ghostWhite-bg{
  background: ghostwhite;
}
/*=======================
    Common Elements
=======================*/
/* Position */
.fix {
  position: fixed;
  top: 0;
}

.abs {
  position: absolute;
}

.rel {
  position: relative;
}

.stick {
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 0;
  /* specify sticky position on pseudo element */
}

/* !Position */
/* Display */
.show {
  display: block;
}

.flex {
  display: flex !important;
}

.grid {
  display: grid;
  grid-template-columns: --grid-template-columns;
  grid-template-rows: --grid-template-rows;
}

.hide {
  display: none;
}

/* !Display */
/* Margins */
.m-1 {
  margin: 1rem;
}

.m-2 {
  margin: 2rem;
}

.m-3 {
  margin: 3rem;
}

.m-4 {
  margin: 4rem;
}

.m-5 {
  margin: 5rem;
}

.ml-1 {
  margin-left: 1rem;
}

.ml-2 {
  margin-left: 2rem;
}

.ml-3 {
  margin-left: 3rem;
}

.ml-4 {
  margin-left: 4rem;
}

.ml-5 {
  margin-left: 5rem;
}

.mr-1 {
  margin-right: 1rem;
}

.mr-2 {
  margin-right: 2rem;
}

.mr-3 {
  margin-right: 3rem;
}

.mr-4 {
  margin-right: 4rem;
}

.mr-5 {
  margin-right: 5rem;
}

.mb-1 {
  margin-bottom: 1rem;
}

.mb-2 {
  margin-bottom: 2rem;
}

.mb-3 {
  margin-bottom: 3rem;
}

.mb-4 {
  margin-bottom: 4rem;
}

.mb-5 {
  margin-bottom: 5rem;
}

.mt-1 {
  margin-top: 1rem;
}

.mt-2 {
  margin-top: 2rem;
}

.mt-3 {
  margin-top: 3rem;
}

.mt-4 {
  margin-top: 4rem;
}

.mt-5 {
  margin-top: 5rem;
}

.my-1 {
  margin: 1rem 0;
}

.my-2 {
  margin: 2rem 0;
}

.my-3 {
  margin: 3rem 0;
}

.my-4 {
  margin: 4rem 0;
}

.my-5 {
  margin: 5rem 0;
}

.mx-1 {
  margin: 0 1rem;
}

.mx-2 {
  margin: 0 2rem;
}

.mx-3 {
  margin: 0 3rem;
}

.mx-4 {
  margin: 0 4rem;
}

.mx-5 {
  margin: 0 5rem;
}
@media(max-width: 950px){
  .m-my-1{
    margin: 1rem 0;
  }
}
/* !Margins */
/* Padding */
.p-1 {
  padding: 1rem;
}

.p-2 {
  padding: 2rem;
}

.p-3 {
  padding: 3rem;
}

.p-4 {
  padding: 4rem;
}

.p-5 {
  padding: 5rem;
}

.pl-1 {
  padding-left: 1rem;
}

.pl-2 {
  padding-left: 2rem;
}

.pl-3 {
  padding-left: 3rem;
}

.pl-4 {
  padding-left: 4rem;
}

.pl-5 {
  padding-left: 5rem;
}

.pr-1 {
  padding-right: 1rem;
}

.pr-2 {
  padding-right: 2rem;
}

.pr-3 {
  padding-right: 3rem;
}

.pr-4 {
  padding-right: 4rem;
}

.pr-5 {
  padding-right: 5rem;
}

.pb-1 {
  padding-bottom: 1rem;
}

.pb-2 {
  padding-bottom: 2rem;
}

.pb-3 {
  padding-bottom: 3rem;
}

.pb-4 {
  padding-bottom: 4rem;
}

.pb-5 {
  padding-bottom: 5rem;
}

.pt-1 {
  padding-top: 1rem;
}

.pt-2 {
  padding-top: 2rem;
}

.pt-3 {
  padding-top: 3rem;
}

.pt-4 {
  padding-top: 4rem;
}

.pt-5 {
  padding-top: 5rem;
}

.py-1 {
  padding: 1rem 0;
}

.py-2 {
  padding: 2rem 0;
}

.py-3 {
  padding: 3rem 0;
}

.py-4 {
  padding: 4rem 0;
}

.py-5 {
  padding: 5rem 0;
}

.px-1 {
  padding: 0 1rem;
}

.px-2 {
  padding: 0 2rem;
}

.px-3 {
  padding: 0 3rem;
}

.px-4 {
  padding: 0 4rem;
}

.px-5 {
  padding: 0 5rem;
}

/* !padding */
/* font size */
.font-8 {
  font-size: 8;
}

.font-10 {
  font-size: 10;
}

.font-12 {
  font-size: 12;
}

.font-14 {
  font-size: 14;
}

.font-16 {
  font-size: 16;
}

.font-18 {
  font-size: 18;
}

.font-20 {
  font-size: 20;
}

.font-22 {
  font-size: 22;
}

.font-24 {
  font-size: 24;
}

.font-26 {
  font-size: 26;
}

.font-28 {
  font-size: 28;
}

.font-30 {
  font-size: 30;
}

.font-32 {
  font-size: 32;
}

.font-34 {
  font-size: 34;
}

.font-36 {
  font-size: 36;
}

.font-38 {
  font-size: 38;
}

.font-40 {
  font-size: 40;
}

.font-42 {
  font-size: 42;
}

.font-44 {
  font-size: 44;
}

.font-46 {
  font-size: 46;
}

.font-48 {
  font-size: 48;
}

.font-72 {
  font-size: 72;
}

/* !font size */
/* buttons */
.btn {
  border: none;
  padding: 1rem;
  border-radius: 5px
}

.btn-success {
  background: #0b8f0b;
}

.btn-warning {
  background: #edac20;
}

.btn-danger {
  background: #d01212;
}
.btn-neutral {
  background: grey
}

/* !buttons */
/* borders */
.bor {
  border: 0.5rem grey solid;
}

.dashed {
  border-style: dashed;
}
f
.dotted {
  border-style: dotted;
}

.bor-1 {
  border: 1rem grey solid;
}

.bor-2 {
  border: 2rem grey solid;
}

.bor-3 {
  border: 3rem grey solid;
}

.bor-4 {
  border: 4rem grey solid;
}

.bor-5 {
  border: 5rem grey solid;
}
.bor-top {
  border-top: 1px grey solid;
}
.bor-success {
  border-color: #0b8f0b;
}

.bor-warning {
  border-color: #edac20;
}

.bor-danger {
  border-color: #d01212;
}

/* !borders */
/* text */
.center-text {
  text-align: center;
}

.text-conventional {
  text-align: left;
}

.text-unconventional {
  text-align: right;
}

.text-success {
  color: #0b8f0b;
}

.text-warning {
  color: #edac20;
}

.text-danger {
  color: #d01212;
}

.bold {
  font-weight: bold;
}

.underline {
  text-decoration: underline;
}

/* !text */

/* Images */
.img-fluid {
  width: 100%;
}
/*  */
/*=======================
    !Common Elements
=======================*/

/*# sourceMappingURL=style.css.map */

/*=======================
    FADERS AND SLIDERS
=======================*/
.fade-in {
  opacity: 0;
  transition: opacity 750ms ease-in;
}

.fade-in.appear {
  opacity: 1;
}

.from-left {
  transform: translateX(-10%);
}

.from-right {
  transform: translateX(10%);
}

.from-top {
  transform: translateY(-20%);
}

.from-bottom {
  transform: translateY(20%);
}

.from-left,
.from-right,
.from-top,
.from-bottom {
  transition: opacity 750ms ease-in, transform 750ms ease-in;
  opacity: 0;
}

.from-left.appear,
.from-right.appear,
.from-top.appear,
.from-bottom.appear {
  transform: translateX(0);
  opacity: 1;
}