.btn {
     display: inline-block;
     color: var(--light-1);
     font-size: 0.96rem;
     font-weight: 600;
     text-decoration: none;
     text-align: center;
     line-height: 1.2;
     padding: 0.7rem 1.45rem;
     border: 2px solid transparent;
     border-radius: 999px;
     box-shadow: var(--shadow-btn);
     cursor: pointer;
     transition:
          transform 0.18s ease,
          box-shadow 0.18s ease,
          background-color 0.18s ease,
          color 0.18s ease,
          border-color 0.18s ease;
}

/* -----------------------------
     BTN-1
-------------------------------- */

.btn-1 {
     color: var(--light-1);
     font-size: 1.1rem;
     background: var(--color-1);
     margin: 1.5rem 0 0 0;
     padding: 0.75rem 1.5rem;
     border: 2px solid var(--color-1);
}

.btn-1-outline {
     color: var(--color-1);
     font-size: 1.1rem;
     background: var(--light-1);
     margin: 1.5rem 0 0 0;
     padding: 1rem 1.5rem;
     border: 2px solid var(--color-1);
}

.btn-1-outline-2 {
     color: var(--light-1);
     font-size: 1.1rem;
     background: var(--color-1);
     margin: 1.5rem 0 0 0;
     padding: 0.75rem 1.5rem;
     border: 2px solid var(--light-1);
}

.btn-1-accent {
     color: var(--color-1);
     font-size: 1.1rem;
     background: var(--accent-2);
     margin: 1.5rem 0 0 0;
     padding: 0.75rem 1.5rem;
     border: 2px solid var(--accent-2);
}

.btn-1:hover,
.btn-1-accent:hover,
.btn-1-outline:hover,
.btn-1-outline-2:hover {
     text-decoration: none;
     color: var(--light-1);
     background-color: var(--color-2);
     border-color: var(--color-2);
     transform: translateY(-2px);
     box-shadow: var(--shadow-btn-hover);
}

/* -----------------------------
     BTN-2
-------------------------------- */

.btn-2 {
     width: 100%;
     color: var(--light-1);
     background: var(--color-1);
     margin: 1.5rem 0 0 0;
     padding: 1rem 3rem;
     border: 2px solid var(--color-1);
}

.btn-2-outline {
     width: 100%;
     color: var(--color-1);
     background: transparent;
     margin: 1.5rem 0 0 0;
     padding: 1rem 3rem;
     border: 2px solid var(--color-1);
}

.btn-2:hover,
.btn-2-outline:hover {
     background-color: var(--color-2);
     border-color: var(--color-2);
     color: var(--light-1);
     transform: translateY(-1px);
}

/* -----------------------------
     BTN-3
-------------------------------- */

.btn-3 {
     color: var(--color-1);
     font-size: 1.1rem;
     background: var(--accent-4);
     margin: 1.5rem 0 0 0;
     padding: 0.75rem 1.5rem;
     border: 2px solid var(--color-1);
}

.btn-3:hover {
     background-color: var(--color-2);
     border-color: var(--color-2);
     transform: translateY(-1px);
}

/* -----------------------------
     BTN-STATE
-------------------------------- */

.btn-state {
     width: 100%;
     font-size: 1rem;
     text-align: left;
     background: var(--color-1);
     margin: 1rem 0 0 0;
     padding: 1rem 3rem;
     border: 2px solid var(--color-1);
}

.btn-state:hover {
     background-color: var(--color-2);
     border-color: var(--color-2);
     transform: translateY(-1px);
}

.states {
     padding: 1rem 1rem;
}

.states h1 {
     font-size: 1.7rem;
     margin: 0 0 1rem 0;
}

/* -----------------------------
     BTN-NAME
-------------------------------- */
.btn-name {
     background: var(--gradient-h);
     padding: 1rem;
     border: 3px solid var(--light-1);
     box-shadow: var(--shadow-btn-xl);
}

.btn-name h1 {
     color: var(--light-1);
}

/* -----------------------------
     BTN-XL
-------------------------------- */
.btn-xl {
     background-color: var(--color-1);
     padding: 1rem 3rem;
     border: 3px solid var(--light-1);
     box-shadow: var(--shadow-btn-xl);
}

.btn-xl:hover {
     background-color: var(--color-2);
     box-shadow: var(--shadow-btn-xl-hover);
     transform: translateY(-1px);
}

.btn-xl h1 {
     color: var(--light-1);
}

/* =========================
   TABLET
========================= */

@media (max-width: 960px) {}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

     .btn-1 {
          font-size: 1rem;
          width: 100%;
          margin: 0;
     }

     .btn-xl {
          padding: 1rem;
     }

     .btn-name h1 {
          /* font-size: 1rem; */
     }
}