.fittext {
    white-space: nowrap !important;
    display: inline-block;
    max-width: 100%;
    transform-origin: center center;
    font-size: clamp(12px, 3vw, 48px);
}


/* Smooth zoom */
.hover-zoom {
  transition: transform 0.3s ease;
}

.hover-zoom:hover {
  transform: scale(1.075);
}

/* Smooth color change */
.hover-color {
  transition: color 0.3s ease;
}

.hover-color:hover {
  color: #cc0000;
}

.blog-hover-bg {
  transition: background-color 0.3s ease;
}

.blog-hover-bg:hover {
  background-color: lightgrey; /* background when hovered */
}

/* Smooth lift effect */
.hover-lift {
  transition: all 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}







/* Slide open-close for selected Details blocks only */
details.slide-open-close::details-content {
  display: block;
  overflow: clip;
  transform-origin: top;
  transform: scaleY(0);
  transition: transform .35s ease;
}

details.slide-open-close[open]::details-content {
  transform: scaleY(1);
}


/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  details.slide-open-close::details-content,
  details.slide-open-close[open]::details-content {
    transition: none;
  }
}


.fade-in {
  opacity: 0;
  animation: fadeIn .75s ease-in forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.my-hover-block {
  background-color: #ffffff; /* default color */
  color: #333;
  transition: all 0.3s ease;
}

.my-hover-block:hover {
  background-color: rgba(111, 191, 209, 0.175); /* semi-transparent hover */
  color: #333; /* keep text color same or change as needed */
  cursor: pointer;
}

.accordion-header {
    font-weight: 400;
}

.small-hover-zoom {
  transition: transform 0.3s ease; /* smooth animation */
}

.small-hover-zoom:hover {
  transform: scale(1.025); /* small zoom (5%) */
}