@import url("/assets/source/css/root-font.css");

/* add root css code here  */
:root {
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 40px;
  --fs-3xl: 48px;
  --fs-4xl: 64px;
  --white: #ffffff;
  --light-blue: #0d76ff;
  --light-green: #37eebc;
  --grey: #5f5f5f;
  --black: #010101;
  --gredient: linear-gradient(103.58deg, #0078ff 6.83%, #37eebc 109.09%);
  --dark-blue: #001429;
  --dark_grey: #0f3547;
  --gredirnt-2: linear-gradient(
    103.58deg,
    rgba(0, 120, 255, 0.1) 6.83%,
    rgba(0, 243, 185, 0.1) 109.09%
  );
  --off-white: #dcdcdc;
}

body {
  font-family: "Open Sans", sans-serif;
}

/*====Font-Size=====*/
.fs_sm {
  font-size: var(--fs-sm);
}

.fs_md {
  font-size: var(--fs-md);
}

.fs_lg {
  font-size: var(--fs-lg);
}

.fs_xl {
  font-size: var(--fs-xl);
}

.fs_2xl {
  font-size: var(--fs-2xl);
}

.fs_3xl {
  font-size: var(--fs-3xl);
}

.fs_4xl {
  font-size: var(--fs-4xl);
}

/*======Color======*/
.text_white {
  color: var(--white);
}

.text_black {
  color: var(--black);
}

.text_light_blue {
  color: var(--light-blue);
}

.text_light_green {
  color: var(--light-green);
}

.text_grey {
  color: var(--grey);
}

.background_gredient {
  background: var(--gredient);
}

.background_gredient_2 {
  background: var(--gredirnt-2);
}

.background_dark_blue {
  background-color: var(--dark-blue);
}
.text_off_white {
  color: var(--off-white);
}

.dark_grey {
  background: var(--dark_grey);
}
.leading_100 {
  line-height: 100%;
}
.leading_110 {
  line-height: 110%;
}
.leading_120 {
  line-height: 120%;
}
.leading_130 {
  line-height: 130%;
}
.leading_140 {
  line-height: 140%;
}
.leading_150 {
  line-height: 150%;
}
.leading_160 {
  line-height: 160%;
}
.pointer_event_none {
  pointer-events: none;
}
.common_transition {
  transition: all 300ms linear;
}
.fw-bolder {
  font-weight: 800 !important;
}
@media (max-width: 1199px) {
  :root {
    --fs-4xl: 56px;
  }
}
@media (max-width: 992px) {
  :root {
    --fs-xl: 22px;
    --fs-2xl: 35px;
    --fs-3xl: 42px;
  }
}

@media (max-width: 768px) {
  :root {
    --fs-sm: 10px;
    --fs-md: 14px;
    --fs-lg: 16px;
    --fs-xl: 20px;
    --fs-2xl: 30px;
    --fs-3xl: 35px;
    --fs-4xl: 58px;
  }
}

@media (max-width: 512px) {
  :root {
    --fs-sm: 12px;
    --fs-md: 14px;
    --fs-lg: 16px;
    --fs-xl: 22px;
    --fs-2xl: 25px;
    --fs-3xl: 30px;
    --fs-4xl: 35px;
  }
}

@media (max-width: 575.98px) {
  .container {
    padding-left: 16px !important ;
    padding-right: 16px !important ;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1140px !important;
    padding-left: 0 !important ;
    padding-right: 0 !important ;
  }
}