/* stylelint-disable selector-list-comma-newline-after */

/* .blog-header {
  line-height: 1;
  border-bottom: 1px solid #e5e5e5;
}

.blog-header-logo {
  /* font-family: "Playfair Display", Georgia, "Times New Roman", serif; */
/* font-family: 'Poppins', sans-serif;
  font-size: 2.25rem;
} */

/* .blog-header-logo:hover {
  text-decoration: none;
} */

header {
  padding: 15px 0
}

header .mb-3,
header .my-3 {
  margin: 0 !important;
}

*/ h1,
h2,
h3,
h4,
h5,
h6 {
  /* font-family: "Playfair Display", Georgia, "Times New Roman", serif; */
  font-family: 'Poppins', sans-serif;
}

/* .display-4 {
  font-size: 2.5rem;
}

@media (min-width: 768px) {
  .display-4 {
    font-size: 3rem;
  }
} */

/* .nav-scroller {
  position: relative;
  /* z-index: 2; */
/* height: 5.75rem; */
/* overflow-y: hidden; */
/* } */
/* 
.nav-scroller .nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.nav-scroller .nav-link {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: .875rem;
} */

.card-img-right {
  height: 100%;
  border-radius: 0 3px 3px 0;
}

.flex-auto {
  -ms-flex: 0 0 auto;
  -webkit-box-flex: 0;
  flex: 0 0 auto;
}

.h-250 {
  height: 250px;
}

@media (min-width: 768px) {
  .h-md-250 {
    height: 250px;
  }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}

.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

/*
   * Blog name and description
   */
.blog-title {
  margin-bottom: 0;
  font-size: 2rem;
  font-weight: 400;
}

.blog-description {
  font-size: 1.1rem;
  color: #999;
}

@media (min-width: 40em) {
  .blog-title {
    font-size: 3.5rem;
  }
}

/* Pagination */
.blog-pagination {
  margin-bottom: 4rem;
}

.blog-pagination>.btn {
  border-radius: 2rem;
}

/*
   * Blog posts
   */
.blog-post {
  margin-bottom: 4rem;
}

.blog-post-title {
  margin-bottom: .25rem;
  font-size: 2.5rem;
}

.blog-post-meta {
  margin-bottom: 1.25rem;
  color: #999;
}

/*
   * Footer
   */
.blog-footer {
  padding: 2.5rem 0;
  color: #999;
  text-align: center;
  background-color: #f9f9f9;
  border-top: .05rem solid #e5e5e5;
}

.blog-footer p:last-child {
  margin-bottom: 0;
}

navbar-component+.snap-content {
  top: 60px;
}

.is-nav-login+.snap-content {
  top: 100px;
}



.footer {
  background-color: #f8f9fa; /* Ensure the footer has a background */
  padding: 15px 0; /* Some padding for the footer */
  width: 100%;
  position: static; /* Use static positioning */
  clear: both; /* Ensure it clears any floated elements */
}



/***************************************************************************
************************************* NavBar *******************************
****************************************************************************/

/* Ensure navbar is responsive */
.navbar {
  background: linear-gradient(90deg, #c2c5ca, #c9dbfe);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
  z-index: 900;
  /* Adjust to a high enough value */
  position: relative;
  /* Make sure it's positioned relative to the page */
}

.navbar-brand {
  font-size: 1.5rem;
  font-weight: bold;
}

.navbar-nav .nav-item .nav-link {
  color: #333;
  padding: 0.5rem 1rem;
}

.navbar-toggler {
  border-color: #ccc;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;...");
}

.navbar-brand img {
  height: 40px;
  /* Adjust as needed */
  width: auto;
  /* Maintain aspect ratio */
}

/* Adjustments for mobile */
@media (max-width: 768px) {
  .navbar-nav {
    text-align: center;
  }

  .navbar-brand {
    margin-right: auto;
    /* Ensure the logo aligns well in mobile view */
  }

  /* Optional: Style for the navbar and dropdown items in mobile view */
  .navbar-collapse.collapse.show {
    position: absolute;
    /* Ensures it is above the body content */
    width: 100%;
    /* Full width for better display on mobile */
    background: linear-gradient(90deg, #a5b2c7, #c9dbfe);
    /* Optional: Give it a background color */
  }

  /* Gap between the nabbar and the body in the mob view */
  navbar-component+.snap-content {
    top: 55px;
  }
}


/* For larger screens, keep the form on the right */
/* @media (min-width: 992px) {
  .search-form-right {
    position: relative;
    margin-left: auto;
  }
} */

/* For smaller screens, align the form properly with nav items */
/* @media (max-width: 991px) {
  .search-form-right {
    display: flex;
    justify-content: center; 
    width: 100%;
    margin-top: 0.5rem;
  }

} */

.navbar-nav .nav-link:hover {
  color: #f8b400 !important;
  transition: color 0.3s ease !important;
}

.navbar-brand,
.nav-link {
  font-family: 'Poppins', sans-serif;
}

/* Ensure the navbar content isn't hidden when collapsed */
.navbar-collapse.collapse.show {
  z-index: 1050;
  /* Ensure it's visible on top */
  position: relative;
  /* Ensure proper positioning */
}

/* Ensure parent containers do not hide overflow */
body,
header,
.container {
  overflow: visible;
  /* Ensure nothing is clipped or hidden */
}