@import url('https://googleapis.com');

.font-roboto-serif {
  font-family: 'Roboto Serif', serif !important;
}

h1, .h1 {
  font-family: 'Roboto Serif', serif;
  font-size: 44px;
  color: #ff5722;
}

body {
  padding-top: 56px;
}

.mx-lg-custom {
  margin-left: 20px;
  margin-right: 20px;
}

.custom-navbar {
  background-color: #e69138; /* Sets custom background color */
  color: #ffffff; /* Sets text color */
  border-bottom: 2px solid #000; /* Adds a bottom border */
/*  padding: 10px;  Adds padding around the navbar */
  font-size: 18px; /* Sets font size */
  font-weight: bold; /* Sets font weight */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
  transition: background-color 0.3s ease; /* Smooth transition effect */
}
.navbar.custom-navbar {
  padding-top: 0;
  padding-bottom: 0;
}

/* Control navbar height via the nav-link padding */
.custom-navbar .nav-link {
  padding-top: 6px;    /* Increases hover background height */
  padding-bottom: 6px; /* Keeps text perfectly centered vertically */
  transition: all 0.3s ease; 
}

.custom-navbar:hover {
  background-color: #fa9138; /* Changes background color on hover */
}

.navbar-nav > li > a {
  color: #245e85; /*45AAF5; Gray blue #888888;  Medium gray */
}

/*.navbar-nav a : hover { doesn't work
  color: #0000ff; desired color here
}*/

/*.nav-link a : hover {
    color: blue
}*/

.nav-link:hover {
  background-color: #917b70;
  padding-top: 6px;
  padding-bottom: 6px;
  transition: all 0.3s ease;
}

.nav-link:focus {
  background-color: #ad601f; /* Focus color */
}

/*.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link.show {
    background-color: rgba(0, 0, 0, 0.2) !important; Adjust darkness/opacity here
    color: #000000 !important; Ensures text stays visible against dark background
    border-radius: 0.25rem; Matches Bootstrap's default rounded corners
}*/

/* Horizontal alignment */
.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.navbar li {
  position: relative;
}

.navbar li a {
  display: block;
  padding: 15px 20px;
  text-decoration: none;
}

/* Define your custom theme name */
[data-bs-theme="orangegray"] {
  /* Global properties for this theme context */
  --bs-body-color: #ffffff;

  /* Specific overrides for the dropdown component */
  --bs-dropdown-bg: #ad601f; /*e69138 ffffff; #4a2c6d; */
  /*--bs-dropdown-color: #ffffff; */
  --bs-dropdown-link-color: #245e85; /*888888;*/
  --bs-dropdown-link-hover-bg: #917b70 !important; /*#917b70;*/ /* hover background color (controls focus bg also) */
  --bs-dropdown-link-hover-color: #000000; /* ffffff;*/
  --bs-dropdown-link-active-bg: #fa9138 !important; /* link background when clicked */
  --bs-dropdown-link-active-color: #000000; /* text color of active link */
  --bs-dropdown-border-color: #3b1d08;
  --bs-dropdown-spacer: 5px;
}

[data-bs-theme="orangegray"] .dropdown-item {
  padding: 5px 10px; /* Adjust top/bottom and left/right padding of dropdown card. */
}
[data-bs-theme="orangegray"]
.dropdown-menu .dropdown-item:hover {
  background-color: #917b70; /* Hover color */
}

.dropdown-menu .dropdown-item:focus {
  background-color: #ad601f; /* Focus color */
  color: #333333;            /* light gray */
}

[data-bs-theme="orangegray"] .dropdown-menu {
  margin-top: 0px; /* Adds space between button and menu */
}

.navbar .dropdown-menu {
  margin-top: -10px !important; /* Increase this to add space, or use 0 to remove it */
}

.dropdown-menu-fit {
  min-width: min-content; /* Removes the 10rem minimum limit */
  width: max-content;     /* Scales perfectly to the widest item */
}

/* Define the animation keyframes */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-200px); /* Starts 200px to the left */
  }
  to {
    opacity: 1;
    transform: translateX(0);  /* Moves to its final position */
  }
}

