body {
    font-family: 'Roboto', sans-serif;
  }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto Slab', serif;
}

p {
    font-family: 'Roboto', sans-serif;
}

h2, h3, h4, h5, h6 {
    margin-top: 1.4rem;
    margin-bottom: 1.4rem;
    line-height: 1.2em;
}

h2 {
    font-size: 42px;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

img.right-float {
  float: right;          /* pushes the image to the right side of the container */
  margin: 0 0 10px 10px; /* adds space between the image and the text */
}

.bg-mc-blue {
    background-color: #1a3b5c;
}

.jumbotron {
    margin-bottom: 0;
    padding: 40px 0 40px 0;
    color:#fff;
    background-color: #1a3b5c;
}

.home-sec-1 {
    position: relative;
    z-index: 0; /* Ensures the parent element is positioned above the pseudo-element */
    background-image: url('../images/home-hero1.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.imagedarken50::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); /* This adds a 50% opacity black overlay */
    pointer-events: none; /* Ensures the overlay doesn't interfere with any interactions */
    z-index: -1; /* Adjust if other elements are above the overlay */
}

.imagebrighten50::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)); /* This adds a 50% opacity white overlay */
  pointer-events: none; /* Ensures the overlay doesn't interfere with any interactions */
  z-index: -1; /* Adjust if other elements are above the overlay */
}



.home-parallax-sec-3 {
    position: relative; /* This confines the pseudo-element within this element */
    z-index: 0; /* Ensures the parent element is positioned above the pseudo-element */
    /* The image used for parallax effect */
    background-image: url('../images/home-sec-bg-2.webp'); /* Make sure to use the correct path to your image */

    /* Set a specific height */
    min-height: 100px; /* Adjust this value depending on how much parallax effect you want */

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.home-parallax-sec-6 {
     position: relative; /* This confines the pseudo-element within this element */ 
     z-index: 0; /* Ensures the parent element is positioned above the pseudo-element */
    /* The image used for parallax effect */
     background-image: url('../images/home-sec-bg-3.webp'); /* Make sure to use the correct path to your image */

     /* Set a specific height */
     min-height: 1000px; /* Adjust this value depending on how much parallax effect you want */
 
     /* Create the parallax scrolling effect */
     background-attachment: fixed;
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
}

/* BUTTON STYLES */

/* Custom button styles */
.custom-btn {
    display: inline-block;
    padding: 8px 16px; /* Adjust padding as needed */
    background-color: #1a3b5c; /* Dark blue color from the image */
    border: 2px solid transparent;
    border-radius: 0px; /* Adjust border-radius as needed */
    transition: all 0.3s; /* Smooth transition for hover effect */
    text-align: center; /* Center the text */
    text-decoration: none; /* Remove the underline */
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
}

.custom-btn span {
    color: #fff; /* White text color */
    font-weight: bold; /* Bold font weight */
    text-transform: uppercase; /* Uppercase letters */
}

/* Hover styles */
.custom-btn:hover {
    background-color: #fff; /* White background on hover */
    border: 2px solid #1a3b5c; /* Dark blue border on hover */
    text-decoration: none; /* Remove the underline */
}

.custom-btn:hover span {
    color: #1a3b5c; /* Dark blue text color on hover */
}


/* NAVBAR STYLES */

.navbar {
    background-color: #333;
    overflow: visible;
    display: flex;
    justify-content: space-between; /* Align hamburger menu */
  }
  
  .hamburger-menu {
    display: none; /* Hidden by default */
  }
  
  .navbar-links {
    list-style-type: none; /* Remove bullets */
    padding-left: 0; /* Remove padding */
    margin: 0; /* Remove margins */
    display: flex;
    justify-content: space-around;
    flex-grow: 2; /* Take remaining space */
  }
  
  .nav-link {
    display: flex;
    align-items: center; /* Align vertically */
    height: 50px;
  }
  
  .nav-link a {
    color: white;
    padding: 14px 20px;
    text-decoration: none;
    display: block;
  }
  
  .dropdown {
    position: relative;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  /* Style changes on hover */
  .nav-link a:hover, .dropdown-content a:hover {
    background-color: #555;
  }
  
  /* Showing the dropdown */
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  /* Hamburger icon */
  #hamburger {
    background-color: #333;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 1.5em;
  }
  
  #hamburger:focus {
    outline: none;
  }
  
  /* Responsive section */
  @media screen and (max-width: 600px) {
    .navbar-links {
      display: none; /* Hide links */
    }
  
    .hamburger-menu {
      display: flex; /* Show hamburger icon */
    }
  
    .navbar-links.show {
      display: flex;
      flex-direction: column;
      width: 100%;
    }
  
    .dropdown-content {
      position: static; /* dropdown fix for mobile */
    }
  }



/* ACCORDION STYLES */

#faqAccordion > .accordion-item:first-child h2 {
    margin-top: 0;
}



.img-border-mc {
    border: 2px solid #1a3b5c;

}



/* MISC. TEXT STYLES */



h4 {
  color: #2c3e50;
}
.bold {
  font-weight: bold;
}
.underline {
  text-decoration: underline;
}
.list-header {
  font-weight: bold;
  margin-bottom: 10px;
}
ul {
  list-style-type: disc;
  margin-left: 20px;
}
.img-description {
  font-style: italic;
  text-align: center;
  margin-top: 5px;
}
.warning {
  color: #c0392b;
  font-weight: bold;
}
.right-float {
  float: right;
  margin: 0 0 15px 15px;
}



/* HOME PRODUCT IMAGE CONTAINER STYLES */


.image-container {
  text-align: center; /* Center the image and the title */
  padding: 10px; /* Optional: for some space around the image */
}

.image-container .img-fluid {
  width: 100%; /* Make sure the image takes up 100% of the container width */
  height: auto; /* Maintain aspect ratio */
  object-fit: contain; /* Ensure the image stays within bounds */
  margin-bottom: 10px; /* Space between image and title */
}

.image-title {
  margin-top: 0.5rem; /* Adjust space between image and title as needed */
  /* Additional styling for the title if needed */
}


.dave-home-img {
  width: 385px;
  height: 300px;
}