.page-header {
    margin-bottom: 40px;
}
/* header.header.container-header.full-width {
    display: flex;
}
.container-header .grid-child:first-child {
    margin-left: 8%;
} */
figure.right.item-image {
    padding-left: 40px;
}
.blog-item {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1320px;
}
/* Target mobile and tablet screens */
@media (max-width: 768px) {
  .blog-item {
    /* Stack elements vertically */
    flex-direction: column !important; 
    width: 100% !important; 
    max-width: 100%;
  }

  /* Target the image container explicitly */
  .blog-item .left_item-image,
  .blog-item figure {
    width: 100% !important;
    /* Forces the image to the absolute bottom of the flex container */
    order: 2 !important; 
  }

  /* Target the text/content container explicitly */
  .blog-item .item-content,
  .blog-item div:not(.left_item-image) {
    width: 100% !important;
    /* Forces the text to the absolute top of the flex container */
    order: 1 !important; 
  }
}
.blog-item .item-image {
  flex: 0 0 auto;             /* Prevents the image container from shrinking */
  margin: 0;                  /* Clears any default figure margins */
}

.blog-item .item-content {
  flex: 1;                    /* Allows the text content to fill the remaining space */
}
@media (max-width: 768px) {
  /* 1. Force the hidden carousel caption to display on mobile */
  .blog-item .carousel-caption {
    display: block !important;
    position: absolute !important;
    left: 5% !important;
    right: 5% !important;
    bottom: 20px !important;
    max-width: 90% !important;
    text-align: center !important;
  }

  /* 2. Optimize the Heading/Title size for mobile viewports */
  .blog-item .carousel-caption h2 {
    font-size: 1.5rem !important; /* Prevents text from overflowing the image */
    margin-bottom: 15px !important;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8); /* Ensures high text readability */
  }

  /* 3. Style the "Read Article" link so it is easy to tap on phones */
  .blog-item .carousel-caption .btn-primary {
    display: inline-block !important;
    padding: 8px 20px !important;
    font-size: 0.9rem !important;
    width: auto !important; /* Overrides the previous "width: 100%" column rule */
  }
}

@media (max-width: 768px) {
  /* Center the bottom dot indicator container */
  .blog-item .carousel-indicators {
    display: flex !important;
    justify-content: center !important;
    left: 0 !important;
    right: 0 !important;
    margin-right: auto !important;
    margin-left: auto !important;
    width: 100% !important;
    padding: 0 !important;
  }
}
@media (max-width: 767.98px) {
  /* Adds space above and below the navigation bar */
  .container-nav nav.navbar {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    
    /* Adds 15px gap on top and bottom, 0px on sides */
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
}

.home .page-header {
    text-align: center;
        margin-bottom: inherit;
}
/* Center any menu module published in the Cassiopeia footer wrapper */
.container-footer .mod-menu {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

/* Ensure the horizontal menu list items themselves stay centered */
.container-footer ul.mod-menu {
    padding-left: 0;
    margin-bottom: 0;
}
.footer .grid-child {
    flex-wrap: wrap;
    justify-content: center;
}
.com-contact.contact .page-header {
    margin: 0;
}
.com-contact__container {
    grid-gap: initial;
}