* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  font-family: "DM Sans", sans-serif;
  color: var(--black-light);
}

html,
body,
main {
  height: 100%;
  width: 100%;
}

img {
  width: 100%;
}

button {
  cursor: pointer;
  border: none;
  outline: none;
}

a {
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

.container {
  max-width: 1100px;
  padding: 64px 0;
  margin: 0 auto;
  height: 100%;
}

.h4-heading {
  text-align: center;
  font-size: 60px;
  color: var(--black-light);
  font-weight: var(--semibold);


  b {
    color: var(--orange);
    font-weight: var(--bold);
  }
}

.orange {
  color: var(--orange);
}

/* ********************** */
/* **** Root Css **** */
/* ********************** */

:root {
  /* Colors */
  --orange: #f47621;
  --orange-light: #ef6616a1;
  --orange-gradient: linear-gradient(164deg, rgba(244, 118, 33, 1) 22%, rgba(244, 59, 4, 1) 50%, rgba(244, 118, 33, 1) 79%);
 /* --black: #000000; */
  --black-2: #0e0e0e;
  --black-light: rgb(47, 47, 47);
  --white: #ffffff;
  --grey-background: #EFEFEF;
  --grey-border: rgb(216, 216, 216);

  /* Font Weights */
  --light: 300;
  --regular: 400;
  --medium: 500;
  --semibold: 600;
  --bold: 700;
}


/* ********************* */
/* ---- KeyFrames  ---- */
/* ********************* */

@keyframes gradient {
  0% {
    background-position: 0% 0%;
  }

  50% {
    background-position: 100% 0%;
  }

  100% {
    background-position: 0% 0%;
  }
}