/* font family */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
:root {
  --primary-color: #07a9eb;
  --secondary-color: #4baf52;
  --accent-color: #0e8abb;

  --heading-color: #121e23;
  --para-color: #393939;
  --text-color-white: #fff;
  --cta-color: #c9c7f2;
  --footer-link: #a7a7a7;
  --bg-color-1: #e9f1f5;
  --bg-color-2: #e7f5ed;
  --bg-color-3: #f5f5f5;
  --bg-color-4: #e5e5e5;

  --border-color-1: #e5e7eb;
  --border-color-2: #d1d5db;
  --border-color-3: #4b5563;

  --success: #28a745;
  --Error: #dc3545;
  --Warning: #ffc107;
  --Info: #17a2b8;
  --Link: #007bff;

  --heading-font: "DM Sans", sans-serif;
  --body-font: "Inter", sans-serif;
  --boot-icons: "bootstrap-icons";
  --transition: all 0.5s ease;
  --box-shadow: -1px -1px 100px 0 rgba(193, 199, 212, 0.4);
  --bg-gradient: linear-gradient(to right, rgb(7 63 47), rgb(11 71 96), rgb(7 63 47));
  --gradient:  linear-gradient(145deg,rgba(7, 169, 235, 1) 0%, rgba(75, 175, 82, 1) 100%);
  --gradient-hover: linear-gradient(145deg,rgba(75, 175, 82, 1) 0%, rgba(7, 169, 235, 1) 100%);


  /* font sizes 
  base 14px
  scale ratio 1.33
  line height 1.2 - 1.4
  */

  /* fluid scaling: min (mobile), preferred (tab), max (desktop) */
  --font-xs: clamp(9px, 1vw, 10px); /* small */
  --font-sm: clamp(10px, 1.2vw, 12px); /* caption */
  --font-md: clamp(12px, 1.3vw, 14px); /* body */
  --font-base: clamp(14px, 1.5vw, 16px); /* body large */
  --font-lg: clamp(12px, 1.5vw, 14px); /* h6 */
  --font-xl: clamp(16px, 2vw, 19px); /* h5 */
  --font-2xl: clamp(20px, 3vw, 25px); /* h4 */
  --font-3xl: clamp(26px, 4vw, 33px); /* h3 */
  --font-4xl: clamp(32px, 5vw, 44px); /* h2 */
  --font-5xl: clamp(40px, 6vw, 58px); /* h1 */
  --font-display-sm: clamp(44px, 7vw, 64px);
  --font-display-md: clamp(52px, 8vw, 72px);
  --font-display-lg: clamp(60px, 9vw, 80px);
  --font-display-xl: clamp(72px, 11vw, 96px);
}

body,
body p,
body span,
body a,
body li {
  font-family: var(--body-font);
}

body p {
  margin-bottom: 0;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  font-family: var(--heading-font);
}
h1 {
  font-size: var(--font-5xl);
}
h2 {
  font-size: var(--font-4xl);
}
h3 {
  font-size: var(--font-3xl);
}
h4 {
  font-size: var(--font-2xl);
}
h5 {
  font-size: var(--font-xl);
}
h6 {
  font-size: var(--font-lg);
}