/* Custom Properties */


/* =====================Par 2--------------------------- */

:root {
  /* color */
  --clr-gray: 0 0% 86.3%;
  --clr-gray-light: 0 0% 93.3%;
  --clr-red: 356.7 90.1% 56.5%;
  --clr-black: 0 0% 21.2%;
  --clr-yellow: 43.8 99% 58.8%;
  --clr-very-light-gray: 300 2.7% 92.7%;
  --clr-green: 144.3 64.4% 49.6%;
  --clr-blue: 214.5 100% 53.9%;
  --clr-white: 0 0% 100%;

  /* font-size */
  /* --fs-bf-194: 12.125rem; */
  --fs-bf-194: 12.3vw;
  --fs-bf-109: 6.8125rem;
  --fs-bf-65: 4.065rem;
  --fs-bf-80: 5rem;
  --fs-bf-50: 3.125rem;
  --fs-bf-45: 2.8125rem;
  --fs-bf-30: 1.875rem;
  --fs-bf-20: 1.25rem;
  --fs-bf-16: 1rem;
  --fs-bf-15: 0.9375rem;

  /* font family */
  --font-montserrat: "Montserrat", sans-serif;
  --font-poppins: "Poppins", sans-serif;
}

@media (max-width: 35em){
  :root {
    --fs-bf-194: 12.3vw;
    --fs-bf-109: 6.8125rem;
    --fs-bf-65: 4.065rem;
    --fs-bf-80: 5rem;
    --fs-bf-50: 3.125rem;
    --fs-bf-45: 2.8125rem;
    --fs-bf-30: 1.875rem;
    --fs-bf-20: 1rem;
    --fs-bf-16: 0.8rem;
    --fs-bf-15: 0.8rem;
  }
}

/* ==============Defaul reset--------------------------- */

*,
*::after,
*::before{
  box-sizing: border-box;
}

/* =======Removing default margin--------------------------- */

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd{
  margin: 0;
}

/* =======Removing list style--------------------------- */

ul[role="list"],
ol[role="list"]{
  list-style: none;
}

/* =======set core root default--------------------------- */

html:focus-within{
  scroll-behavior: smooth;
}

/* =======set core body default--------------------------- */

body{
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* =======A element dont have a class get default style- */

a:not([class]){
  text-decoration-skip-ink: auto;
}

/* =======make image easier to work with- */

img,
picture{
  max-width: 100%;
  display: block;
}

@media (min-width: 35em) and (max-width: 59em) {
  :root {
    --fs-bf-194: 12.3vw;
    --fs-bf-109: 6.8125rem;
    --fs-bf-65: 4.065rem;
    --fs-bf-80: 5rem;
    --fs-bf-50: 3.125rem;
    --fs-bf-45: 2.8125rem;
    --fs-bf-30: 2.55rem;
    --fs-bf-20: 1.25rem;
    --fs-bf-16: 1rem;
    --fs-bf-15: 0.8375rem;
  }
}

/* =======inherit fonts for inputs and button- */

input,
button,
textarea,
select{
  font: inherit;
}

::-webkit-scrollbar{
  display: none;
}

/* =======remove all animation,transition and smooth scroll fro people that prefer not to see them- */

@media (prefers-reduced-motion: reduce) {
  html:focus-within{
    scroll-behavior: auto;
  }

  *,
  *::after,
  *::before{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01s !important;
    scroll-behavior: auto !important;
  }
}

/* =======End of General reset- */

/* =======- */

/* some important utility class */
/* ======================================== */

body{
  overflow-x: hidden;
}

/*backgrouynd-color utility class*/

.bg-red {background-color: hsl(var(--clr-red));}
.bg-black {background-color: hsl,(var(--clr-black));}
.bg-blue {background-color: hsl,(var(--clr-blue));}
.bg-gray {background-color: hsl(var(--clr-gray));}
.bg-green {background-color: hsl,(var(--clr-green));}
.bg-gray-light {background-color: hsl(var(--clr-gray-light));}
.bg-very-light-gray {background-color: hsl(var(--clr-very-light-gray));}
.bg-white {background-color: hsl(var(--clr-white));}
.bg-yellow {background-color: hsl(var(--clr-yellow));}


/*text utility class*/

.text-red {background-color: hsl(var(--clr-red));}
.text-black {background-color: hsl,(var(--clr-black));}
.text-blue {background-color: hsl,(var(--clr-blue));}
.text-gray {background-color: hsl(var(--clr-gray));}
.text-green {background-color: hsl,(var(--clr-green));}
.text-gray-light {background-color: hsl(var(--clr-gray-light));}
.text-very-light-gray {background-color: hsl(var(--clr-very-light-gray));}
.text-white {background-color: hsl(var(--clr-white));}
.text-yellow {background-color: hsl(var(--clr-yellow));}

/*font size*/

.fs-900{font-size: var(--fs-bf-194);}
.fs-800{font-size: var(--fs-bf-109);}
.fs-700{font-size: var(--fs-bf-80);}
.fs-600{font-size: var(--fs-bf-65);}
.fs-500{font-size: var(--fs-bf-50);}
.fs-400{font-size: var(--fs-bf-45);}
.fs-300{font-size: var(--fs-bf-30);}
.fs-200{font-size: var(--fs-bf-20);}
.fs-100{font-size: var(--fs-bf-16);}
.fs-500{font-size: var(--fs-bf-15);}


/*font bold*/

.bold-100{font-weight: 100;}
.bold-200{font-weight: 200;}
.bold-300{font-weight: 300;}
.bold-400{font-weight: 400;}
.bold-500{font-weight: 500;}
.bold-600{font-weight: 600;}
.bold-700{font-weight: 700;}
.bold-800{font-weight: 800;}
.bold-900{font-weight: 900;}
.bold-bold{font-weight: bold;}
.bold-bolder{font-weight: bolder;}

/* =======font family====== */

.fs-poppins{font-family: 'Poppins', sans-serif;}
.fs-montserrat{font-family: "Montserrat", sans-serif;}


/* =======End of utility class- */

/* =======component utility class====== */

.uis{
  cursor: pointer;

.flex{
    display: flex;
    gap: var(--flex-gap, 1rem);
  }
.grid{
    display: grid;
    gap: var(--flex-gap, 1rem);
  }
.container{
    width: 96vw;
    margin-inline: auto;
    padding-inline: 2rem;
  }
}

/* =======end of utility class====== */