/* =========================
   MC de Veldduivels Theme
   Drop this AFTER Bootstrap CSS
   ========================= */
:root{
  --vd-bg: #0f0f10;
  --vd-surface: #1b1c1f;
  --vd-surface-2: #16171a;
  --vd-border: #2a2b30;

  --vd-text: #f2f2f2;
  --vd-muted: #b5b5b5;
  --vd-muted-2: #8f8f8f;

  --vd-red: #e91c26;
  --vd-red-dark: #c5161f;
  --vd-red-glow: rgba(233, 28, 38, 0.35);

  --vd-radius: 12px;
  --vd-shadow: 0 10px 30px rgba(0,0,0,0.35);

  --vd-font-head: "Bebas Neue", "Oswald", system-ui, sans-serif;
  --vd-font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

html, body{
  background: var(--vd-bg);
  color: var(--vd-text);
  font-family: var(--vd-font-body);
}

a{ color: var(--vd-text); text-decoration: none; }
a:hover{ color: var(--vd-red); }

h1,h2,h3,.display-5,.display-6{
  font-family: var(--vd-font-head);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.lead{ color: var(--vd-muted); }

/* Header / brandingbar */
.vd-header{
  background: radial-gradient(1200px 400px at 10% 20%, rgba(255,255,255,0.06), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
  border-bottom: 1px solid var(--vd-border);
}
.vd-header img,
.navbar-brand img{
  filter: drop-shadow(0 0 12px rgba(233,28,38,0.7))
          drop-shadow(0 0 30px rgba(233,28,38,0.4));
}

/* Navbar + Offcanvas */
.navbar{
  background: var(--vd-surface-2) !important;
  border-bottom: 1px solid var(--vd-border);
}
.navbar .nav-link{
  color: var(--vd-text);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .95rem;
  opacity: .9;
}
.navbar .nav-link:hover{ color: var(--vd-red); opacity: 1; }
.navbar .nav-link.active{ color: var(--vd-red); opacity: 1; }

.dropdown-menu{
  background: var(--vd-surface-2);
  border: 1px solid var(--vd-border);
  border-radius: var(--vd-radius);
  box-shadow: var(--vd-shadow);
}
.dropdown-item{ color: var(--vd-text); }
.dropdown-item:hover,
.dropdown-item:focus{
  background: rgba(233, 28, 38, 0.14);
  color: var(--vd-text);
}

/* Offcanvas */
.offcanvas{
  background: var(--vd-surface-2);
  color: var(--vd-text);
  border-left: 1px solid var(--vd-border);
}
.offcanvas .offcanvas-title{
  font-family: var(--vd-font-head);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.btn-close-white{
  filter: invert(1) grayscale(100%);
  opacity: .85;
}
.offcanvas-header .vd-logo-glow{
  filter: drop-shadow(0 0 8px rgba(233,28,38,0.7)) drop-shadow(0 0 18px rgba(233,28,38,0.4));
}

/* Buttons */
.btn{ border-radius: 999px; font-weight: 600; }
.btn-danger{ background: var(--vd-red); border-color: var(--vd-red); }
.btn-danger:hover,
.btn-danger:focus{
  background: var(--vd-red-dark);
  border-color: var(--vd-red-dark);
  box-shadow: 0 0 0 .25rem var(--vd-red-glow);
}

.btn-outline-danger{ color: var(--vd-red); border-color: var(--vd-red); }
.btn-outline-danger:hover,
.btn-outline-danger:focus{
  background: rgba(233, 28, 38, 0.14);
  border-color: var(--vd-red);
  color: var(--vd-text);
  box-shadow: 0 0 0 .25rem var(--vd-red-glow);
}

/* Focus visibility */
:focus-visible{ outline: 3px solid var(--vd-red); outline-offset: 2px; }

/* Cards */
.card{
  background: var(--vd-surface);
  border: 1px solid var(--vd-border);
  border-radius: var(--vd-radius);
  box-shadow: 0 2px 0 rgba(0,0,0,0.25);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  position: relative;
  overflow: hidden;
}
.card::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: transparent;
  transition: background .18s ease;
}
.card:hover{
  transform: translateY(-4px);
  border-color: rgba(233, 28, 38, 0.45);
  box-shadow: var(--vd-shadow);
}
.card:hover::before{ background: var(--vd-red); }

.card .h5,
.card .fw-semibold{ color: #fff; }

.text-muted{ color: var(--vd-muted) !important; }
.small.text-muted{ color: var(--vd-muted-2) !important; }

/* Borders */
.border-top, .border-bottom{ border-color: var(--vd-border) !important; }

/* Hero */
.vd-hero{
  border-bottom: 1px solid var(--vd-border);
}
.vd-hero-inner{
  position: relative;
  min-height: min(80vh, 493px);
  display: flex;
  align-items: flex-start;
  padding-top: 100px;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.25) 100%),
    url("../assets/hero2.jpg") top center / cover no-repeat;
}
.vd-hero-inner::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(800px 400px at 20% 30%, rgba(233,28,38,0.12), transparent 60%);
  pointer-events: none;
}
.vd-hero-inner .row{ position: relative; z-index: 1; padding: 0 1.5rem; }
.vd-hero h1{ text-shadow: 0 8px 22px rgba(0,0,0,0.65); }
.vd-hero p{ max-width: 46ch; }

@media (max-width: 991.98px){
  .vd-hero-inner{
    min-height: min(55vh, 450px);
    background-image:
      linear-gradient(180deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.35) 100%),
      url("../assets/hero2.jpg");
    background-position: top center, top center;
    background-size: auto, cover;
    background-repeat: no-repeat, no-repeat;
  }
}
@media (max-width: 767.98px){
  .vd-hero-inner{
    background-position: center top, 42% top;
  }
}

