/*Section Properties*/

.section-basic {
  height: 100vh;
  min-height: 700px !important;
}

.section-auto {
  height: auto;
  min-height: 400px !important;
  padding: 60px 0;
}

.section-overlay {
  height: 100%;
  width: 100%;
  background-color: var(--glass-60);
}

.blur-2 {
  backdrop-filter: blur(2px);
}

.blur-5 {
  backdrop-filter: blur(5px);
}

.blur-10 {
  backdrop-filter: blur(10px);
}

.container {
  max-width: 1400px;
  width: 90%;
}
/*HEIGHT PROPERTIES*/

/* Low properties for lists, buttons, inputs, etc. */
.h-20px {
  height: 20px;
  font-size: 10px;
}

.h-30px {
  height: 30px;
  font-size: 14px;
}

.h-40px {
  height: 40px;
  font-size: 16px;
}

.h-50px {
  height: 50px;
  font-size: 18px;
}

.h-60px {
  height: 60px;
  font-size: 20px;
}

.h-70px {
  height: 70px;
  font-size: 22px;
}

.h-80px {
  height: 80px;
  font-size: 24px;
}

.h-90px {
  height: 90px;
  font-size: 26px;
}

/*High properties for headers, large buttons, etc. */

.h-100px {
  height: 100px;
  font-size: 28px;
}

.h-120px {
  height: 120px;
  font-size: 32px;
}

.h-150px {
  height: 150px;
  font-size: 36px;
}

.h-200px {
  height: 200px;
  font-size: 40px;
}

/*WIDTH PROPERTIES*/

.w-auto {
  width: auto;
  padding: 0 20px;
}

.w-100px {
  width: 100px;
}

.w-150px {
  width: 150px;
}

.w-200px {
  width: 200px;
}

.w-250px {
  width: 250px;
}

.w-300px {
  width: 300px;
}

.w-350px {
  width: 350px;
}

.w-400px {
  width: 400px;
}

.w-450px {
  width: 450px;
}

.w-500px {
  width: 500px;
}

/*percentages */

.w-25prc {
  width: 25%;
}

.w-50prc {
  width: 50%;
}

.w-75prc {
  width: 75%;
}

.w-100prc {
  width: 100%;
}

@media (max-width: 900px) {
  .section-basic {
    min-height: 800px !important;
    height: auto;
  }
}

@media (max-width: 900px) {
  .section-overlay {
    min-height: 120vh !important;
    height: auto;
  }
}