/* Color palette */
:root {
  --bluey-green: #2db573;
  --white: #ffffff;
  --greyish-brown-two: #4b4b4b;
  --white-two: #e9e9e9;
  --purple-brown: #6c3244;
  --greyish: #ababab;
  --lipstick: #cc181e;
  --teal-blue: #0084b4;
  --denim-blue: #3b5998;
  --warm-grey: #828282;
  --greyish-two: #b0b0b0;
  --white-three: #d8d8d8;
  --white-four: #dcdcdc;
  --charcoal: #0d0e0e;
  --warm-grey-two: #838383;
  --greeny-blue: #33a89c;
  --butterscotch: #f9af40;
  --dusty-orange: #f57b49;
  --brownish-grey: #686868;
  --warm-grey-three: #7f7f7f;
  --greyish-brown: #444444;
  --dusty-orange-two: #f4703a;
  --butterscotch-two: #fab042;
  --ruby: #c80a48;
  --white-five: #f4f4f4;
  --black: #2b2b2b;
  --cool-grey: #9d9fa2;
  --marigold: #ffcb05;
  --cerise: #ed145b;
  --pinkish-red: #ed1d24;
  --bluey-green-two: #2bb673;
  --mid-green: #4f9a46;
  --cool-grey-two: #a7a9ac;
  --water-blue: #1e9fd1;
  --white-six: #fefefe;
  --white-seven: #f6f6f6;
  --greyish-brown: #444444;
  --greyish-three:#a9a9a9

}

:root {
  --section-padding: 30px 0;
  --title-normal: 36px;
  --title-lg: 48px;
  --title-md: 34px;
  --title-smd:28px;
  --title-sm: 24px;
  --title-xs: 20px;
}
@media (max-width: 1199.98px) {
  :root {
    --section-padding:30px 0;
    --title-normal:28px;
    --title-lg: 32px;
    --title-md: 26px;
    --title-smd:20px;
    --title-sm: 20px;
    --title-xs: 20px;
  }
}






/*=================Text colors css classes ================*/

.white               {color: var(--white)!important;}
.white-two           {color: var(--white-two)!important;}
.white-four          {color: var(--white-four)!important;}
.white-five          {color: var(--white-five)!important;}
.white-six           {color: var(--white-six)!important;}
.white-seven         {color: var(--white-seven)!important;}
.bluey-green         {color: var(--bluey-green) !important;}
.mid-green           {color: var(--mid-green) !important;}
.greyish-brown       {color: var(--greyish-brown) !important;}
.greyish-brown-two   {color: var(--greyish-brown-two) !important;}
.purple-brown        {color: var(--purple-brown) !important;}
.greyish             {color: var(--greyish) !important;}
.lipstick            {color: var(--lipstick) !important;}
.warm-grey           {color: var(--warm-grey) !important;}
.warm-grey-two       {color: var(--warm-grey-two) !important;}
.warm-grey-three     {color: var(--warm-grey-three) !important;}
.cool-grey           {color: var(--cool-grey)!important;}
.cool-grey-two       {color: var(--cool-grey-two)!important;}
.brownish-grey       {color: var(--brownish-grey)!important;}
.greyish-two         {color: var(--greyish-two)!important;}
.charcoal            {color: var(--charcoal)!important;}
.butterscotch        {color: var(--butterscotch)!important;}
.butterscotch-two    {color: var(--butterscotch-two)!important;}
.dusty-orange        {color: var(--dusty-orange)!important;}
.dusty-orange-two    {color: var(--dusty-orange-two)!important;}
.ruby                {color: var(--ruby) !important;}
.black               {color: var(--black)!important;}
.marigold            {color: var(--marigold)!important;}
.cerise              {color: var(--cerise)!important;}
.pinkish-red         {color: var(--pinkish-red) !important;}
.bluey-green-two     {color: var(--bluey-green-two)!important;}
.teal-blue           {color: var(--teal-blue)!important;}
.denim-blue          {color: var(--denim-blue)!important;}
.greeny-blue         {color: var(--greeny-blue) !important;}
.water-blue          {color: var(--water-blue)!important;}
.water-blue          {color: var(--water-blue)!important;}
.greyish-three       {color: var(--greyish-three)!important;}


/*=================background colors css classes ================*/

.white-bg               {background-color: var(--white);}
.white-two-bg           {background-color: var(--white-two);}
.white-four-bg          {background-color: var(--white-four);}
.white-five-bg          {background-color: var(--white-five);}
.white-six-bg           {background-color: var(--white-six);}
.white-seven-bg         {background-color: var(--white-seven);}
.bluey-green-bg         {background-color: var(--bluey-green);}
.mid-green-bg           {background-color: var(--mid-green);}
.greyish-brown-bg       {background-color: var(--greyish-brown);}
.greyish-brown-two-bg   {background-color: var(--greyish-brown-two);}
.purple-brown-bg        {background-color: var(--purple-brown);}
.greyish-bg             {background-color: var(--greyish);}
.lipstick-bg            {background-color: var(--lipstick);}
.warm-grey-bg           {background-color: var(--warm-grey);}
.warm-grey-two-bg       {background-color: var(--warm-grey-two);}
.warm-grey-three-bg     {background-color: var(--warm-grey-three);}
.cool-grey-bg           {background-color: var(--cool-grey);}
.cool-grey-two-bg       {background-color: var(--cool-grey-two);}
.brownish-grey-bg       {background-color: var(--brownish-grey);}
.greyish-two-bg         {background-color: var(--greyish-two);}
.charcoal-bg            {background-color: var(--charcoal);}
.butterscotch-bg        {background-color: var(--butterscotch);}
.butterscotch-two-bg    {background-color: var(--butterscotch-two);}
.dusty-orange-bg        {background-color: var(--dusty-orange);}
.dusty-orange-two-bg    {background-color: var(--dusty-orange-two);}
.ruby-bg                {background-color: var(--ruby);}
.black-bg               {background-color: var(--black);}
.marigold-bg            {background-color: var(--marigold);}
.cerise-bg              {background-color: var(--cerise);}
.pinkish-red-bg         {background-color: var(--pinkish-red);}
.bluey-green-two-bg     {background-color: var(--bluey-green-two);}
.teal-blue-bg           {background-color: var(--teal-blue);}
.denim-blue-bg          {background-color: var(--denim-blue);}
.greeny-blue-bg         {background-color: var(--greeny-blue);}
.water-blue-bg          {background-color: var(--water-blue);}
.greyish-three-bg       {background-color: var(--greyish-three);}