/* =========================
   Mobile Offcanvas Accordion
   ========================= */
.vd-mobile-nav .vd-mobile-link{
  display: block;
  padding: .8rem 0;
  color: var(--vd-text);
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.vd-mobile-nav .vd-mobile-link:hover{ color: var(--vd-red); }
.vd-mobile-nav .vd-mobile-link.active{ color: var(--vd-red); }

.vd-mobile-nav .vd-mobile-sublink{
  display: block;
  padding: .55rem 0;
  color: var(--vd-muted);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.vd-mobile-nav .vd-mobile-sublink:hover{ color: var(--vd-text); }

.accordion-item{
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.accordion-button{
  background: transparent;
  color: var(--vd-text);
  padding: .8rem 0;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.accordion-button:focus{ box-shadow: none; }
.accordion-button:not(.collapsed){
  color: var(--vd-red);
  background: transparent;
}
.accordion-button::after{
  filter: invert(1) grayscale(100%);
  opacity: .75;
}
.accordion-body{ padding: .25rem 0 .75rem 0; }

/* =========================
   Breadcrumb
   ========================= */
.vd-breadcrumb .breadcrumb-item a{ color: var(--vd-muted); }
.vd-breadcrumb .breadcrumb-item a:hover{ color: var(--vd-red); }
.vd-breadcrumb .breadcrumb-item.active{ color: var(--vd-muted-2); }
.vd-breadcrumb .breadcrumb-item + .breadcrumb-item::before{
  color: var(--vd-muted-2);
}

/* =========================
   Rich Text Content (.vd-content)
   ========================= */
.vd-content{ }
.vd-content p,
.vd-content li{ color: var(--vd-muted); line-height: 1.75; }
.vd-content p{ margin-bottom: 1.25rem; }

.vd-content h2,
.vd-content h3,
.vd-content h4{
  font-family: var(--vd-font-head);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--vd-text);
  margin-top: 2rem;
  margin-bottom: .75rem;
}
.vd-content h2{ font-size: 1.75rem; }
.vd-content h3{ font-size: 1.35rem; }

.vd-content ul,
.vd-content ol{ padding-left: 1.5rem; margin-bottom: 1.25rem; }

.vd-content blockquote{
  border-left: 4px solid var(--vd-red);
  padding: .75rem 1.25rem;
  margin: 1.5rem 0;
  color: var(--vd-muted);
  background: rgba(255,255,255,0.03);
  border-radius: 0 var(--vd-radius) var(--vd-radius) 0;
}

.vd-content img{
  max-width: 100%;
  height: auto;
  border-radius: var(--vd-radius);
  margin: 1rem 0;
}

.vd-content table{
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
}
.vd-content th,
.vd-content td{
  padding: .6rem .75rem;
  border: 1px solid var(--vd-border);
  color: var(--vd-muted);
}
.vd-content th{
  background: var(--vd-surface);
  color: var(--vd-text);
  text-transform: uppercase;
  font-size: .85rem;
  letter-spacing: .04em;
}

.vd-content a{ color: var(--vd-red); text-decoration: underline; }
.vd-content a:hover{ color: var(--vd-text); }

/* =========================
   Content Image Float (.vd-img-float)
   Wraps an <img> in RTE content.
   Odd occurrences float right, even float left.
   ========================= */
.vd-content .vd-img-float{
  width: 350px;
  max-width: 100%;
  margin: .5rem 0 1.5rem 2rem;
  float: right;
  clear: both;
}
.vd-content .vd-img-float img{
  width: 100%;
  height: auto;
  border-radius: var(--vd-radius);
  display: block;
}
/* Even floats: left side */
.vd-content .vd-img-float:nth-of-type(even){
  float: left;
  margin: .5rem 2rem 1.5rem 0;
}
/* Clear after each section heading so floats don't bleed */
.vd-content h2{
  clear: both;
}
@media (max-width: 991.98px){
  .vd-content .vd-img-float{
    width: 200px;
  }
}
@media (max-width: 575.98px){
  .vd-content .vd-img-float,
  .vd-content .vd-img-float:nth-of-type(even){
    float: none;
    width: 100%;
    margin: 1rem 0;
  }
}

/* =========================
   Timeline (.timeline-container)
   ========================= */
.vd-content .timeline-container{
  list-style: none;
  padding-left: 2rem;
  margin: 2rem 0;
  position: relative;
  border-left: 3px solid var(--vd-border);
}
.vd-content .timeline-container > li{
  position: relative;
  margin-bottom: 1.5rem;
}
/* Red circle marker */
.vd-content .timeline-container > li::before{
  content: "";
  position: absolute;
  left: calc(-2rem - 7px);
  top: 1.2rem;
  width: 16px;
  height: 16px;
  background: var(--vd-red);
  border-radius: 50%;
  border: 3px solid var(--vd-bg);
  box-shadow: 0 0 0 3px var(--vd-red-glow);
}
/* Card-like container for each item */
.vd-content .timeline-container > li > p{
  background: var(--vd-surface);
  border: 1px solid var(--vd-border);
  border-radius: var(--vd-radius);
  padding: 1rem 1.25rem;
  margin: 0;
  color: var(--vd-muted);
  line-height: 1.7;
  transition: border-color .18s ease;
}
.vd-content .timeline-container > li > p:hover{
  border-color: rgba(233, 28, 38, 0.35);
}
/* Red bold title text */
.vd-content .timeline-container > li > p > strong{
  color: var(--vd-red);
  font-size: 1.1rem;
  display: block;
  margin-bottom: .1rem;
}
.vd-content .timeline-container > li > p > strong + br{
  display: none;
}

/* Desktop: centered timeline with alternating left/right items */
@media (min-width: 992px){
  .vd-content .timeline-container{
    border-left: none;
    padding-left: 0;
    position: relative;
  }
  /* Center line */
  .vd-content .timeline-container::before{
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--vd-border);
    transform: translateX(-50%);
  }
  .vd-content .timeline-container > li{
    width: 50%;
    padding-right: 2.5rem;
    padding-left: 0;
    margin-left: 0;
    margin-bottom: -1rem;
    text-align: right;
  }
  /* Even items: right side */
  .vd-content .timeline-container > li:nth-child(even){
    margin-left: 50%;
    padding-right: 0;
    padding-left: 2.5rem;
    text-align: left;
  }
  /* Dot: odd items (left side) — place on center line */
  .vd-content .timeline-container > li::before{
    left: auto;
    right: -8px; /* half of 16px dot width */
    top: 1.2rem;
  }
  /* Dot: even items (right side) — place on center line */
  .vd-content .timeline-container > li:nth-child(even)::before{
    right: auto;
    left: -8px; /* half of 16px dot width */
  }
  /* Card text alignment */
  .vd-content .timeline-container > li > p{
    text-align: left;
  }
}

/* =========================
   Metrics Cards (ul.metrics-container)
   Uses <ul> + <li> so Umbraco RTE preserves nesting.
   Each <li> contains two <p>: first has <strong>Title<em>Value</em></strong>,
   second has the description text.
   ========================= */
.vd-content ul.metrics-container{
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 2rem 0;
  padding: 0;
  border-left: none;
  flex-wrap: wrap;
}
.vd-content ul.metrics-container > li{
  min-width: 0;
  background: var(--vd-surface);
  border: 1px solid var(--vd-border);
  border-radius: var(--vd-radius);
  padding: 1.5rem 1.25rem;
  text-align: center;
  margin: 0;
}
/* First card full width, 2nd + 3rd share second row */
.vd-content ul.metrics-container > li:first-child{
  flex: 1 1 100%;
}
.vd-content ul.metrics-container > li:nth-child(n+2){
  flex: 1 1 0;
}
/* Override timeline dot */
.vd-content ul.metrics-container > li::before{
  display: none;
}
/* First <p>: title + value wrapper */
.vd-content ul.metrics-container > li > p:first-child{
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
}
/* Title (the <strong> text) */
.vd-content ul.metrics-container > li > p:first-child > strong{
  font-family: var(--vd-font-head);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--vd-text);
  font-size: 1.1rem;
  display: block;
  margin-bottom: .15rem;
}
/* Value (the <em> inside <strong>) */
.vd-content ul.metrics-container > li > p:first-child > strong > em{
  font-style: normal;
  display: block;
  font-family: var(--vd-font-head);
  font-size: 2.5rem;
  color: var(--vd-red);
  font-weight: 700;
  line-height: 1.2;
  margin: .15rem 0 .35rem;
}
/* Description <p> */
.vd-content ul.metrics-container > li > p:last-child{
  color: var(--vd-muted);
  font-size: .9rem;
  line-height: 1.5;
  margin: 0;
  background: none;
  border: none;
  padding: 0;
}
@media (max-width: 575.98px){
  .vd-content ul.metrics-container{
    flex-direction: column;
  }
}

/* =========================
   Agenda (.vd-agenda)
   ========================= */
.vd-agenda-month-title{
  font-family: var(--vd-font-head);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--vd-text);
  font-size: 1.5rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--vd-border);
}
.vd-agenda-month-title:first-child{
  margin-top: 0;
}
.vd-agenda-month{
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.vd-agenda-event{
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  background: var(--vd-surface);
  border: 1px solid var(--vd-border);
  border-radius: var(--vd-radius);
  padding: 1rem 1.25rem;
  transition: border-color .18s ease;
}
.vd-agenda-event:hover{
  border-color: rgba(233, 28, 38, 0.35);
}
.vd-agenda-event--past{
  opacity: .45;
}
.vd-agenda-date{
  flex-shrink: 0;
  min-width: 110px;
  font-family: var(--vd-font-head);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--vd-red);
  padding-top: .1rem;
}
/* Default (768–991px): short month abbreviation */
.vd-agenda-date-full{ display: none; }
.vd-agenda-date-short{ display: inline; }

