@charset "utf-8";
/* CSS Document */

:root{
  --fms-bg:#0b0e12;
  --fms-card:#151a20;
  --fms-card2:#0f1216;
  --fms-orange:#ff7a18;
  --fms-text:#e9eef5;
  --fms-muted:#9aa4b2;
  --fms-title:#f4f7ff;
}
body{ background:var(--fms-bg); color:var(--fms-text); }
.muted{ color:var(--fms-muted); }
.divider{ border-top:1px solid rgba(255,255,255,.07); }

/* NAV */
.navbar{
  background: rgba(15,18,22,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
/* >>> groter logo */
.brand-logo{ height: 72px; width:auto; }
@media (max-width: 991px){
  .brand-logo{ height: 60px; }
}

.navbar .nav-link{ color:#d6dde7 !important; }
.navbar .nav-link:hover{ color:#fff !important; }

/* BUTTONS */
.btn-fms{
  background: var(--fms-orange);
  border-color: var(--fms-orange);
  color:#111;
  font-weight: 800;
}
.btn-fms:hover{ filter:brightness(1.05); }

.btn-outline-fms{
  border-color: rgba(255,122,24,.75);
  color:#fff;
  font-weight: 800;
}
.btn-outline-fms:hover,
.btn-outline-fms:focus,
.btn-outline-fms:active,
.btn-outline-fms.active{
  background: rgba(255,122,24,.14);
  border-color: var(--fms-orange);
  color:#fff;
  box-shadow: 0 0 0 .2rem rgba(255,122,24,.18);
}

/* HERO */
.hero{
  position:relative;
  min-height: 74vh;
  display:flex;
  align-items:center;
  padding: 7rem 0 4rem;
  background:
    linear-gradient(90deg, rgba(11,14,18,.92) 0%, rgba(11,14,18,.74) 55%, rgba(11,14,18,.35) 100%),
    url('../s4s_upload/fms-hero-01.jpg') top/cover no-repeat;
  overflow:hidden;

}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(80% 70% at 30% 30%, rgba(0,0,0,.10) 0%, rgba(0,0,0,.40) 70%, rgba(0,0,0,.55) 100%);
  opacity:.55;
}
.hero h1{ letter-spacing:-.02em; }
.hero-content{ position:relative; z-index:2; }

.hero-card{
  background: rgba(21,26,32,.80);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 1.25rem;
  overflow:hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  position:relative;
  z-index:2;
}

/* SECTIES */
.section{ padding: 4.5rem 0; }
.section-title{ font-weight: 900; letter-spacing:-.01em; }
.card-dark{
  background: rgba(21,26,32,.86);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 1.25rem;
  
}
.service-title{ color: var(--fms-title); }
.service-icon{
  width: 46px; height:46px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,122,24,.14);
  border: 1px solid rgba(255,122,24,.22);
  color: #ffd1b3;
  font-size: 1.35rem;
  flex: 0 0 auto;
}

/* HERO ACTIEBLOK (ook hergebruikt in footer) */
.hero-action{
  position: relative;
  border: 1px solid rgba(255,255,255,.10);
  border-left: 6px solid var(--fms-orange);
  background: rgba(21,26,32,.92);
  box-shadow:
    0 18px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,122,24,.10) inset,
    0 0 28px rgba(255,122,24,.10);
}
.hero-action .action-badge{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-weight: 900;
  letter-spacing:.02em;
  border-radius:999px;
  padding: .35rem .75rem;
  background: rgba(255,122,24,.18);
  border: 1px solid rgba(255,122,24,.35);
  color:#fff;
  margin-bottom: .65rem;
}
.hero-action .action-title{
  font-weight: 900;
  color: var(--fms-title);
}

/* MERKEN */
.brand-chip{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 1rem;
  padding: .55rem .65rem;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 96px;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.brand-chip:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,122,24,.35);
  transform: translateY(-1px);
}
.brand-chip img{
  max-height: 90px;
  width: 100%;
  max-width: 100%;
  object-fit: contain;
  display:block;
  filter: saturate(1.05) contrast(1.02);
}

/* OVER: foto iets compacter + gelijke hoogte gevoel */
.over-photo{
  width:100%;
  max-height: 380px;
  object-fit: cover;
}

/* FOOTER */
footer{
  background: #070a0e;
  border-top: 1px solid rgba(255,255,255,.07);
}

@media (max-width: 991px){
  .hero{
    min-height:auto;
    padding: 6rem 0 3.5rem;
    background:
      linear-gradient(180deg, rgba(11,14,18,.92) 0%, rgba(11,14,18,.78) 60%, rgba(11,14,18,.48) 100%),
      url('checkered-flag-background.jpg') center/cover no-repeat;
  }
  .brand-chip{ min-height: 90px; }
  .brand-chip img{ max-height: 56px; }
  .over-photo{ max-height: 320px; }
}
/* Dropdown openen op hover (alleen desktop) */
@media (min-width: 992px) {
  .navbar .dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}
#scrollTopBtn{
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--fms-orange);
  color: #fff;
  font-size: 1.3rem;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 999;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  transition: opacity .25s ease, transform .25s ease;
}

#scrollTopBtn:hover{
  transform: translateY(-3px);
}

.copyright-area a{color:white;text-decoration: none;}
.copyright-area a:hover{color:#ff7a18;}

/* Social buttons in navbar – FMS oranje */
.btn-fms-social{
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--fms-orange);
  color: var(--fms-orange);
  background: transparent;
  transition: all .2s ease;
  font-size: 1.1rem;
}

/* Hover: gevuld oranje */
.btn-fms-social:hover{
  background: var(--fms-orange);
  color: #0b0e12; /* donker FMS-achtergrondkleur */
  transform: translateY(-1px);
}

/* Mobile iets compacter */
@media (max-width: 575px){
  .btn-fms-social{
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }
}