/* Theme Colors */
:root {
  --baby-powder: #fffffa;
  --davys-gray: #515052;
  --black: #000103;
  --jet: #002c3e;
  --vermilion: #ff312e;
  --primary: #6C63FF;
  --secondary: #F8F9FA;
  --accent: #FF6584;
}

body {
  background: var(--baby-powder);
  color: var(--jet);
  font-family: 'Segoe UI', Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--jet);
}

.navbar, .footer, footer {
  background: var(--baby-powder) !important;
  color: var(--jet) !important;
}

.navbar .navbar-brand, .navbar-nav .nav-link, .navbar .dropdown-menu {
  color: var(--jet) !important;
}

.btn-primary, .btn-dark {
  background: var(--vermilion) !important;
  border-color: var(--vermilion) !important;
  color: #fff !important;
}

.btn-primary:hover, .btn-dark:hover {
  background: var(--jet) !important;
  border-color: var(--jet) !important;
}

.btn-outline-primary {
  color: var(--vermilion) !important;
  border-color: var(--vermilion) !important;
}

.btn-outline-primary:hover {
  background: var(--vermilion) !important;
  color: #fff !important;
}

.why-card {
  background: var(--jet);
  color: var(--baby-powder);
  border-radius: 10px;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

.card h6, .why-card h4 {
  color: var(--baby-powder);
}

.why-card:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 6px 24px rgba(0,0,0,0.12);
}

.title {
  position: relative;
  display: inline-block;
  color: var(--jet);
}
.title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: var(--vermilion);
  margin: 12px auto 0;
  border-radius: 2px;
}

.section-title, .featurette-heading {
  color: var(--jet);
}

a, .nav-link, .dropdown-item {
  color: var(--vermilion);
}

a:hover, .nav-link:hover, .dropdown-item:hover {
  color: var(--vermilion) !important;
}

footer {
  background: var(--baby-powder);
  color: var(--davys-gray);
}

.img-outline {
  outline: 2px solid var(--jet);
  outline-offset: 5px;
  outline-width: thick;
}
/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
/* rtl:begin:remove */
.featurette-heading {
  letter-spacing: -.05rem;
}

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}
.herocontainer {
  position: absolute;
  width: 60%;
  top: 50%;
  transform: translate(0, -50%);
  right: 0;
}

.category-btn:hover h6,.category-btn h6:hover
{
  color: white !important;
}