.navbar .navbar-nav .active, .section-title span {
    color: #d60421 !important;
}

.loader span {
    border-top: 1px solid #d60421 !important;
}

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

.navbar .navbar-nav .nav-link {
    font-family: Raleway !important;
}

.navbar .navbar-nav .nav-link:hover, .bauen-blog .item .con h5, .testimonials .item .info h6, .main-footer .sub-footer p a:hover, .progress-wrap::after, .navbar .dropdown-menu .dropdown-item:hover {
    color: #d60421 !important;
}


.header .caption h1, .section-title {
    font-family: Raleway !important;
    letter-spacing: 6px !important;
}

p, .butn-light a, .about-img .about-img-2, h1, h2, h3, h4, h5, h6, body, .services .item .numb {
    font-family: Raleway !important;
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{
    border: 1px solid #d60421 !important;
}

.services .item:hover .numb{
-webkit-text-stroke: 1px rgba(233,30,37,0.5);}

.services .item:hover .line:after{background-color: rgba(233,30,37,0.5);}

.circle-fill circle {
    fill: rgba(233,30,37,0.5);
}

.main-footer .fothead h6, .bauen-blog .item .con h5 a {
    color: #fff !important;
}

.progress-wrap svg.progress-circle path{
    stroke: #fff !important;
}


/* Section shell */
.slider-grid-bg {
  min-height: 100vh;
  color: #fff;
  padding-top: 225px;
  padding-bottom: 60px;
  position: relative;
  overflow: hidden;
  background: #272727; /* page fallback only */
}

/* HERO: two layers that crossfade */
.slider-grid-bg .grid-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(70%);
  opacity: 0;                        /* hidden by default */
  transform: scale(1);
  transition: opacity .45s ease, transform 5s ease;
  will-change: opacity, transform;
  pointer-events: none;
  z-index: 1;                        /* sits behind cards/text */
}
.slider-grid-bg .grid-img.is-front {
  opacity: 1;
  transform: scale(1.03);
}

/* CARDS: transparent, with a gentle dark glass only when active/hover */
.slider-grid-bg .content { position: relative; z-index: 2; }
.slider-grid-bg .grid-item { margin-bottom: 30px; display: flex; }

.slider-grid-bg .grid-con {
  position: relative;
  display: flex; align-items: flex-end;
  width: 100%; min-height: 340px;
  padding: 80px 30px 30px;
  color: currentColor; text-decoration: none;
  border: 1px solid rgba(255,255,255,.5);
  background: transparent;           /* IMPORTANT: never fill solid */
  transition: border-color .3s;
}

/* subtle overlay on active/hover (lighten if it feels too dark) */
.slider-grid-bg .grid-con::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(0,0,0,.28);       /* was .45 — reduced to avoid “black layer” */
  opacity: 0; transition: opacity .25s ease;
  pointer-events: none;
}
.slider-grid-bg .grid-con.grid-con-active::after,
.slider-grid-bg .grid-con:hover::after { opacity: 1; }

/* avoid layout jiggle */
.slider-grid-bg .grid-con.grid-con-active,
.slider-grid-bg .grid-con:hover { border-color: rgba(255,255,255,0); }

/* keep your typography */
.slider-grid-bg .year     { position:absolute; right:30px; top:30px; font: 12px 'Oswald', sans-serif; letter-spacing:3px; text-transform:uppercase; }
.slider-grid-bg .subtitle { display:block; font: 12px 'Oswald', sans-serif; letter-spacing:3px; text-transform:uppercase; margin-bottom:5px; }
.slider-grid-bg .title    { display:block; font: 24px 'Oswald', sans-serif; letter-spacing:5px; text-transform:uppercase; }

/* responsive heights */
@media (max-width:1199px){ .slider-grid-bg .grid-con { min-height:300px; } }
@media (max-width:767px) { .slider-grid-bg .grid-con { min-height:240px; } }



/* === Slider Grid overrides (place at END of custom.css) === */

/* hero layers crossfade; nothing else should set .grid-img opacity to 1 */
.slider-grid-bg .grid-img { opacity: 0; filter: brightness(70%); }
.slider-grid-bg .grid-img.is-front { opacity: 1; transform: scale(1.03); }

/* transparent cards; DO NOT paint solid backgrounds on hover/active */
.slider-grid-bg .grid-con { background: transparent !important; position: relative; z-index: 2; }

/* gentle glass only on the active card (not all cards) */
.slider-grid-bg .grid-con::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0,0,0,.18);   /* lighter than before */
  opacity: 0; transition: opacity .25s ease;
  pointer-events: none;
}
.slider-grid-bg .grid-con.grid-con-active::after { opacity: 1; }

/* optional: if you also want the glass when the user hovers */
// .slider-grid-bg .grid-con:hover::after { opacity: .6; }

/* avoid any border-width jiggle */
.slider-grid-bg .grid-con,
.slider-grid-bg .grid-con.grid-con-active { border: 1px solid rgba(255,255,255,.5); }


/* ACTIVE CARD SHOULD BE CLEAR, OTHERS DIM */

/* baseline: show a gentle dim on every card */
.slider-grid-bg .grid-con {
  position: relative;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.45);
  transition: border-color .25s ease;
}

.slider-grid-bg .grid-con::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);   /* dim for non-active items */
  opacity: 1;                    /* <- ON by default */
  transition: opacity .25s ease;
  pointer-events: none;
}

/* active or hovered card: remove the dim + hide border */
.slider-grid-bg .grid-con.grid-con-active::after,
.slider-grid-bg .grid-con:hover::after {
  opacity: 0;                    /* clear glass on the current/hovered */
}
.slider-grid-bg .grid-con.grid-con-active,
.slider-grid-bg .grid-con:hover {
  border-color: transparent;     /* no border on current/hovered */
}

b {
    color: #d60421 !important;
}
input[type="submit"] {
    background: #d60421 !important;}
    
@media screen and (max-width: 768px) {
.about {
    margin-top: -22% !important;
}
section.testimonials{display:none;}
.navbar .navbar-toggler-icon, .navbar .icon-bar {
    color: #d60421 !important;
}
}