/* Minimal overrides and theme variables */
:root{
  --bs-primary:#0d6efd;
  /* Navbar color variables - change these to customize the menu bar */
  --navbar-bg: #2E3E4FFF; /* background color of the navbar */
  --navbar-color: #ffffff; /* default link/text color in the navbar */
  --navbar-link-hover: #0d6efd; /* link hover color */
  /* Navbar layout vars */
  --navbar-height: 70px; /* used to reserve space for fixed navbar */
  --navbar-bg-translucent: rgba(46,62,79,0.78); /* translucent navbar background for hero overlay */
}

body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  padding-top: 30px; /* reserve for fixed navbar */
  background-color: #f8f9fa;
}

header .navbar-brand{
  font-weight:600;
}

/* Apply navbar variables */
.navbar{
  background-color: var(--navbar-bg) !important;
}
.navbar, .navbar .nav-link, .navbar .navbar-brand {
  color: var(--navbar-color) !important;
}
.navbar .nav-link:hover, .navbar .nav-link:focus {
  color: var(--navbar-link-hover) !important;
}

/* Make the fixed navbar translucent so the hero background shows through */
.navbar.fixed-top{
  background-color: var(--navbar-bg-translucent) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  box-shadow: none;
  z-index: 1040; /* ensure it sits above hero background */
}

#hero img{
  max-width:420px;
}

.card{
  border-radius: .75rem;
}

/* Simple dark-mode class (toggleable via JS) */
.dark-mode{
  background-color:#121212;
  color:#e6e6e6;
}

/* Utility: visually-hidden focus ring for keyboard nav */
.focus-ring:focus{
  outline:3px solid rgba(13,110,253,.25);
  outline-offset:2px;
}

/* Hero background: use the illustration as a blurred decorative background */
#hero{
  position:relative;
  overflow:hidden;
  /* make hero fill a good portion of the viewport; adjust as needed */
  min-height: 60vh;
  display:flex;
  align-items:center;
  /* pull hero up so its decorative background sits behind the fixed navbar */
  margin-top: calc(-1 * var(--navbar-height));
  padding-top: calc(var(--navbar-height) + 2rem);
  /* Move decorative background to the element itself so JS can control background-position */
  background-image: url('/assets/img/hero-illustration.avif');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 0px;
}
#hero::before{
  content:"";
  position:absolute;
  inset:0;
  /* overlay layer (keeps subtle dim/blur effect if desired) */
  background-image: none;
  filter: blur(4px);
  transform: scale(1.02);
  opacity: 0.6;
  z-index: 0;
  pointer-events: none;
}
#hero .container{ position:relative; z-index:1; }

/* Emphasize hero text: white, bold, with drop shadow for legibility */
#hero h1, #hero .display-5 {
  color: #ffffff !important;
  font-weight: 800;
  text-shadow: 0 12px 48px rgba(0,0,0,0.65);
  line-height: 1.02;
}
#hero p.lead {
  color: rgba(255,255,255,0.95) !important;
  font-weight: 600;
  text-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

@media (max-width: 767.98px){
  #hero h1, #hero .display-5 { text-shadow: 0 4px 12px rgba(0,0,0,0.6); }
  #hero p.lead { text-shadow: 0 2px 6px rgba(0,0,0,0.45); }
}

/* Slightly shorter hero on small screens to avoid excessive vertical space */
@media (max-width: 767.98px){
  #hero{ min-height: 50vh; }
  #hero::before{
    background-position: center top;
    filter: blur(4px);
    opacity: 0.5;
  }
}

/* Scroll-to-top button */
.btn-scroll-top{
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #4BB89E !important;
  color: #fff;
  border: none;
  box-shadow: 0 6px 18px rgba(75,184,158,0.18);
  cursor: pointer;
  transform: translateY(8px) scale(0.95);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, transform 220ms ease, visibility 220ms;
  z-index: 1100;
}
.btn-scroll-top svg{ display:block; }
.btn-scroll-top.visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.btn-scroll-top:focus{ outline: 3px solid rgba(75,184,158,0.20); outline-offset: 2px; }

/* Hover/focus states for scroll-to-top to match hero CTA */
.btn-scroll-top:hover{
  background: #3AA085 !important;
  box-shadow: 0 10px 28px rgba(75,184,158,0.22) !important;
}
.btn-scroll-top:active{
  transform: translateY(0) scale(0.98);
}

@media (prefers-reduced-motion: reduce){
  .btn-scroll-top{ transition: none; }
}

/* Contact info icons and layout */
.contact-info .contact-item{
  display:flex;
  align-items:center;
  gap:0.375rem;
  margin:0;
}
.contact-info .icon{
  width:0.9rem !important;
  height:0.9rem !important;
  flex:0 0 auto;
  vertical-align:middle;
  color:var(--bs-primary) !important;
  fill: currentColor !important;
}
.contact-info a{ color:inherit; text-decoration:none; }
.contact-info a:hover{ text-decoration:underline; }

/* Contact info boxed style */
.contact-info{
  width:100%;
  border:1px solid rgba(0,0,0,0.08);
  padding:1rem 1.25rem;
  border-radius:0.5rem;
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(16,24,40,0.04);
}
.contact-info .contact-item{ margin-bottom:0.5rem; }

@media (max-width: 767.98px){
  .contact-info{ padding:0.75rem; }
}

/* Strong fallbacks in case global styles on deploy override our icon rules */
.contact-info svg.icon{
  width:0.9rem !important;
  height:0.9rem !important;
  color:var(--bs-primary) !important;
  fill:currentColor !important;
  vertical-align:middle;
  display:inline-block;
}
.contact-info svg.icon path,
.contact-info svg.icon rect,
.contact-info svg.icon circle{
  fill:currentColor !important;
}

/* Make footer match the navbar background and text color */
footer{
  background-color: var(--navbar-bg) !important;
  color: var(--navbar-color) !important;
}
footer a{ color: inherit; text-decoration: none; }
footer .container { color: inherit; }


/* Consultancy section background uses the site accent color */
#consultancy{
  background-color: #4BB89E !important;
  color: #ffffff !important;
}

/* Make inner card blend with the colored background for better contrast */
#consultancy .card{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#consultancy h2, #consultancy h3, #consultancy p, #consultancy li, #consultancy .card-body{
  color: #ffffff !important;
}

#consultancy a{ color: rgba(255,255,255,0.95) !important; }

@media (max-width: 767.98px){
  #consultancy{ padding-left: 1rem; padding-right: 1rem; }
}

/* Hero button color customization (requested: #4BB89E) */
#hero .btn-primary,
.hero-panel .btn-primary{
  background-color: #4BB89E !important;
  border-color: #4BB89E !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(75,184,158,0.18) !important;
}
#hero .btn-primary:hover,
.hero-panel .btn-primary:hover{
  background-color: #3AA085 !important;
  border-color: #3AA085 !important;
}
#hero .btn-primary:focus,
.hero-panel .btn-primary:focus{
  box-shadow: 0 6px 18px rgba(75,184,158,0.28) !important;
  outline: none;
}