body{
  counter-reset: section;
  background-color: #eae8e8;
}

.uld {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: black;
  }
  
  li {
    float: left;
  }
  
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  li a:hover:not(.active) {
    background-color: #111;
  }
  
  .my_blog{
    display: none;
  }


  .show{
    display: block  ;
  }
  .hide{
    display: none;
  }

  /* Product id using css */

  .postNumber{
    height: 20px;
    display: inline-block;
    width: 20px;
  }
  .postNumber::before{
    counter-increment: section;
    content: counter(section);
  }


.btn-primary{
  background-color: teal;
}

.btn-primary:hover{
background-color: rgb(46, 108, 108);
}

.image-frame {
  border: 2px solid #ddd;
  padding: 5px;
  margin-bottom: 20px;
  background-color: #f9f9f9;
}

     /* Spinner styles */
     #loading-spinner {
      position: fixed;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.8);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .spinner-border {
      width: 3rem;
      height: 3rem;
      border: 0.25em solid currentColor;
      border-right-color: transparent;
      border-radius: 50%;
      animation: spinner-border .75s linear infinite;
  }
  @keyframes spinner-border {
      100% {
          transform: rotate(360deg);
      }
  }

   /* Styles for the container */
   .image-container {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect Ratio */
    overflow: hidden;
    background-color: #f0f0f0; /* Optional: Background color for the container */
}

.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the container */
}


.navbar-nav .nav-link {
  margin-right: 22px; /* Adds space between the links */
  font-family: 'Poppins', sans-serif; /* Applies the Google Font */
  font-size: 16px; /* Adjusts the font size */
  font-weight: 500; /* Adds a bit of boldness */
  transition: color 0.3s ease; /* Smooth transition for hover effect */
}
.navbar-nav .nav-link:hover {
  color: #f8f9fa; /* Changes the text color on hover */
  background-color: #343a40; /* Optional: Add background color on hover */
  border-radius: 5px; /* Rounds the corners of the hover effect */
}
.navbar-brand img {
     vertical-align: middle; /* Align images vertically in the middle */
     margin-top: 0; /* Reset margin-top if needed */
 }

a:hover {
    text-decoration: none;
}