@font-face {
  font-family: 'Arupala Grotesk';
  src: url('../../fonts/arupala-grotesk-trial/ArupalaGroteskTrial-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Arupala Grotesk';
  src: url('../../fonts/arupala-grotesk-trial/ArupalaGroteskTrial-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Arupala Grotesk';
  src: url('../../fonts/arupala-grotesk-trial/ArupalaGroteskTrial-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Arupala Grotesk';
  src: url('../../fonts/arupala-grotesk-trial/ArupalaGroteskTrial-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Arupala Grotesk';
  src: url('../../fonts/arupala-grotesk-trial/ArupalaGroteskTrial-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap");

:root {
  --font-primary: 'Arupala Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-secondary: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;
  --font-size-4xl: 32px;
  --font-size-5xl: 40px;
  --font-size-6xl: 48px;
  
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;
}

body {
  font-family: var(--font-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: #0B0C0D;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--font-primary);
  font-weight: 600;
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: #0B0C0D;
}

h1, .h1 {
  font-size: var(--font-size-5xl);
  font-weight: 700;
}

h2, .h2 {
  font-size: var(--font-size-4xl);
  font-weight: 600;
}

h3, .h3 {
  font-size: var(--font-size-3xl);
  font-weight: 600;
}

h4, .h4 {
  font-size: var(--font-size-2xl);
  font-weight: 600;
}

h5, .h5 {
  font-size: var(--font-size-xl);
  font-weight: 500;
}

h6, .h6 {
  font-size: var(--font-size-lg);
  font-weight: 500;
}

p, .p {
  font-family: var(--font-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: #484848;
}

.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }
.text-5xl { font-size: var(--font-size-5xl); }

.font-primary { font-family: var(--font-primary); }
.font-secondary { font-family: var(--font-secondary); }

@media (max-width: 992px) {
  h1, .h1 { font-size: var(--font-size-4xl); }
  h2, .h2 { font-size: var(--font-size-3xl); }
  h3, .h3 { font-size: var(--font-size-2xl); }
  h4, .h4 { font-size: var(--font-size-xl); }
}

@media (max-width: 767px) {
  h1, .h1 { font-size: var(--font-size-3xl); }
  h2, .h2 { font-size: var(--font-size-2xl); }
  h3, .h3 { font-size: var(--font-size-xl); }
  h4, .h4 { font-size: var(--font-size-lg); }
  body { font-size: var(--font-size-sm); }
}

@media (max-width: 575px) {
  h1, .h1 { font-size: var(--font-size-2xl); }
  h2, .h2 { font-size: var(--font-size-xl); }
  h3, .h3 { font-size: var(--font-size-lg); }
}

.tab-content {
  transition: opacity 0.3s ease;
}

.tab-pane {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-header h3,
.card-header h5 {
  font-family: var(--font-primary);
}

label,
input,
select,
textarea {
  font-family: var(--font-secondary);
  font-size: var(--font-size-base);
}

button,
.cus-btn {
  font-family: var(--font-secondary);
  font-weight: 500;
}