/* ===============================
   POPPINS FONT
================================ */

@font-face {
  font-family: 'Poppins';
  src: url('../assets/font-family/Poppins/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../assets/font-family/Poppins/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../assets/font-family/Poppins/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===============================
   INTER FONT
================================ */

@font-face {
  font-family: 'Inter';
  src: url('assets/font-family/Inter/static/Inter-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('assets/font-family/Inter/static/Inter-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('assets/font-family/Inter/static/Inter-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===============================
   GLOBAL RESET
================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

/* ===============================
   ROOT VARIABLES (COMMON)
================================ */

:root {
  --font-primary: 'Poppins', sans-serif;
  --font-secondary: 'Inter', sans-serif;

  --black-color: #000;
  --green-color: #2BAE70;
  --white-color: #ffffff;
  --placeholder-color: #858585;
  --label-color: #1C1C1C;

  --fs-heading: 39px;
  --fs-label: 23px;
  --fs-text: 16px;
}

/* ===============================
   COMMON TYPOGRAPHY
================================ */

body {
  font-family: var(--font-primary);
  color: var(--black-color);
  font-weight: 400;
}

body.modal-open {
  overflow: hidden;
}

h1 {
  font-family: var(--font-secondary);
  font-size: var(--fs-heading);
  font-weight: 700;
}

label {
  font-family: var(--font-primary);
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--black-color);
  display: block;
  margin-bottom: 18px;
}

.subtitle {
  font-family: var(--font-primary);
  font-size: var(--fs-label);
  font-weight: 400;
  color: var(--black-color);
}

/* Example secondary font usage */
/* .subtitle,
.logo {
  font-family: var(--font-secondary);
} */


button{
    width: 100%;
    border: none;
    cursor: pointer;
}

.green-btn{
    font-size: 23px;
    font-weight: 400;
    color: var(--white-color);
    font-family: var(--font-primary);
    background: var(--green-color);
    height: 60px;
    border-radius: 10px;
}

.black-btn{
    width: 88px;
    height: 31px;
    background-color: var(--black-color);
    color:var(--white-color);
    font-size: 14px;
    font-weight: 600;
    font-family: 'Roboto',var(--font-primary);
    border-radius: 5px;
}