/* Common style for application */
/* Padding */
[class*="pad-"] {
  padding: 0;
}
.pad-0-5 {
  padding: var(--spacing-0-5);
}
.pad-1 {
  padding: var(--spacing-1);
}
.pad-2 {
  padding: var(--spacing-2);
}
.pad-3 {
  padding: var(--spacing-3);
}
.pad-4 {
  padding: var(--spacing-4);
}
.pad-5 {
  padding: var(--spacing-5);
}
.pad-6 {
  padding: var(--spacing-6);
}
.pad-7 {
  padding: var(--spacing-7);
}
.pad-8 {
  padding: var(--spacing-8);
}
.pad-9 {
  padding: var(--spacing-9);
}
.pad-10 {
  padding: var(--spacing-10);
}

[class*="pad-x-"] {
  padding-left: 0;
  padding-right: 0;
}
.pad-x-0-5 {
  padding-left: var(--spacing-0-5);
  padding-right: var(--spacing-0-5);
}
.pad-x-1 {
  padding-left: var(--spacing-1);
  padding-right: var(--spacing-1);
}
.pad-x-2 {
  padding-left: var(--spacing-2);
  padding-right: var(--spacing-2);
}
.pad-x-3 {
  padding-left: var(--spacing-3);
  padding-right: var(--spacing-3);
}
.pad-x-4 {
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
}
.pad-x-5 {
  padding-left: var(--spacing-5);
  padding-right: var(--spacing-5);
}
.pad-x-6 {
  padding-left: var(--spacing-6);
  padding-right: var(--spacing-6);
}
.pad-x-7 {
  padding-left: var(--spacing-7);
  padding-right: var(--spacing-7);
}
.pad-x-8 {
  padding-left: var(--spacing-8);
  padding-right: var(--spacing-8);
}
.pad-x-9 {
  padding-left: var(--spacing-9);
  padding-right: var(--spacing-9);
}
.pad-x-10 {
  padding-left: var(--spacing-10);
  padding-right: var(--spacing-10);
}

[class*="pad-y-"] {
  padding-top: 0;
  padding-bottom: 0;
}
.pad-y-0-5 {
  padding-top: var(--spacing-0-5);
  padding-bottom: var(--spacing-0-5);
}
.pad-y-1 {
  padding-top: var(--spacing-1);
  padding-bottom: var(--spacing-1);
}
.pad-y-2 {
  padding-top: var(--spacing-2);
  padding-bottom: var(--spacing-2);
}
.pad-y-3 {
  padding-top: var(--spacing-3);
  padding-bottom: var(--spacing-3);
}
.pad-y-4 {
  padding-top: var(--spacing-4);
  padding-bottom: var(--spacing-4);
}
.pad-y-5 {
  padding-top: var(--spacing-5);
  padding-bottom: var(--spacing-5);
}
.pad-y-6 {
  padding-top: var(--spacing-6);
  padding-bottom: var(--spacing-6);
}
.pad-y-7 {
  padding-top: var(--spacing-7);
  padding-bottom: var(--spacing-7);
}
.pad-y-8 {
  padding-top: var(--spacing-8);
  padding-bottom: var(--spacing-8);
}
.pad-y-9 {
  padding-top: var(--spacing-9);
  padding-bottom: var(--spacing-9);
}
.pad-y-10 {
  padding-top: var(--spacing-10);
  padding-bottom: var(--spacing-10);
}

[class*="pad-t-"] {
  padding-top: 0;
}
.pad-t-0-5 {
  padding-top: var(--spacing-0-5);
}
.pad-t-1 {
  padding-top: var(--spacing-1);
}
.pad-t-2 {
  padding-top: var(--spacing-2);
}
.pad-t-3 {
  padding-top: var(--spacing-3);
}
.pad-t-4 {
  padding-top: var(--spacing-4);
}
.pad-t-5 {
  padding-top: var(--spacing-5);
}
.pad-t-6 {
  padding-top: var(--spacing-6);
}
.pad-t-7 {
  padding-top: var(--spacing-7);
}
.pad-t-8 {
  padding-top: var(--spacing-8);
}
.pad-t-9 {
  padding-top: var(--spacing-9);
}
.pad-t-10 {
  padding-top: var(--spacing-10);
}

