/*--------------------------------------------------
  GLOBAL THEME VARIABLES
--------------------------------------------------*/
:root {
  /* Core Palette */
  --bs-body-bg: #E6E1DD;
  --bs-body-color: #214A6A;
  --bs-primary: #FC573B;
  --bs-secondary: #C2BBB5;
  --bs-tertiary: #787870;
  --bs-dark: #172A39;
  --bs-light: #E6E1DD;

  /* Typography */
  --bs-font-sans-serif: "Google Sans Code", sans-serif;
  --bs-font-monospace: "Zen Dots", monospace;

  --bs-body-text-align: justify;
}


/*--------------------------------------------------
  BASE STYLES
--------------------------------------------------*/

body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-family: "Google Sans Code", sans-serif;
  text-justify: auto;
}

/* Reset any Bootstrap element that might force a white background */
section, div, p, .lead, .display-5, .display-1, .display-2, .display-3, .display-4, .display-6 {
  background-color: transparent !important;
  color: var(--bs-body-color);
}

/*--------------------------------------------------
  PAGE TRANSITION EFFECTS
--------------------------------------------------*/
/* Page fade-in effect */
body {
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

body.fade-in {
  opacity: 1;
}

body.fade-out {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}






/*--------------------------------------------------
  TYPOGRAPHY
--------------------------------------------------*/

p, .lead {
  font-family: "Google Sans Code", sans-serif;
  color: var(--bs-body-color);
}

h1, h2, h3, h4, h5, h6, 
.display-1, .display-2, .display-3, .display-4, .display-5 {
  font-family: "Zen Dots", sans-serif;
  color: var(--bs-body-color);
  letter-spacing: 0.02em;
}

/*--------------------------------------------------
  NAVBAR
--------------------------------------------------*/

.navbar {
  background-color: var(--bs-light) !important;
  color: var(--bs-dark);
}

.navbar-brand, .nav-link {
  color: var(--bs-dark) !important;
  font-family: "Google Sans Code", sans-serif;
}

.nav-link.active {
  color: var(--bs-primary) !important;
}

/*--------------------------------------------------
  BUTTONS
--------------------------------------------------*/

/*--------------------------------------------------
  BUTTONS
--------------------------------------------------*/

.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #d9482d;
  --bs-btn-hover-border-color: #d9482d;
  --bs-btn-color: #fff;
  font-size: 1rem;
  padding: 0.5rem 1.25rem;
  border-radius: 0.5rem;
}

/* Mobile: Larger, full-width button */
@media (max-width: 575.98px) {
  #contact-btn {
    display: block;
    width: 100%;
    font-size: 1.25rem !important;
    padding: 0.75rem 1.5rem !important;
  }
}

/* Tablet and up: Regular button size, auto width */
@media (min-width: 576px) {
  #contact-btn {
    width: auto;
    font-size: 1rem;
    padding: 0.5rem 1.25rem;
  }
}

/*--------------------------------------------------
  BUTTON ANIMATION
--------------------------------------------------*/
.btn-primary {
  position: relative;
  overflow: hidden;
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
  font-size: 1rem;
  padding: 0.6rem 1.4rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0); /* start flat */
}

.btn-primary:hover,
.btn-primary:focus {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(252, 87, 59, 0.4);
  background-color: #ff6b4d;
  border-color: #ff6b4d;
}



/*--------------------------------------------------
  HERO SECTIONS
--------------------------------------------------*/

/* Removed overlay entirely */
.homepage {
  width: 100%;
  min-height: 60vh; /* or 100vh for full screen */
  background: url('/img/BGHeroTest.png') center/cover no-repeat;
  color: var(--bs-body-color);
  position: relative;
}

/* Ensure no overlay or pseudo-element */
.homepage::before {
  content: none;
}

.homepage h1, 
.homepage p {
  position: relative;
  z-index: 1;
  color: var(--bs-body-color);
}


/* Removed overlay entirely */
.concept {
  width: 100%;
  height: 100%;
  /*min-height: 70vh; /* or 100vh for full screen */
  background: url('/img/BGHeroConcept.png') center/cover no-repeat;
  color: var(--bs-body-color);
  position: relative;
}

/* Removed overlay entirely */
.about {
  width: 100%;
  height: 100%;
  /*min-height: 70vh; /* or 100vh for full screen */
  background: url('/img/BGHeroAbout.png') center/cover no-repeat;
  color: var(--bs-body-color);
  position: relative;
}

/* Removed overlay entirely */
.implement {
  width: 100%;
  height: 100%;
  /*min-height: 70vh; /* or 100vh for full screen */
  background: url('/img/BGHeroImplement.png') center/cover no-repeat;
  color: var(--bs-body-color);
  position: relative;
}

/* Removed overlay entirely */
.inpractice {
  width: 100%;
  height: 100%;
  /*min-height: 70vh; /* or 100vh for full screen */
  background: url('/img/BGHeroInPractice.png') center/cover no-repeat;
  color: var(--bs-body-color);
  position: relative;
}




/*--------------------------------------------------
  RESPONSIVE HERO BACKGROUND IMAGES
--------------------------------------------------*/

