/* Importing the font from Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");

* {
  list-style: none;
  text-decoration: none !important;
}

/* Base root font sizes */
:root {
  --font-sm: 14px;
  --font-base: 16px;
  --font-md: 18px;
  --font-lg: 20px;
  --font-2lg: 32px;
  --font-xl: 40px;
  --font-2xl: 54px;
  --color-black: #000;
  --color-light-white: #fcfeff;
  --color-primary: #585858;
  --color-orange: #ef7f1b;
  --color-light-green: #93C137;
  --accordion-green:#ecf7cb;
  --color-smoky-black: #070707;
}

/* Apply the font family globally */
body {
  font-family: "Raleway", sans-serif;
  font-size: var(--font-base);
}

.ff_poppins {
  font-family: "poppins", "sans-serif";
}

/* color */
.text_primary {
  color: var(--color-primary);
}

.text_black {
  color: var(--color-black);
}

.text_orange {
  color: var(--color-orange) !important;
}
.text_smoky_black {
  color: var(--color-smoky-black);
}

.orange_gradient {
  background: linear-gradient(186.46deg, #ef7f1b 42.29%, #fcc300 121.19%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* background color  */
.bg_light_white {
  background-color: var(--color-light-white);
}
.bg_light_green{
  background-color: var(--color-light-green);
}
/* Font size utility classes */
.fs_sm {
  font-size: var(--font-sm);
}

.fs_base {
  font-size: var(--font-base);
}

.fs_md {
  font-size: var(--font-md);
}

.fs_lg {
  font-size: var(--font-lg);
}
.fs_2lg {
  font-size: var(--font-2lg);
}

.fs_xl {
  font-size: var(--font-xl);
}

.fs_2xl {
  font-size: var(--font-2xl);
}
/* common  */
.lh_190 {
  line-height: 190%;
}
.lh_150{
  line-height: 150%;
}
/* Media queries for different screen sizes */

/* For screens smaller than 992px */

@media (max-width: 992px) {
  :root {
    --font-sm: 14px;
    --font-base: 16px;
    --font-md: 18px;
    --font-lg: 20px;
    --font-xl: 38px;
    --font-2xl: 48px;
  }
}

/* For screens smaller than 786px */
@media (max-width: 786px) {
  :root {
    --font-sm: 13px;
    --font-base: 15px;
    --font-md: 17px;
    --font-lg: 19px;
    --font-xl: 34px;
    --font-2xl: 44px;
  }
}

/* For screens smaller than 576px */

@media (max-width: 575px) {
  :root {
    --font-sm: 12px;
    --font-base: 14px;
    --font-md: 16px;
    --font-lg: 18px;
    --font-xl: 30px;
    --font-2xl: 40px;
  }
}