/* Small screens (<768px): stack date above text, show full month */
@media (max-width: 767.98px){
  .vd-agenda-event{
    flex-direction: column;
    gap: .35rem;
  }
  .vd-agenda-date{
    min-width: unset;
    font-size: 1rem;
  }
  .vd-agenda-date-full{ display: inline; }
  .vd-agenda-date-short{ display: none; }
}

/* Desktop (≥992px): show full month name, wider date column */
@media (min-width: 992px){
  .vd-agenda-date{
    min-width: 200px;
  }
  .vd-agenda-date-full{ display: inline; }
  .vd-agenda-date-short{ display: none; }
}
/* Event type icons (route SVG + calendar Bootstrap icon) */
img.vd-agenda-type-icon{
  width: 28px;
  height: auto;
  filter: invert(22%) sepia(95%) saturate(5000%) hue-rotate(350deg) brightness(90%) contrast(95%);
}
i.vd-agenda-type-icon{
  color: var(--vd-red);
  font-size: 1.3rem;
}
/* Icon below date: visible on ≥768px */
.vd-agenda-type-icon--date{
  display: block;
  margin-top: .4rem;
}
/* Icon before title: hidden on ≥768px */
.vd-agenda-type-icon--title{
  display: none;
}
/* Mobile (<768px): swap — hide date icon, show title icon */
@media (max-width: 767.98px){
  .vd-agenda-type-icon--date{ display: none; }
  img.vd-agenda-type-icon--title{
    display: inline;
    width: 18px;
    vertical-align: middle;
    margin-right: .3rem;
  }
  i.vd-agenda-type-icon--title{
    display: inline;
    font-size: .95rem;
    margin-right: .3rem;
  }
}
.vd-agenda-title{
  color: var(--vd-text);
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: .15rem;
}
.vd-agenda-meta{
  color: var(--vd-muted);
  font-size: .85rem;
}
.vd-agenda-meta .bi{
  margin-right: .2rem;
  font-size: .8rem;
}

