@media (max-width: 992px) {
    .navbar-collapse {
        display: none !important;
    }
    .navbar-collapse.collapse.show
    {
      display: block !important;
    }
    .collapse
    {
      visibility: visible;
    }
    .firstSection
    {
      margin-top:-7rem;
    }

    .logoCustomer
    {
      max-width:60%;
      margin-left:20%;
    }
}

.collapse
{
  visibility: visible;
}


.faqContainer
{
  width:45%;
}

@media (max-width: 800px) {
  .faqContainer
  {
    width:90%;
  }
}


.faqHeading
{
  color:#FFFFFF;
  font-size:1.2rem;
  padding-top:5px;
}

.faqButton
{
  display:inline-block;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.faqButton:hover
{
  background-color: #a8977a !important;
  transition: all 0.4s ease-in-out;
}

.faqDesc
{
  padding-top:10px;
  color:#555;
  margin-bottom:0px !important;
}

.faqSVG
{
  float:right;
  margin-top:-1.85rem;
}


#open_preferences_center
{
  display:none;
}


.service-item h3
{
  font-size:1.1rem;
}


.navbar-brand
{
  /* margin-right:0.1rem !important; */
  margin-right:5px !important;
}




h7
{
  font-size:0.8rem;
}




/* Main container for the slider - this holds the images and navigation buttons */
.slider-container {
    position: relative; /* Allows for absolute positioning of navigation buttons */
    width: 100%; /* Sets the slider width to 60% of the parent container */
    max-width: 800px; /* Maximum width for larger screens */
    overflow: hidden; /* Hides the overflow content (only one image is visible at a time) */
    border-radius: 10px; /* Rounds the corners of the slider */
}

/* Flexbox container that holds all the slides */
.slider {
    display: flex; /* Enables flexbox layout to line up slides horizontally */
    transition: transform 0.4s ease-in-out; /* Smooth transition when sliding between images */
}

/* Each individual slide - takes up full width of the container */
.slide {
    min-width: 100%; /* Each slide takes up 100% of the slider container's width */
    height: 450px; /* Fixed height for each slide */
    transition: transform 0.5s ease-in-out; /* Smooth transition when slides are changed */
}

/* Ensures that images fill the slide area while maintaining aspect ratio */
.slide img {
    width: 100%; /* Image width matches the slide width */
    height: 100%; /* Image height matches the slide height */
    border-radius: 10px; /* Rounds the corners of the images to match the slider */
    object-fit: contain;
}

/* Common styling for both previous and next navigation buttons */
.prev, .next {
    position: absolute; /* Absolute positioning within the slider container */
    top: 50%; /* Centers the button vertically */
    transform: translateY(-50%); /* Offsets the button position by half its height */
    background-color: rgba(0, 0, 0, 0.07); /* Semi-transparent black background */
    color: white; /* White color for the arrow icons */
    border: none; /* Removes default button borders */
    width: 40px; /* Fixed width for the buttons */
    height: 40px; /* Fixed height for the buttons */
    cursor: pointer; /* Changes the cursor to pointer on hover */
    z-index: 10; /* Ensures buttons appear above the slider content */
    border-radius: 50%; /* Makes the buttons round */
    transition: background-color 0.3s ease; /* Smooth transition for background color on hover */
    display: flex; /* Enables flexbox for centering the arrow inside the button */
    justify-content: center; /* Centers arrow horizontally */
    align-items: center; /* Centers arrow vertically */
    padding: 0; /* Removes any default padding */
    box-shadow: none;
}

/* Positioning the previous button to the left */
.prev {
    left: 10px; /* Positions the button 10px from the left edge */
}

/* Positioning the next button to the right */
.next {
    right: 10px; /* Positions the button 10px from the right edge */
}

/* Hover effect for navigation buttons */
.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.3); /* Darkens the button background on hover */
}









.hero-header {
  position: relative;
  overflow: hidden;
}

/* Background layers */
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: heroFade 25s infinite;
}

/* Stagger timing */
.hero-bg:nth-child(1) { animation-delay: 0s; }
.hero-bg:nth-child(2) { animation-delay: 5s; }
.hero-bg:nth-child(3) { animation-delay: 10s; }
.hero-bg:nth-child(4) { animation-delay: 15s; }
.hero-bg:nth-child(5) { animation-delay: 20s; }

/* First image visible immediately */
.hero-bg:first-child {
  opacity: 1;
}

/* Crossfade animation */
@keyframes heroFade {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  20%  { opacity: 1; }
  24%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Overlay */
.hero-header::after {
  content: "";
  position: absolute;
  inset: 0;
  /* background: rgba(0,0,0,0.10); */
  background: rgba(226, 223, 210, 0.10);
  z-index: 1;
}

/* Content above */
.hero-header .container {
  position: relative;
  z-index: 2;
}






@media (max-width: 767px) {
  .navbar-brand
  {
    width:80%;
  }
}