/* 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(--primary-color);
}
.font-secondary {
  color: var(--secondary-color);
}
.font-grey {
  color: var(--grey);
}
.font-white {
  color: var(--white);
}
.font-black {
  color: var(--black);
}

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

/* Input */
.input,
.textarea {
  width: 100%;
  font-size: var(--normal);
  outline: none;
  display: block;
  border: solid 1px var(--primary-color);
  /* border-radius: 5px; */
}

.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 {
  width: 100%;
  height: 40px;
  padding: 0 20px;
  border: solid 2px var(--white);
  outline: none;
  background-color: var(--white);
  color: var(--black);
  /* border-radius: 5px; */
  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(--primary-color);
  color: var(--white);
  background-color: var(--primary-color);
}

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

/* Headings */

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

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

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

/* 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%);
}

/* Font Family */

.font-family-2 {
  font-family: "Trueno Regular";
}

.text-transform-upper {
  text-transform: uppercase;
}

@media screen and (max-width: 1100px) {
  .heading-2 {
    font-size: 1.5rem;
  }
}