:root {
  --t: .6s;
  --t-md: .4s;
  --grid-gap: 2.8rem;
  --container-padding: 6rem;
  --cl-white-90: rgba(255, 255, 255, 0.90);
  --cl-white-80: rgba(255, 255, 255, 0.80);
  --cl-white-70: rgba(255, 255, 255, 0.70);
  --cl-white-50: rgba(255, 255, 255, 0.50);
  --cl-white-40: rgba(255, 255, 255, 0.40);
  --cl-white-30: rgba(255, 255, 255, 0.30);
  --cl-white-20: rgba(255, 255, 255, 0.20);
  --cl-white-15: rgba(255, 255, 255, 0.15);
  --cl-white-10: rgba(255, 255, 255, 0.10);
  --cl-white-05: rgba(255, 255, 255, 0.05);
  --cl-white-03: rgba(255, 255, 255, 0.03);
  --cl-primary: #FF6B30;
  --cl-white: #FFFFFF;
  --cl-black: #1D1D1D;
  --cl-black-90: rgba(29, 29, 29, 0.90);
  --cl-black-80: rgba(29, 29, 29, 0.80);
  --cl-black-60: rgba(29, 29, 29, 0.60);
  --cl-black-50: rgba(29, 29, 29, 0.50);
  --cl-black-30: rgba(29, 29, 29, 0.30);
  --cl-black-25: rgba(29, 29, 29, 0.25);
  --cl-black-20: rgba(29, 29, 29, 0.20);
  --cl-black-10: rgba(29, 29, 29, 0.10);
  --cl-black-05: rgba(29, 29, 29, 0.05);
  --bg-black: #1C1C1C;
  --bg-light-grey: #F5F5F5;
  --bg-light-orange: #FFF0EA;
  --bg-dark-gray: #252525;
  --bg-primary: #FF6B30;
  --bd-grey: #535353;
}
@media (min-width: 768px) and (max-width: 991px) {
  :root {
    --container-padding: 3.2rem;
    --grid-gap: 1.6rem;
  }
}
@media (max-width: 767px) {
  :root {
    --container-padding: 2rem;
    --grid-gap: 1.6rem;
  }
}