/* Apply animation class to html element */
.fade-in-left {
  animation: fadeInLeft 3s ease-out forwards;
}

/* Define the animation keyframes */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(200px); /* Starts 200px to the right */
  }
  to {
    opacity: 1;
    transform: translateX(0);    /* Moves to its final position */
  }
}

/* Apply animation class to html element */
.fade-in-right {
  animation: fadeInRight 3s ease-out forwards;
}

.accordion {
  --bs-accordion-btn-color: #212529; /* Text color when the accordion is closed (black pearl) */
  --bs-accordion-btn-bg: #efe4b0;  /* Pale yellow (bone white) */
  --bs-accordion-active-bg: #fa9138;
  --bs-accordion-active-color: #000000 !important; /* 0c63e4;*/
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-bg: #cccccc;
}

.accordion-button.active {
  background-color: #4f46e5;
  color: green !important;
}

/*  --bs-accordion-btn-color: #212529;*/
  
  /* Text color when the accordion is open/active */
/*  --bs-accordion-active-color: #0c63e4;*/

/* To ensure the color stays or adapts when hovered aba690 cfc8ab*/
.btn-custom-faq:hover {
  background-color: #eb9246 !important;
  /*color: #444444 !important;*/
}

/* Custom button */
.btn-custom-faq {
  /*background-color: #980000;
  background-color: #ffffff;
  color: #ffffff; */
}

/* Custom class targeting a specific form button */
.btn-custom-form {
  background-color: #f6b26b; /* Same orange as page background ;b45f06; Custom Orange */
  border-color: #000000; /*f6b26b;*/
  color: #245e85;
  font-size: 18px;
  font-weight: bold;
}

/* Ensure hover and focus states match your custom brand color */
.btn-custom-form:hover, 
.btn-custom-form:focus, 
.btn-custom-form:active {
  background-color: #e69138;
  border-color: #000000;/*cc5f06;*/
  color: #000000;
}

.marquee-container {
  width: 100%;
  overflow: hidden;
  background-color: #f7fafc; /* off-white */
  padding: 30px 0;
}

.marquee-track {
  display: flex;
  width: max-content;
  gap: 24px; /* Space between cards */
  animation: scroll 20s linear infinite;
  padding-left: 50px; /* Starting margin for the first item */
}

/* Pause animation on hover (or click on mobile) */
/*.marquee-track:hover { pauses only when cards are clicked */
.marquee-container:hover .marquee-track { /* pauses when container is clicked, including cards */
  animation-play-state: paused;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Translates exactly 50% so the duplicate set seamlessly replaces the original */
    transform: translateX(-50%);
  }
}