[class*="pad-b-"] {
  padding-bottom: 0;
}
.pad-b-0-5 {
  padding-bottom: var(--spacing-0-5);
}
.pad-b-1 {
  padding-bottom: var(--spacing-1);
}
.pad-b-2 {
  padding-bottom: var(--spacing-2);
}
.pad-b-3 {
  padding-bottom: var(--spacing-3);
}
.pad-b-4 {
  padding-bottom: var(--spacing-4);
}
.pad-b-5 {
  padding-bottom: var(--spacing-5);
}
.pad-b-6 {
  padding-bottom: var(--spacing-6);
}
.pad-b-7 {
  padding-bottom: var(--spacing-7);
}
.pad-b-8 {
  padding-bottom: var(--spacing-8);
}
.pad-b-9 {
  padding-bottom: var(--spacing-9);
}
.pad-b-10 {
  padding-bottom: var(--spacing-10);
}

[class*="pad-l-"] {
  padding-left: 0;
}
.pad-l-0-5 {
  padding-left: var(--spacing-0-5);
}
.pad-l-1 {
  padding-left: var(--spacing-1);
}
.pad-l-2 {
  padding-left: var(--spacing-2);
}
.pad-l-3 {
  padding-left: var(--spacing-3);
}
.pad-l-4 {
  padding-left: var(--spacing-4);
}
.pad-l-5 {
  padding-left: var(--spacing-5);
}
.pad-l-6 {
  padding-left: var(--spacing-6);
}
.pad-l-7 {
  padding-left: var(--spacing-7);
}
.pad-l-8 {
  padding-left: var(--spacing-8);
}
.pad-l-9 {
  padding-left: var(--spacing-9);
}
.pad-l-10 {
  padding-left: var(--spacing-10);
}

[class*="pad-r-"] {
  padding-right: 0;
}
.pad-r-0-5 {
  padding-right: var(--spacing-0-5);
}
.pad-r-1 {
  padding-right: var(--spacing-1);
}
.pad-r-2 {
  padding-right: var(--spacing-2);
}
.pad-r-3 {
  padding-right: var(--spacing-3);
}
.pad-r-4 {
  padding-right: var(--spacing-4);
}
.pad-r-5 {
  padding-right: var(--spacing-5);
}
.pad-r-6 {
  padding-right: var(--spacing-6);
}
.pad-r-7 {
  padding-right: var(--spacing-7);
}
.pad-r-8 {
  padding-right: var(--spacing-8);
}
.pad-r-9 {
  padding-right: var(--spacing-9);
}
.pad-r-10 {
  padding-right: var(--spacing-10);
}

/* Margin */

[class*="mar-"] {
  margin: 0;
}
.mar-auto {
  margin: auto;
}
.mar-0-5 {
  margin: var(--spacing-0-5);
}
.mar-1 {
  margin: var(--spacing-1);
}
.mar-2 {
  margin: var(--spacing-2);
}
.mar-3 {
  margin: var(--spacing-3);
}
.mar-4 {
  margin: var(--spacing-4);
}
.mar-5 {
  margin: var(--spacing-5);
}
.mar-6 {
  margin: var(--spacing-6);
}
.mar-7 {
  margin: var(--spacing-7);
}
.mar-8 {
  margin: var(--spacing-8);
}
.mar-9 {
  margin: var(--spacing-9);
}
.mar-10 {
  margin: var(--spacing-10);
}

[class*="mar-x-"] {
  margin-left: 0;
  margin-right: 0;
}
.mar-x-0-5 {
  margin-left: var(--spacing-0-5);
  margin-right: var(--spacing-0-5);
}
.mar-x-1 {
  margin-left: var(--spacing-1);
  margin-right: var(--spacing-1);
}
.mar-x-2 {
  margin-left: var(--spacing-2);
  margin-right: var(--spacing-2);
}
.mar-x-3 {
  margin-left: var(--spacing-3);
  margin-right: var(--spacing-3);
}
.mar-x-4 {
  margin-left: var(--spacing-4);
  margin-right: var(--spacing-4);
}
.mar-x-5 {
  margin-left: var(--spacing-5);
  margin-right: var(--spacing-5);
}
.mar-x-6 {
  margin-left: var(--spacing-6);
  margin-right: var(--spacing-6);
}
.mar-x-7 {
  margin-left: var(--spacing-7);
  margin-right: var(--spacing-7);
}
.mar-x-8 {
  margin-left: var(--spacing-8);
  margin-right: var(--spacing-8);
}
.mar-x-9 {
  margin-left: var(--spacing-9);
  margin-right: var(--spacing-9);
}
.mar-x-10 {
  margin-left: var(--spacing-10);
  margin-right: var(--spacing-10);
}