/* Default (large desktop and above, 1440px+) */
.homepage {
    background-image: url("/img/BGHeroComp_Large.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Mobile screens — up to 575px */
@media (max-width: 575px) {
  .homepage {
    background-image: url("/img/BGHeroComp_Small.png");
  }
}

/* Mid-desktop screens — 576px to 1399px */
@media (min-width: 576px) and (max-width: 1399px) {
  .homepage {
    background-image: url("/img/BGHeroComp_Medium.png");
  }
}

/* Large screens — 1440px and above (explicit override, optional redundancy) */
@media (min-width: 1440px) {
  .homepage {
    background-image: url("/img/BGHeroComp_Large.png");
  }
}





/*--------------------------------------------------
  CARDS
--------------------------------------------------*/

.card-cover {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 1.5rem;
  overflow: hidden;
  position: relative; /* Needed for overlay positioning */
}

.card-cover h3 {
  font-family: "Zen Dots", sans-serif;
  color: #fff;
}

.card-cover .d-flex {
  position: relative;
  z-index: 1;
}

/* Soft overlay on hover */
.card-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(252, 87, 59, 0.70); /* Soft orange, adjust as needed */
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  border-radius: inherit;
}

.card-cover:hover::after,
.card-cover:focus::after {
  opacity: 1;
}

/*--------------------------------------------------
  FOOTER
--------------------------------------------------*/

footer {
  background-color: var(--bs-light);
  color: var(--bs-dark);
  border-top: 2px solid var(--bs-secondary);
}

footer a {
  color: var(--bs-primary);
  text-decoration: none;
}

footer a:hover {
  color: #FC573B;
}

.text-shadow-1 {
  text-shadow: 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.3);
}


/* Force all Bootstrap text utilities to use your custom text color */
.text-body-emphasis,
.text-body-secondary,
.text-dark,
.text-primary,
.text-muted {
  color: #214A6A !important;
}

.text-white {
  color: #E6E1DD !important;
}

/* Make sure all headings use the correct color */
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5 {
  color: #214A6A !important;
}

.display-6 {
  color: #E6E1DD !important;
}


/* Hero headings and text also inherit your main text color */
.homepage h1,
.homepage p,
.homepage .lead {
  color: #214A6A !important;
}

/* In case Bootstrap applies a dark background on cards or features*/
.feature h3,
.feature p {
  color: #214A6A!important;
}

/*--------------------------------------------------
  NAV & FOOTER LINK HOVER ANIMATION
--------------------------------------------------*/

/* Base style for all links */
.navbar .nav-link,
footer .nav-link {
  position: relative;
  color: var(--bs-dark);
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Animated underline (hidden by default) */
.navbar .nav-link::after,
footer .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0%;
  background-color: var(--bs-primary); /* your orange highlight */
  transition: width 0.3s ease;
}

/* On hover — underline grows */
.navbar .nav-link:hover::after,
footer .nav-link:hover::after {
  width: 100%;
}

/* Optional: change text color slightly on hover */
.navbar .nav-link:hover,
footer .nav-link:hover {
  color: var(--bs-primary) !important;
}

/*--------------------------------------------------
  ICON SQUARES (STATIC DECORATIVE ICONS)
--------------------------------------------------*/

.icon-square {
  width: auto;
  height: auto;
  color: var(--bs-primary-color) !important; /* match typography color */
  border: none;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  border-radius: 0; /* removes the rounded box look */
}

.icon-square i {
  color: #FC573B;
}

.icon-subtle i {
  color: #787870;
}



/*--------------------------------------------------
  MARKETING ICONS (REPLACING SVG CIRCLES)
--------------------------------------------------*/
.bd-placeholder-img.rounded-circle {
  object-fit: cover;     /* ensures images stay properly cropped */
  background-color: transparent; /* no gray background */
  border: none; /* optional subtle outline */
}


/*--------------------------------------------------
  ACCORDION CUSTOMIZATION
--------------------------------------------------*/

/* Closed and open states share the same base text color */

.accordion-button {
  background-color: transparent !important;
  color: #787870 !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 500; 
}

/* Remove default blue background on open state */
.accordion-button:not(.collapsed) {
  background-color: #214A6A !important; 
  color: #E6E1DD !important;
  box-shadow: none !important;
}

/* Remove focus outlines */

.accordion-button:focus {
  box-shadow: none !important;
  border-color: transparent !important;
}
 

/* Optional subtle border for each accordion item */
.accordion-item {
  border: 1px solid #C2BBB5;
  border-radius: 0.5rem;
  background-color: transparent;
}


/*--------------------------------------------------
  IMPLEMENTATION NUMBER COLOR CUSTOMIZATION
--------------------------------------------------*/


.step-number {
  font-size: 3.5rem;                  /* larger number */
  font-weight: 900;                 /* thick outline */
  color: transparent;               /* remove fill */
  -webkit-text-stroke: 1px #FC573B; /* orange outline */
  margin-right: 0.4rem;             /* spacing from text */
  display: inline-block;
  vertical-align: middle;
}

/* Optional: scale down slightly for mobile */
@media (max-width: 575.98px) {
  .step-number {
    font-size: 2.25rem;
    -webkit-text-stroke: 1.5px #FC573B;
  }
}