.custom-btn {
  width: fit-content;
  height: fit-content;
  color: #ffffff !important;
  background-color: #d77f09 !important;
  border-color: #d77f09 !important;
}

.custom-btn-outline {
  color: var(--color-center-leaf) !important;
  border-color: var(--color-center-leaf) !important;
}

.custom-btn-outline:hover {
  background-color: var(--color-center-leaf) !important;
  color: var(--light) !important;
  border-color: var(--color-center-leaf) !important;
  transition: all;
}

:root {
  --color-primary-blue: #04346f;
  --color-leaf-teal-1: #06728c;
  --color-leaf-teal-2: #028a71;
  --color-leaf-blue: #2278A5;
  --color-orange-head: #d35b0e;
  --color-center-leaf: #d77f09;
  --color-warm-beige: #FFF9F1;
  --color-dark-charcoal: #1D1D1D;
  --color-white: #FFFFFF;

  --color-text-body: var(--color-dark-charcoal);
  --color-heading: var(--color-primary-blue);
  --color-background: var(--color-warm-beige);
  --color-card-bg: var(--color-white);
  --color-cta: var(--color-center-leaf);
  --color-hover: var(--color-leaf-blue);
  --color-accent: var(--color-leaf-teal-1);

  --primary: var(--color-cta);
  --light: #FFF5F3;
  --dark: #103741;

  --grade-1: #FFD93D;
  --grade-2: #FF7E5F;
  --grade-3: #48C9B0;
  --grade-4: #A084DC;
  --grade-5: #FF5C8A;
  --grade-6: #57C5F7;
  --grade-7: #4eaf6e;
  --grade-8: #FF6F61;

}


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

.text-leaf-teal-1 {
  color: var(--color-leaf-teal-1) !important;
}

.text-leaf-teal-2 {
  color: var(--color-leaf-teal-2) !important;
}

.text-leaf-blue {
  color: var(--color-leaf-blue) !important;
}

.text-orange-head {
  color: var(--color-orange-head) !important;
}

.text-center-leaf {
  color: var(--color-center-leaf) !important;
}

.text-warm-beige {
  color: var(--color-warm-beige) !important;
}

.text-dark-charcoal {
  color: var(--color-dark-charcoal) !important;
}

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

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

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

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

.bg-leaf-teal-1 {
  background-color: var(--color-leaf-teal-1) !important;
}

.bg-leaf-teal-2 {
  background-color: var(--color-leaf-teal-2) !important;
}

.bg-leaf-blue {
  background-color: var(--color-leaf-blue) !important;
}

.bg-orange-head {
  background-color: var(--color-orange-head) !important;
}

.bg-center-leaf {
  background-color: var(--color-center-leaf) !important;
}

.bg-warm-beige {
  background-color: var(--color-warm-beige) !important;
}

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

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

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

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

/* Grade Background Colors */
.bg-grade-1 {
  background-color: var(--grade-1) !important;
}

.bg-grade-2 {
  background-color: var(--grade-2) !important;
}

.bg-grade-3 {
  background-color: var(--grade-3) !important;
}

.bg-grade-4 {
  background-color: var(--grade-4) !important;
}

.bg-grade-5 {
  background-color: var(--grade-5) !important;
}

.bg-grade-6 {
  background-color: var(--grade-6) !important;
}

.bg-grade-7 {
  background-color: var(--grade-7) !important;
}

.bg-grade-8 {
  background-color: var(--grade-8) !important;
}

/* Grade Text Colors */
.text-grade-1 {
  color: var(--grade-1) !important;
}

.text-grade-2 {
  color: var(--grade-2) !important;
}

.text-grade-3 {
  color: var(--grade-3) !important;
}

.text-grade-4 {
  color: var(--grade-4) !important;
}

.text-grade-5 {
  color: var(--grade-5) !important;
}

.text-grade-6 {
  color: var(--grade-6) !important;
}

.text-grade-7 {
  color: var(--grade-7) !important;
}

.text-grade-8 {
  color: var(--grade-8) !important;
}


/* Grade btn outline Colors */

.btn-outline-grade-1 {
  color: var(--grade-1) !important;
  border-color: var(--grade-1) !important;
}

.btn-outline-grade-2 {
  color: var(--grade-2) !important;
  border-color: var(--grade-2) !important;
}

.btn-outline-grade-3 {
  color: var(--grade-3) !important;
  border-color: var(--grade-3) !important;
}

.btn-outline-grade-4 {
  color: var(--grade-4) !important;
  border-color: var(--grade-4) !important;
}

.btn-outline-grade-5 {
  color: var(--grade-5) !important;
  border-color: var(--grade-5) !important;
}

.btn-outline-grade-6 {
  color: var(--grade-6) !important;
  border-color: var(--grade-6) !important;
}

.btn-outline-grade-7 {
  color: var(--grade-7) !important;
  border-color: var(--grade-7) !important;
}

.btn-outline-grade-8 {
  color: var(--grade-8) !important;
  border-color: var(--grade-8) !important;
}

/* =========== end all common colors css =========== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  background-color: var(--color-background);
  color: var(--color-text-body);
  font-family: 'Poppins', sans-serif;
  overflow-x: hidden;
}

.text-cursive,
.quote,
.highlight-text {
  font-family: 'Caveat', cursive !important;
  color: var(--color-cta);
}

.button-primary {
  background-color: var(--color-cta);
  color: var(--color-white);
}

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


h1,
h2,
h3,
h4 {
  font-family: 'Fredoka', sans-serif;
  color: #1F3C78;
}

.quote,
.highlight-text {
  font-family: 'Caveat', cursive;
  color: #F47B20;
}

.navbar-light .navbar-brand:hover,
.navbar-light .navbar-brand:focus {
  color: transparent !important;
}

.navbar-light .navbar-brand {
  color: transparent !important;
}


.character-wrap.char-1 {
  position: fixed;
  bottom: 0;
  left: 55px;
  z-index: 1000;
  pointer-events: none;
  opacity: 1;
  transition: bottom 0.3s ease;
}


.character-wrap.char-1 .character {
  width: 100px;
  transform: translateY(-100vh); /* initial off-screen top */
  transition: transform 1s ease-in-out;
  opacity: 1;
}

/* Step 1: Drop from top */
.character-wrap.char-1.drop .character {
  transform: translate(0, 0); /* drop to visible */
}

/* Step 2: Left to right */
.character-wrap.char-1.left-to-right .character {
  transform: translate(80vw, 0);
}

/* Step 3: Right to left */
.character-wrap.char-1.right-to-left .character {
  transform: translate(0vw, 0);
}

.character-wrap.char-1.stick-above-footer {
  position: absolute !important;
  left: 55px;
}

@media (max-width:768px) {
  .character-wrap.char-1 {
    left: 5px !important; 
  }

  .character-wrap.char-1 .character {
    width: 60px;
  }
}

@media (min-width:768px) and (max-width:991px) {
  .character-wrap.char-1 {
    left: 25px !important; 
  }

  .character-wrap.char-1 .character {
    width: 80px;
  }
}

@media (max-width:991px) {
  /* Step 1: Drop from top */
  .character-wrap.char-1.drop .character {
    transform: translate(0, 0);
  }

  /* Step 2: Left to right */
  .character-wrap.char-1.left-to-right .character {
    transform: translate(0vw, 0);
  }

  /* Step 3: Right to left */
  .character-wrap.char-1.right-to-left .character {
    transform: translate(0vw, 0);
  }

  .character-wrap.char-1.stick-above-footer {
    position: absolute !important;
    left: 55px;
  }

}