:root {
  --bg-dark: #000000;

  --color-red: #D00510;
  --bg-red:#D00510;
  --border-red:#D00510;

  --color-yellow: #FFF500;
  --bg-yellow:#FFF500;
  --border-yellow: #FFF500;

  --color-white:#ffffff;
  --bg-white:#ffffff;
  --border-white:#ffffff;

  --outline-primary:#D00510;
  --outline-secondary:#FFF500;

  --btn-primary:#D00510;
  --btn-secondary:#FFF500;

  --bg-gray:#777777;
  --bg-dark-gray:#343434;

  --border-color:#2E2E2E;
  
}
body{
  font-family: 'Inter' , sans-serif;
  background:var(--bg-dark);
  color:var(--color-white);
}
.hd,
.f-family2{
  font-family: 'Bebas Neue' , sans-serif;
  font-size:1.5rem;
  letter-spacing: 1.5px;
}

.f-size1{
  font-size:1.8rem; 
}
.f-size2{
  font-size:2.3rem; 
}
.border{border-color:var(--border-color)}
.border-bottom{border-color:var(--border-color)}
.bg-dark{background-color:var(--bg-dark);}
.bg-red{background-color:var(--bg-red);}
.color-red{color:var(--color-red)}
.color-yellow{color:var(--color-yellow)}
.color-white{color:var(--border-white)}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Bebas Neue' , sans-serif;
  letter-spacing: 2.5px;
  color:var(--color-white);
}
p, .paragraph{
  color:var(--color-white);
  font-size: 18px;
}
.navigation {
  background: linear-gradient(to right, transparent 80%, var(--bg-dark) 80%);
  transition: 0.2s ease;
}
.navbar-nav{
  background:var(--bg-dark);
  font-family: 'Bebas Neue' , sans-serif;
  letter-spacing: 1.5px;
  font-size: 1.5rem;
}
.navbar-expand-lg .navbar-nav .nav-link{
  padding: 25px 0px;
}
.bg-footer,
.overlay::before,
.nav-bg {
  background-color:var(--bg-dark);
}
.nav-item::before{
  background:var(--color-red);
}
.hero-slider .slick-dots li.slick-active button {
  background:var(--bg-red);
}