[class*="mar-y-"] {
  margin-top: 0;
  margin-bottom: 0;
}
.mar-y-0-5 {
  margin-top: var(--spacing-0-5);
  margin-bottom: var(--spacing-0-5);
}
.mar-y-1 {
  margin-top: var(--spacing-1);
  margin-bottom: var(--spacing-1);
}
.mar-y-2 {
  margin-top: var(--spacing-2);
  margin-bottom: var(--spacing-2);
}
.mar-y-3 {
  margin-top: var(--spacing-3);
  margin-bottom: var(--spacing-3);
}
.mar-y-4 {
  margin-top: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}
.mar-y-5 {
  margin-top: var(--spacing-5);
  margin-bottom: var(--spacing-5);
}
.mar-y-6 {
  margin-top: var(--spacing-6);
  margin-bottom: var(--spacing-6);
}
.mar-y-7 {
  margin-top: var(--spacing-7);
  margin-bottom: var(--spacing-7);
}
.mar-y-8 {
  margin-top: var(--spacing-8);
  margin-bottom: var(--spacing-8);
}
.mar-y-9 {
  margin-top: var(--spacing-9);
  margin-bottom: var(--spacing-9);
}
.mar-y-10 {
  margin-top: var(--spacing-10);
  margin-bottom: var(--spacing-10);
}

[class*="mar-t-"] {
  margin-top: 0;
}
.mar-t-0-5 {
  margin-top: var(--spacing-0-5);
}
.mar-t-1 {
  margin-top: var(--spacing-1);
}
.mar-t-2 {
  margin-top: var(--spacing-2);
}
.mar-t-3 {
  margin-top: var(--spacing-3);
}
.mar-t-4 {
  margin-top: var(--spacing-4);
}
.mar-t-5 {
  margin-top: var(--spacing-5);
}
.mar-t-6 {
  margin-top: var(--spacing-6);
}
.mar-t-7 {
  margin-top: var(--spacing-7);
}
.mar-t-8 {
  margin-top: var(--spacing-8);
}
.mar-t-9 {
  margin-top: var(--spacing-9);
}
.mar-t-10 {
  margin-top: var(--spacing-10);
}

[class*="mar-b-"] {
  margin-bottom: 0;
}
.mar-b-0-5 {
  margin-bottom: var(--spacing-0-5);
}
.mar-b-1 {
  margin-bottom: var(--spacing-1);
}
.mar-b-2 {
  margin-bottom: var(--spacing-2);
}
.mar-b-3 {
  margin-bottom: var(--spacing-3);
}
.mar-b-4 {
  margin-bottom: var(--spacing-4);
}
.mar-b-5 {
  margin-bottom: var(--spacing-5);
}
.mar-b-6 {
  margin-bottom: var(--spacing-6);
}
.mar-b-7 {
  margin-bottom: var(--spacing-7);
}
.mar-b-8 {
  margin-bottom: var(--spacing-8);
}
.mar-b-9 {
  margin-bottom: var(--spacing-9);
}
.mar-b-10 {
  margin-bottom: var(--spacing-10);
}

[class*="mar-l-"] {
  margin-left: 0;
}
.mar-l-0-5 {
  margin-left: var(--spacing-0-5);
}
.mar-l-1 {
  margin-left: var(--spacing-1);
}
.mar-l-2 {
  margin-left: var(--spacing-2);
}
.mar-l-3 {
  margin-left: var(--spacing-3);
}
.mar-l-4 {
  margin-left: var(--spacing-4);
}
.mar-l-5 {
  margin-left: var(--spacing-5);
}
.mar-l-6 {
  margin-left: var(--spacing-6);
}
.mar-l-7 {
  margin-left: var(--spacing-7);
}
.mar-l-8 {
  margin-left: var(--spacing-8);
}
.mar-l-9 {
  margin-left: var(--spacing-9);
}
.mar-l-10 {
  margin-left: var(--spacing-10);
}

[class*="mar-r-"] {
  margin-right: 0;
}
.mar-r-0-5 {
  margin-right: var(--spacing-0-5);
}
.mar-r-1 {
  margin-right: var(--spacing-1);
}
.mar-r-2 {
  margin-right: var(--spacing-2);
}
.mar-r-3 {
  margin-right: var(--spacing-3);
}
.mar-r-4 {
  margin-right: var(--spacing-4);
}
.mar-r-5 {
  margin-right: var(--spacing-5);
}
.mar-r-6 {
  margin-right: var(--spacing-6);
}
.mar-r-7 {
  margin-right: var(--spacing-7);
}
.mar-r-8 {
  margin-right: var(--spacing-8);
}
.mar-r-9 {
  margin-right: var(--spacing-9);
}
.mar-r-10 {
  margin-right: var(--spacing-10);
}

