/* ===============================
   Google Fonts
================================= */
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500&family=Golos+Text:wght@500&display=swap');

/* ===============================
   Color Variables
================================= */
:root {
  --black-100: #313030;
  --black-200: #232323;
  --white: #FFFFFF;
  --gray: #A6A6A6;
  --blue: #50B3DE;
  --light-blue-100: #EBF3F8;
  --light-blue-200: #E4F6FA;
  --light-blue-300: #D5F1F7;

  --text-black: #313030;
  --text-white: #F9FAFF;
  --text-gray: #838383;
  --text-blue: #50B3DE;
}

/* ===============================
   Utility Classes: Backgrounds
================================= */
.bg-black-100 { background-color: var(--black-100); }
.bg-black-200 { background-color: var(--black-200); }
.bg-white { background-color: var(--white); }
.bg-gray { background-color: var(--gray); }
.bg-blue { background-color: var(--blue); }
.bg-light-blue-100 { background-color: var(--light-blue-100); }
.bg-light-blue-200 { background-color: var(--light-blue-200); }
.bg-light-blue-300 { background-color: var(--light-blue-300); }

/* ===============================
   Utility Classes: Text Colors
================================= */
.text-black { color: var(--text-black); }
.text-white { color: var(--text-white); }
.text-gray { color: var(--text-gray); }
.text-blue { color: var(--text-blue); }

/* ===============================
   Utility Classes: Border Radius
================================= */
.rounded-12 { border-radius: 12px; }

/* ===============================
   Typography: Body Text
================================= */
.body-medium {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: var(--text-black);
}

.responsive-body {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: var(--text-black);
}

.responsive-bodyX {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: var(--text-black);
}

.responsive-body-label {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  color: var(--text-black);
}

.responsive-hld {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 100%;
  color: var(--text-black);
}

.main-title {
  font-family: 'Golos Text', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 130%;
  color: var(--text-black);
}

@media (min-width: 768px) {
  .responsive-body {
    font-family: 'Fira Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    color: var(--text-black);
  }

  .responsive-bodyX {
    font-family: 'Fira Sans', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 150%;
    color: var(--text-black);
  }

  .responsive-body-label {
    font-family: 'Fira Sans', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 100%;
    color: var(--text-black);
  }
  
  .responsive-hld {
    font-family: 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 130%;
    color: var(--text-black);
  }

  .main-title {
    font-family: 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 44px;
    line-height: 120%;
    color: var(--text-black);
  }
}

@media (min-width: 1226px) {
.main-title {
    font-family: 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: 60px;
    line-height: 120%;
    color: var(--text-black);
  }
}

.body-large {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 150%;
  color: var(--text-black);
}

.body-xlarge {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 150%;
  color: var(--text-black);
}

/* ===============================
   Typography: Buttons
================================= */
.button-medium {
  font-family: 'Golos Text', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  color: var(--text-black);
}

/* ===============================
   Typography: Headers
================================= */
.h1 {
  font-family: 'Golos Text', sans-serif;
  font-weight: 500;
  font-size: 60px;
  line-height: 120%;
  color: var(--text-black);
}

.h2 {
  font-family: 'Golos Text', sans-serif;
  font-weight: 500;
  font-size: 44px;
  line-height: 120%;
  color: var(--text-black);
}

.h3 {
  font-family: 'Golos Text', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 130%;
  color: var(--text-black);
}

.h4 {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 100%;
  color: var(--text-black);
}