/* Calendar action buttons */
.vd-agenda-actions{
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .5rem;
}
.vd-agenda-actions a{
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .65rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--vd-muted);
  border: 1px solid var(--vd-border);
  border-radius: 6px;
  text-decoration: none;
  transition: all .18s ease;
}
.vd-agenda-actions a:hover{
  color: var(--vd-red);
  border-color: var(--vd-red);
  background: rgba(233, 28, 38, 0.08);
}
.vd-agenda-actions .bi{
  font-size: .7rem;
}


/* =========================
   News (.vd-news)
   ========================= */
.vd-news-list{
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.vd-news-article{
  background: var(--vd-surface);
  border: 1px solid var(--vd-border);
  border-radius: var(--vd-radius);
  padding: 2rem 1.5rem;
  transition: border-color .18s ease;
}
.vd-news-article:hover{
  border-color: rgba(233, 28, 38, 0.35);
}
.vd-news-meta{
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  font-size: .85rem;
  color: var(--vd-muted);
  margin-bottom: .5rem;
}
.vd-news-meta .bi{
  margin-right: .2rem;
  font-size: .8rem;
}
.vd-news-date{
  font-family: var(--vd-font-head);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--vd-red);
  font-size: .95rem;
}
.vd-news-title{
  font-family: var(--vd-font-head);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 1.5rem;
  color: var(--vd-text);
  margin-bottom: .75rem;
}
.vd-news-title a{
  color: var(--vd-text);
  text-decoration: none;
  transition: color .18s ease;
}
.vd-news-title a:hover{
  color: var(--vd-red);
}
.vd-news-read-more{
  margin-top: 1rem;
}
/* Detail page back link */
.vd-news-back{
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--vd-border);
}
.vd-news-back a{
  color: var(--vd-muted);
  text-decoration: none;
  transition: color .18s ease;
}
.vd-news-back a:hover{
  color: var(--vd-red);
}