/* Font Size */
.font-normal { font-size: var(--normal); }
.font-smallest { font-size: var(--smallest); }
.font-smaller { font-size: var(--smaller); }
.font-small { font-size: var(--small); }
.font-large { font-size: var(--large); }
.font-larger { font-size: var(--larger); }
.font-largest { font-size: var(--largest); }

/* Font Weight */
.font-thin { font-weight: var(--font-weight-thin); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-thick { font-weight: var(--font-weight-thick); }
.font-thicker { font-weight: var(--font-weight-thicker); }
.font-thickest { font-weight: var(--font-weight-thickest); }

/* Line Heights */
.line-height-1 { line-height: 1rem; }
.line-height-1-5 { line-height: 1.5rem; }
.line-height-2 { line-height: 2rem; }
.line-height-3 { line-height: 3rem; }
.line-height-4 { line-height: 4rem; }
.line-height-5 { line-height: 5rem; }
.line-height-6 { line-height: 6rem; }

/* Font Color */
.font-primary { color: var(--gold-1); }
.font-primary-2 { color: var(--gold-2); }
.font-white { color: var(--white); }
.font-black { color: var(--black); }
.font-grey { color: #6d6d6d; }


/* Focus Elements */
.focus-style:focus,
.btn:focus,
.input:focus,
.select:focus,
.checkbox-small:focus,
.textarea:focus {
  /* border: solid 1px var(--color1-1); */
  outline: solid 3px var(--focus-outline-color);
  outline-style: dotted;
  outline-offset: 4px;
}

/* Input */
.input,
.select,
.textarea {
  width: 100%;
  font-size: var(--large);
  outline: none;
  display: block;
  border: none;
  border-bottom: solid 2px var(--gold-1);
}

.select,
.input {
  padding: 0px var(--spacing-1);
  height: var(--size3);
}

.textarea {
  padding: var(--spacing-1);
  height: var(--size4);
  max-width: 100%;
  min-width: 100%;
}

/* Checkbox */
.checkbox-small {
  appearance: none;
  background-color: var(--black);
  border-radius: 3px;
  height: var(--size2);
  width: var(--size2);
  border: solid 1px var(--grey-1);
  position: relative;
}

.checkbox-small::before {
  border-radius: 3px;
  content: "";
  width: calc(var(--size2) - 4px);
  height: calc(var(--size2) - 4px);
  background-color: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.checkbox-small:checked::before {
  background-color: var(--black);
}

.checkbox-small.checkbox-primary:checked::before {
  background-color: var(--gold-1);
}

/* Position Sticky */

.position-sticky-top {
  position: sticky;
  top: 0;
}


/* Random range inpur style */

.input-range-value {
  position: relative;
  display: block;
  text-align: center;
  font-size: 4em;
  color: #999;
  font-weight: 400;
}
.input-range {
  width: 100%;
  height: 80px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--color1-2);
  outline: none;
  border-radius: 15px;
}

.input-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 100px;
  border-radius: 15px;
  background: var(--color1-1);
  cursor: pointer;
  position: relative;
}

/* Buttons */
.btn {
  height: 40px;
  padding: 0 20px;
  border: solid 2px var(--white);
  outline: none;
  background-color: var(--white);
  color: var(--black);
  border-radius: 50px;
  cursor: pointer;
  font-size: var(--normal);
  font-weight: var(--font-weight-thick);
  transition: 0.2s;
}

.btn.btn-stroke {
  background-color: transparent;
  color: var(--white);
}

.btn.btn-stroke:hover {
  background-color: var(--white);
  color: var(--black);
}

.btn.btn-primary {
  border: solid 2px var(--gold-2);
  color: var(--white);
  background-color: var(--gold-2);
}

.btn.btn-primary:hover {
  background-color: var(--gold-1);
}

/* Headings */

.heading-1 {
  font-size: 3rem;
}

.heading-2 {
  font-size: 2.5rem;
}

.heading-3 {
  font-size: 2rem;
}

/* Line Seperator */

.line-seperator {
  position: relative;
  padding: var(--spacing-2);
}

.line-seperator::before {
  content: '';
  background-color: #00000030;
  height: 1px;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}