/* -------------------- Reset/Normalize Basics -------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  direction: ltr;
  width: 100%;
  height: 100%;
  font-family: var(--font-family-base);
  font-size: var(--font-base-size);
  color: var(--color-dark-1);
  background-color: var(--color-light);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden !important;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  width: 100%;
}

a {
  font-family: "Satoshi Medium", sans-serif;
  text-decoration: none;
  color: inherit;
  transition: var(--transition-fast);
}

ul {
  list-style: disc;
  padding: 0 0 0 20px;
  line-height: 32px;
}

p {
  font-family: "Satoshi", sans-serif;
  line-height: 24px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.03rem;
  color: var(--color-gray-1);
}

/* -------------------- Containers & Layout -------------------- */

/* -------------------- Headings -------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Satoshi Medium", sans-serif;
  font-weight: bold;
  margin-bottom: var(--spacing-md);
  line-height: 1.3;
}

h1 {
  font-size: var(--font-xl-size);
}
h2 {
  font-size: var(--font-lg-size);
}
h3 {
  font-size: var(--font-md-size);
}
h4 {
  font-size: var(--font-base-size);
}
h5 {
  font-size: var(--font-sm-size);
}
h6 {
  font-size: var(--font-xs-size);
}

/* -------------------- Buttons -------------------- */
.btn {
  font-family: "Satoshi Medium", sans-serif;
  border-radius: var(--btn-rd);
  border: none;
  cursor: pointer;
  transition: var(--transition-normal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-sm {
  font-size: var(--font-sm-size);
  padding: 0.7rem 1.5rem;
}
.btn-base {
  font-size: var(--font-base-size);
  padding: var(--spacing-md) var(--spacing-lg);
}
.btn-md {
  font-size: var(--font-md-size);
  padding: var(--spacing-md) var(--spacing-lg);
}
.btn-lg {
  font-size: var(--font-lg-size);
  padding: var(--spacing-lg) var(--spacing-xl);
}

.btn-primary {
  background-color: var(--color-primary-3);
  color: #fff;
}

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

/* -------------------- Forms -------------------- */
input,
textarea,
select {
  width: 100%;
  padding: var(--spacing-sm) !important;
  border: 1px solid var(--color-gray-2);
  border-radius: var(--input-rd);
  font-size: var(--font-base-size);
  transition: var(--transition-fast);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary-3);
  outline: none;
}

input::placeholder,
textarea::placeholder,
select::placeholder {
  color: #92979d !important;
  opacity: 1;
}

/* -------------------- Utility Classes -------------------- */

.mt-1 {
  margin-top: var(--spacing-sm);
}
.mt-2 {
  margin-top: var(--spacing-md);
}
.mt-3 {
  margin-top: var(--spacing-lg);
}

.mb-1 {
  margin-bottom: var(--spacing-sm);
}
.mb-2 {
  margin-bottom: var(--spacing-md);
}
.mb-3 {
  margin-bottom: var(--spacing-lg);
}

.padding-y-section-1 {
  padding: 100px 0 !important;
}

.padding-y-section-2 {
  padding: 80px 0 !important;
}

.padding-y-section-3 {
  padding: 50px 0 !important;
}

.padding-y-section-4 {
  padding: 20px 0 !important;
}

/* Add more spacing utils as needed... */

/* -------------------- Custom Scrollbar (Optional) -------------------- */
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-thumb {
  background-color: var(--color-primary-3);
  border-radius: 4px;
}

.section-rd {
  border-radius: var(--section-rd) !important;
}

.bg-color-dark-1 {
  background-color: var(--color-dark-1) !important;
}
.bg-color-dark-2 {
  background-color: var(--color-dark-2) !important;
}
.bg-color-dark-3 {
  background-color: var(--color-dark-3) !important;
}
.bg-color-dark-4 {
  background-color: var(--color-dark-4) !important;
}
.bg-color-light {
  background-color: var(--color-light) !important;
}
.bg-color-gray-1 {
  background-color: var(--color-gray-1) !important;
}
.bg-color-gray-2 {
  background-color: var(--color-gray-2) !important;
}
.bg-color-gray-3 {
  background-color: var(--color-gray-3) !important;
}
.bg-color-gray-4 {
  background-color: var(--color-gray-4) !important;
}
.bg-color-primary-1 {
  background-color: var(--color-primary-1) !important;
}
.bg-color-primary-2 {
  background-color: var(--color-primary-2) !important;
}
.bg-color-primary-3 {
  background-color: var(--color-primary-3) !important;
}
.bg-color-primary-4 {
  background-color: var(--color-primary-4) !important;
}
.bg-color-primary-5 {
  background-color: var(--color-primary-5) !important;
}
.bg-color-primary-6 {
  background-color: var(--color-primary-6) !important;
}
.bg-color-error {
  background-color: var(--color-error) !important;
}
.bg-color-success {
  background-color: var(--color-success) !important;
}
.bg-color-warning {
  background-color: var(--color-warning) !important;
}

.color-dark-1 {
  color: var(--color-dark-1) !important;
}
.color-dark-2 {
  color: var(--color-dark-2) !important;
}
.color-dark-3 {
  color: var(--color-dark-3) !important;
}
.color-dark-4 {
  color: var(--color-dark-4) !important;
}
.color-error {
  color: var(--color-error) !important;
}
.color-success {
  color: var(--color-success) !important;
}
.color-warning {
  color: var(--color-warning) !important;
}
.color-gray-1 {
  color: var(--color-gray-1) !important;
}
.color-gray-2 {
  color: var(--color-gray-2) !important;
}
.color-gray-3 {
  color: var(--color-gray-3) !important;
}
.color-gray-4 {
  color: var(--color-gray-4) !important;
}
.color-light {
  color: var(--color-light) !important;
}
.color-primary-1 {
  color: var(--color-primary-1) !important;
}
.color-primary-2 {
  color: var(--color-primary-2) !important;
}
.color-primary-3 {
  color: var(--color-primary-3) !important;
}
.color-primary-4 {
  color: var(--color-primary-4) !important;
}
.color-primary-5 {
  color: var(--color-primary-5) !important;
}

.Satoshi {
  font-family: "Satoshi", sans-serif !important;
}

.SatoshiLight {
  font-family: "Satoshi Light", sans-serif !important;
}

.SatoshiMedium {
  font-family: "Satoshi Medium", sans-serif !important;
}

.SatoshiBold {
  font-family: "Satoshi Bold", sans-serif !important;
}

.DrukWideBold {
  font-family: "Druk Wide Bold", sans-serif !important;
}

.input-rd {
  border-radius: var(--input-rd) !important;
}

.btn-rd {
  border-radius: var(--btn-rd) !important;
}

.card-rd {
  border-radius: var(--card-rd) !important;
}

.section-rd {
  border-radius: var(--section-rd) !important;
}

.text-xs {
  font-size: var(--font-xs-size) !important;
}

.text-sm {
  font-size: var(--font-sm-size) !important;
}

.text-base {
  font-size: var(--font-base-size) !important;
}

.text-md {
  font-size: var(--font-md-size) !important;
}

.text-lg {
  font-size: var(--font-lg-size) !important;
}

.cursor-pointer {
  cursor: pointer !important;
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease-out;
  will-change: opacity, transform;
  animation-duration: 1.5s;
}