/* =========================
   Contact Form (.vd-contact-form)
   ========================= */
.vd-contact-form .form-control,
.vd-contact-form .form-select{
  background: var(--vd-surface);
  border: 1px solid var(--vd-border);
  color: var(--vd-text);
  border-radius: var(--vd-radius);
  padding: .65rem 1rem;
}
.vd-contact-form .form-control:focus{
  background: var(--vd-surface);
  border-color: var(--vd-red);
  color: var(--vd-text);
  box-shadow: 0 0 0 .25rem var(--vd-red-glow);
}
.vd-contact-form .form-control::placeholder{
  color: var(--vd-muted-2);
}
.vd-contact-form .form-label{
  color: var(--vd-text);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .85rem;
  margin-bottom: .35rem;
}
.vd-contact-form .text-danger{
  font-size: .8rem;
}
.vd-contact-form .btn-danger{
  background: var(--vd-red);
  border-color: var(--vd-red);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.vd-contact-form .btn-danger:hover{
  background: var(--vd-red-dark);
  border-color: var(--vd-red-dark);
}

/* Honeypot — visually hidden */
.vd-hp{
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
  overflow: hidden;
}

/* Success / error alerts */
.vd-alert-success{
  background: rgba(233, 28, 38, 0.12);
  border: 1px solid rgba(233, 28, 38, 0.35);
  color: #ffffff;
  border-radius: var(--vd-radius);
  padding: 1rem 1.25rem;
}
.vd-alert-error{
  background: rgba(233, 28, 38, 0.12);
  border: 1px solid rgba(233, 28, 38, 0.35);
  color: #f5a0a5;
  border-radius: var(--vd-radius);
  padding: 1rem 1.25rem;
}

/* Contact info card */
.vd-contact-info{
  background: var(--vd-surface);
  border: 1px solid var(--vd-border);
  border-radius: var(--vd-radius);
  padding: 1.5rem;
}
.vd-contact-info h3{
  font-family: var(--vd-font-head);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  color: var(--vd-text);
}
.vd-contact-info p{
  color: var(--vd-muted);
  font-size: .95rem;
}
.vd-contact-info a{
  color: var(--vd-red);
}
.vd-contact-info a:hover{
  color: var(--vd-text);
}

/* Footer */
footer h3{
  font-size: 1rem;
  margin-bottom: 1rem;
  color: var(--vd-text);
}
footer address a,
footer .list-unstyled a{
  color: var(--vd-muted);
}
footer address a:hover,
footer .list-unstyled a:hover{
  color: var(--vd-red);
}
footer .bi{
  transition: color .2s;
}
footer a.text-muted:hover{
  color: var(--vd-red) !important;
}