:root {
  --primary: #185fff;
  --heading: #0b2352;
  --yellow: #f3fb1d;
  --emas: #FFBF00;
  --p-pendek: #5f7298;
  --p-panjang: #4f5e7c;
  --blue-soft-1: #f5f8ff;
  --blue-soft-2: #e1ebff;
  --text-element: #8899bb;
  --ambience-3: #d5dff4;
  --bg-foot: #22273c;
  --bg-white: #ffffff;
  --black: #262626;
  --element: #89B;
  --ambiance-2: #F8F8FA;
  --emas :#FFBF00;
}

/* Font Family */
.font-poppins {
  font-family: "Poppins", sans-serif;
}

.font-nunito {
  font-family: "Nunito Sans", sans-serif;
}

/* font-weight */
.fw-300 {
  font-weight: 300;
}
.fw-400 {
  font-weight: 400;
}
.fw-500 {
  font-weight: 500;
}
.fw-600 {
  font-weight: 600;
}
.fw-700 {
  font-weight: 700;
}
.fw-800 {
  font-weight: 800;
}

/* Text Color */
.color-blue {
  color: var(--primary);
}
.color-emas{
  color: var(--emas);
}
.color-heading {
  color: var(--heading);
}

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

.color-yellow{
    color: var(--yellow);
}

.color-text-element{
    color: var(--text-element);
}

.color-para-pendek{
    color: var(--p-pendek);
}

.color-para-panjang{
  color: var(--p-panjang);
}

.color-emas{
    color: var(--emas);
}

.color-element{
    color: var(--element);
}

.color-ambiance-2{
  color: var(--ambiance-2);
}

/* Font Size */
.font-9 {
    font-size: 9px !important;
}
.font-14 {
    font-size: 14px !important;
}
.font-16 {
  font-size: 16px;
}

.font-18 {
  font-size: 18px;
}

.font-20{
    font-size: 20px;
}

.font-23{
    font-size: 23px;
}

.font-25{
    font-size: 25px;
}

.font-26{
    font-size: 26px;
}

.font-30{
    font-size: 30px;
}

.font-32{
    font-size: 32px;
}

.font-40{
    font-size: 40px;
}

.font-60 {
  font-size: 53px;
}


@media (max-width: 768px){
  .font-14 {
    font-size: 14px !important;
  }
  .font-16 {
    font-size: 14px !important; 
  }
  .font-18 {
    font-size: 18px !important;
  }
  .font-20 {
    font-size: 18px !important;
  }
  .font-25{
    font-size: 19px !important;
  }
  .font-30 {
    font-size: 20px !important;
  }
  .font-32 {
    font-size: 22px !important;
  }
  .font-35 {
    font-size: 24px !important;
  }
  .font-46 {
    font-size: 26px !important;
  }
  .font-40{
    font-size: 25px !important;
  }
  .font-60 {
    font-size: 30px !important;
  }
}