a:hover, a:focus, a:link {text-decoration: underline; }

/* blog index page */
.h3textblog { font-size: 1.25em; }
.textcolorbuttonblog {background-color: #1779ba ; color: #fff !mportant;}
a.textcolorbuttonblog a:hover { color: #fff !important; }
.textcenter { text-align: center; }




/* blog index page - featured spotlight card */
.card-user-container .card-user-social {
  background: #e6e6e6;
  padding: 1rem;
  text-align: center;
}


.card-user-container .card-user-social ul {
  display: inline-block;
}
.card-user-container .card-user-social ul li {
  margin: 0 10px;
  font-size: 1.2em;
  cursor: pointer;
}
.card-user-container .card-user-social ul li:hover {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
      -moz-transform: scale(1.1);
      -o-transform: scale(1.1);
}
.card-user-container .card-user-button {
  text-align: center;
  padding: 1rem;
}


/* Blog Slider on Index Page */

.orbit-container {
      max-width: 100%;
      margin: 0 auto;
    }
    .orbit-slide {
      display: flex; /* Aligns items horizontally */
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .orbit-slide-item {
      flex: 0 0 32%; /* Ensures 3 items per row */
      text-align: center;
      margin-bottom: 20px;
    }
    /* Ensuring the images are 300x300 */
    .orbit-slide-item img {
      width: 300px;
      height: 300px;
 
    }
    .orbit-slide-item h2 {
      font-size: 1.2rem;
      margin: 0.5em 0;
    }
    @media screen and (max-width: 768px) {
      .orbit-slide-item {
        flex: 0 0 48%; /* Adjust to 2 items per row on tablet-sized screens */
      }
    }
    @media screen and (max-width: 480px) {
      .orbit-slide-item {
        flex: 0 0 100%; /* Adjust to 1 item per row on mobile-sized screens */
      }
    }
    
    
 /* AI versus Human and Image container */
 
/* Container to ensure the image does not overflow */
.hover-effect-container {
  overflow: hidden; /* Ensures the image stays within bounds when scaling */
  width: 100%; /* Adjust this to match the width you want */
  max-width: 400px; /* Example of a max-width, adjust as needed */
  display: inline-block;
}

/* Add transition to the image for smooth scaling */
.hover-image {
  width: 100%; /* Ensure the image takes the full width of the container */
  transition: transform 0.3s ease-in-out; /* Smooth transition effect */
}

/* Enlarge image on hover */
.hover-image:hover {
  transform: scale(1.1); /* Scale the image by 10% on hover */
}