@font-face {
  font-family: 'Inter';
  src: url('https://lms.gift.edu.pk/assets/fonts/Inter_18pt-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('https://lms.gift.edu.pk/assets/fonts/Inter_18pt-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('https://lms.gift.edu.pk/assets/fonts/Inter_18pt-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
    --brand-primary: #1D3E72;
    --brand-button-color: #1d3e73;
    --brand-gray: #c7c7c7;
    --bg-dark-gray:#f1f2f3;
    --brand-yellow: #FDB816;

    /* Font sizes */
    --fs-brand-xs: 12px;
    --fs-brand-sm: 14px;
    --fs-brand-base: 16px;
    --fs-brand-18: 18px;
    --fs-brand-20: 20px;
    --fs-brand-22: 22px;
    --fs-brand-24: 24px;
    --fs-brand-30: 30px;
    --fs-brand-32: 32px;
    --fs-brand-36: 36px;
    /* Font Families */
    --font-primary: 'Inter';
}

/* Background */
.bg-brand {
    background-color: var(--brand-primary) !important;
}

.btn-bg-brand {
    background-color: var(--brand-button-color) !important;
}

/* Text colors */
.text-brand {
    color: var(--brand-primary) !important;
}

.font-inter {
    font-family: var(--font-primary) !important;
}

.text-gray {
    color: var(--brand-gray) !important;
}

.bg-gray{
    background-color: var(--bg-dark-gray) !important;
}

.text-yellow {
    color: var(--brand-yellow) !important;
}

/* Font sizes */
.fs-brand-sm {
    font-size: var(--fs-brand-xs) !important;
}


@media (min-width: 800px) {
    .fs-brand-sm {
        font-size: var(--fs-brand-sm) !important;
    }
}

.fs-brand-base {
    font-size: var(--fs-brand-xs) !important;
}

@media (min-width: 992px) {
    .fs-brand-base {
        font-size: var(--fs-brand-sm) !important;
    }
}

@media (min-width: 1400px) {
    .fs-brand-base {
        font-size: var(--fs-brand-base) !important;
    }
}


.fs-brand-main-heading {
    font-size: var(--fs-brand-24) !important;
}
.fs-brand-32{
    font-size: var(--fs-brand-20) !important;
}

.fs-brand-24 {
    font-size: var(--fs-brand-20) !important;
}
.fs-brand-22 {
    font-size: var(--fs-brand-base) !important;
}
.fs-brand-20{
    font-size: var(--fs-brand-16) !important;
}
.fs-brand-18 {
    font-size: var(--fs-brand-18) !important;
}
.fs-brand-xs {
    font-size: var(--fs-brand-xs) !important;
}
@media (min-width: 800px) {
    .fs-brand-main-heading {
        font-size: var(--fs-brand-30) !important;
    }
    .fs-brand-32{
        font-size: var(--fs-brand-24) !important;
    }
    .fs-brand-22 {
        font-size: var(--fs-brand-18) !important;
    }
    .fs-brand-24 {
        font-size: var(--fs-brand-22) !important;
    }
    .fs-brand-20{
        font-size: var(--fs-brand-18) !important;
    }
}

@media (min-width: 992px) {
    .fs-brand-main-heading {
        font-size: var(--fs-brand-36) !important;
    }
    .fs-brand-32{
        font-size: var(--fs-brand-32) !important;
    }
    .fs-brand-24 {
        font-size: var(--fs-brand-24) !important;
    }
    .fs-brand-22 {
        font-size: var(--fs-brand-22) !important;
    }
    .fs-brand-20{
        font-size: var(--fs-brand-20) !important;
    }
}

/* Animations */

/* Animation classes */
/* Base animation classes */
.animate-on-scroll,
.animate-scale,
.animate-from-bottom,
.animate-from-top,
.animate-from-left,
.animate-from-right {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* When animated class is added */
.animate-on-scroll.animated,
.animate-from-bottom.animated,
.animate-from-top.animated,
.animate-from-left.animated,
.animate-from-right.animated {
    opacity: 1;
}

/* Specific transform properties for each direction */
.animate-from-bottom {
    transform: translateY(30px);
}
.animate-from-bottom.animated {
    transform: translateY(0);
}

.animate-from-top {
    transform: translateY(-30px);
}
.animate-from-top.animated {
    transform: translateY(0);
}

.animate-from-left {
    transform: translateX(-30px);
}
.animate-from-left.animated {
    transform: translateX(0);
}

.animate-from-right {
    transform: translateX(30px);
}
.animate-from-right.animated {
    transform: translateX(0);
}

/* Scale animation */
.animate-scale {
    transform: scale(0.9);
}
.animate-scale.animated {
    transform: scale(1);
}

/* Stagger animation */
.stagger {
    opacity: 0;
    transform: translateY(30px);
}

.stagger.animated {
    animation: fadeUp 0.5s ease forwards;
}

/* Stagger delays - only apply when .animated class is present */
.stagger.animated:nth-of-type(1) { animation-delay: 0.1s; }
.stagger.animated:nth-of-type(2) { animation-delay: 0.2s; }
.stagger.animated:nth-of-type(3) { animation-delay: 0.3s; }
.stagger.animated:nth-of-type(4) { animation-delay: 0.4s; }
.stagger.animated:nth-of-type(5) { animation-delay: 0.5s; }
.stagger.animated:nth-of-type(6) { animation-delay: 0.6s; }
.stagger.animated:nth-of-type(7) { animation-delay: 0.7s; }
.stagger.animated:nth-of-type(8) { animation-delay: 0.8s; }
.stagger.animated:nth-child(9) { animation-delay: 0.9s; }
.stagger.animated:nth-child(10) { animation-delay: 1s; }

/* FadeUp keyframes */
@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation delays - can be combined with any animation class */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }