@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lexend+Deca:wght@100..900&display=swap");

/* =====> 

Fonts:
1. font-family: "Figtree", serif;
2. font-family: "Lexend Deca", serif;
3. font-family: "Inter", serif;

<===== */

/* =====> Resetting styles <===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Figtree", serif;
}

:root {
  --primary-bg: #fbfbfb;
  --primary-text: black;
  --secondary-bg: #c6e7ff;
  --secondary-text: #304463;
  --ternary: #1f316f;
  --ternary-text: white;
  --foreground: #58b4cd;
  /* --primary-color: #5cb338; */
  --primary-color: #1aa080;
  --gradiant: linear-gradient(0deg, #12daaa, #1a9a7c);
}

body {
  margin-bottom: 100px;
  color: var(--primary-color);
}

/* =====> theme color for dark mode <===== */
body.dark {}

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

.color_primary{
  color: var(--primary-color);
}


ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

p {
  margin-bottom: 0;
}

p,
a,
li {
  /* font-size: 17px; */
}

/* =====>
heading/h tag
<======
 */
h1 {
  font-size: 60px;

  @media (width < 768px) {
    font-size: 45px;
  }
}

h2 {
  font-size: 55px;
  font-weight: 600;

  @media (width < 768px) {
    font-size: 35px;
  }
}

/* =====> custome classes <===== */
.max_container {
  max-width: 1540px;
  margin: 0 auto;
}

.inner_max_width {
  max-width: 1200px;
  margin: 0 auto !important;
}

.max_w_900{
  max-width: 900px;
}