/* Styling for the cards */
.testimonial-card {
  background: #cccccc;
  padding: 24px;
  border-radius: 12px;
  width: 350px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.testimonial-card p {
  font-size: 1rem;
  color: #4a5568;
  margin-bottom: 16px;
}

.testimonial-card h4 {
  font-size: 1.125rem;
  color: #1a202c;
}

.custom-social-icons {
  display: flex;           /* Activate flexbox */
  gap: 10px;               /* Space between icons */
  justify-content: center; /* Optional: center horizontally */
  align-items: center;     /* Optional: align vertically */
}

.custom-social-icons a {
  margin-right: 15px;
  color: #fff;
  font-size: 20px;
  transition: color 0.3s ease;
}

.custom-social-icons a:hover {
  color: #f39c12;
}

/*
   Mobile-First Approach Base Styles:
   ---------------------------------

   Device                    Breakpoint Setting
   Wide Screens              @media (min-width: 1600px)
   Wide Screens              @media (min-width: 1400px)
   Monitors / Desktops       @media (min-width: 1200px)
   Laptops / Small desktops  @media (min-width: 992px)
   Tablets                   @media (min-width: 768px)
   Larger / Landscape phones @media (min-width: 576px)
   Large portrait mobile     @media (min-width: 440px)
   Medium portrait mobile    @media (min-width: 390px)
   Small portrait mobile     @media (min-width: 360px)
   Smaller mobile devices    @media (min-width: 320px) <-- Make this the default styling if broken on iPhone SE
   Smartwatches              (No media query)
*/

/* iPhone SE, First generation (320), Galaxy Z Fold 5 (344) */
/*@media screen and (min-width: 320px), screen and (min-device-width: 320px) {*/
/*Default screen settings:*/
  /* Prevent the navbar container from trapping the absolute elements layout */
  .navbar-collapse {
    position: relative;
  }
  
  /* Force the menu to overlay like it does on desktop */
  .navbar-nav .dropdown-menu {
    position: absolute !important;
    float: none;
    background-color: #e69138; /* Ensures underlying content doesn't bleed through */
    box-shadow: 0px 8px 16px rgba(0,0,0,0.1); /* Adds separation depth */
    width: 100%; /* Optional: ensures it spans wide enough on small screens */
  }

  .card-img-overlay {
    h1 {
      font-size: 35px !important;
      /*background-color: lightgreen !important;*/
    }
    h3 {
      font-size: 20px !important;
      /*background-color: lightblue !important;*/
    }
  }

  .signature {
    .title-text {
      display: inline-block !important;
      margin-bottom: 0px !important;
      padding-bottom: 0px !important;
      font-size: 19px !important;
    }
    .mailto-address {
      font-size: 17px !important;
    }
    .copyright {
      font-size: 14px !important;
    }
  }

  .divider {
    margin: 20px 40px !important;
  }

  .heading h2 {
    font-size: 22px !important;
  }

  .image-scale {
    width: 100%;
    height: auto;
    margin-left: 0px !important;
    margin-right: 0px !important;
  }

  .wrapper-index {
    margin-left: 0px !important; /* Fixes right side overflow */
    margin-right: 0px !important;
    overflow-x: hidden !important; /* Hides content extending beyond container's edges */
  
    padding-left: 0px !important;
    padding-right: 0px !important;
    h2 {
      margin-left: 8px !important;
      font-size: 22px !important;
    }
    h4 {
      margin-left: -24px !important;
	  margin-right: -4px !important;
      font-size: 20px !important;
    }
    ul {
      margin-left: 4px !important;
      margin-right: 8px !important;
      font-size: 17px !important;
    }
    .mx-lg-custom {
      margin-top: 0px !important;
      margin-left: 20px !important;
      margin-right: 20px !important;
    }
    .custom-indent { /* Adapts indentation for quoted statements */
      /*padding-left: -4px !important;*/
      margin-left: -40px !important;
      margin-right: 0px !important;
    }
    .contactme {
      margin-left: 8px !important;
      margin-right: 8px !important;
      font-size: 17px !important;
    }
    .tmmgoal { /* Override the h2 styling for this subelement (or use h3) */
      h2 {
        margin-left: -22px !important;
        margin-right: -22px !important;
      }
    }
  }

  .wrapper-approach {
    margin-left: 0px !important; /* Fixes right side overflow */
    overflow-x: hidden !important; /* Hides content extending beyond container's edges */
    padding-left: 0px !important;
    padding-right: 0px !important;
    .container-lg {
      font-size: 17px !important;
    }
    ul {
      padding-left: 24px !important;
    }
  }

  .wrapper-background {
    margin-left: 0px !important; /* Fixes right side overflow */
    overflow-x: hidden !important; /* Hides content extending beyond container's edges */
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .custom-gutter {
    --bs-gutter-x: 0px !important; 
  }

  /* Combine background with wrapper-background? This background is the class attribute for
     the informational div within the wapper-background. */
  .background {
    padding-left: 16px !important;
    padding-right: 16px !important;
    font-size: 17px !important;
    ul {
      padding-left: 24px !important;
      font-size: 17px !important;
    }
  }

  .credentials {
    /*display: block; Stretches to 100% of its parent container. inline-block Only as wide as its inner content.*/
    max-width: 100% !important;
    height: auto !important;
    h2 {
      font-size: 30px !important;
    }
    h5 {
      font-size: 16px !important;
    }
  }

  .wrapper-faq {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important; /* Hides content extending beyond container's edges */
    .accordion-button {
      font-size: 18px !important;
    }
    .accordion-body {
      font-size: 16px !important;
    }
  }