/* ================================
   About Us Section Custom Styles
   ================================ */
.about-image-scroller {
    position: relative;
    height: 100%;
    overflow: hidden;
    /* Keep this */
}

.about-image-list-wrapper {
    will-change: transform;
    display: block;
    /* Try adding this to force layer composition */
    transform: translateZ(0);
}

.about-image-list-wrapper img {
    flex-shrink: 0;
    display: block;
    max-width: 100%;
    min-height: 100px;
    height: auto;
    /* Add this temporarily to ensure visibility */
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fade-in Animation */
.about-animate {
    opacity: 0;
    transform: translateY(30px);
    /* Start slightly lower */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
    /* Performance hint for the browser */
}

.about-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
    /* Move to original position */
}

/* Image Scroller Base */
.about-image-scroller {
    position: relative;
    /* Needed for absolute positioning if required later */
    height: 100%;
    /* Take full height of the grid column */
}

.about-image-list-wrapper {
    /* The JS will handle the transform for scrolling */
    will-change: transform;
    /* Optimize scrolling animation */
    display: block;
    /* Ensure it behaves as a block for transform */
}

.about-image-list-wrapper img {
    /* Tailwind classes handle most styling (w-full, h-auto, rounded-lg, mb-4) */
    /* Ensure images don't shrink unexpectedly */
    flex-shrink: 0;
    /* Force block display if needed, though default for img is fine */
    display: block;
    max-width: 100%;
    /* Prevent overflow */
    min-height: 100px;
    /* Example minimum height */
}

/* assets/css/about-style-custom.css OR your main CSS */


/* assets/css/about-style-custom.css OR your main CSS */

/* ... (keep existing .about-animate styles) ... */

.offering-animate.fade-in {
    opacity: 0;
    transition: opacity 0.8s ease-out;
    will-change: opacity;
}

.offering-animate.fade-in.fade-in-visible {
    opacity: 1;
}

/* Smooth max-height transition for accordion content */
.offering-content {
    /* max-h-0 and overflow-hidden applied by Tailwind */
    transition: max-height 0.5s ease-in-out;
}

/* Smooth arrow rotation */
.offering-arrow {
    transition: transform 0.5s ease-in-out;
}

/* Smooth thumb size transition */
.offering-thumb {
    transition: width 0.5s ease-in-out, height 0.5s ease-in-out;

    /* Ensure image inside scales nicely if needed */
    img {
        transition: transform 0.5s ease-in-out;
    }

    /* Optional: Add zoom effect */
}

.offering-item.active .offering-thumb img {
    /* transform: scale(1.1); */
    /* Optional: Slight zoom on open */
}

.offering-content {
    /* max-h-0 and overflow-hidden applied by Tailwind */
    transition: max-height 0.5s ease-in-out;
    box-sizing: border-box;
    /* Ensure padding is included in height */
}


/* assets/css/therapy-animals-custom.css OR your main CSS */

/* ================================
   Therapy Animals Section Styles
   ================================ */

/* Ensure smooth transitions for tab content */
.therapy-animals-tabs .tab-link {
    position: relative;
    /* Tailwind base styles */
}

.therapy-animals-tabs .tab-link.active {
    /* Tailwind active styles */
}

.therapy-animals-tabs .tab-link:not(.active):hover {
    color: #ca8a04;
    /* Tailwind yellow-600 */
}

/* Content Panel Transitions */
.animal-content-panel {
    transition: opacity 0.4s ease-in-out;
}

.animal-content-panel:not(.active) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
}

.animal-content-panel.active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
}

/* Centered Circle Slider Specific Styles */
.circles-viewport-center {
    /* h-[...] overflow-hidden cursor-pointer set in HTML */
    position: relative;
    /* Crucial for absolute positioning of the track */
}

.circles-track-center {
    /* flex items-center h-full absolute left-0 top-0 transition transform set in HTML */
    transform: translateX(0px);
    /* Initial position set by JS */
    will-change: transform;
    /* Padding removed - positioning handled by JS centering logic */
}

.animal-circle-item-center {
    /* flex-shrink-0 relative flex justify-center items-center transition px-* set in HTML */
    /* Default state: smaller, dimmed */
    /* transform: scale(0.75); */
    /* Applied inline by JS */
    /* z-index: 10; */
    /* Applied inline by JS */
    cursor: pointer;
    /* Indicate items are clickable */
}

.animal-circle-item-center .image-wrapper {
    /* w-* h-* rounded-full overflow-hidden shadow border bg-gray-200 transition transform scale-75 set in HTML + JS */
    /* Base state */
    opacity: 0.6;
    border-color: white;
}

.animal-circle-item-center.is-active .image-wrapper {
    /* Active state styles applied by JS (larger size classes, scale(1), z-index, border-color) */
    opacity: 1;
    border-color: #F4B941;
    /* brand-yellow */
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
}

.animal-circle-item-center img {
    display: block;
    /* Prevents extra space */
    /* w-full h-full object-cover set in HTML */
}

/* Active Name Display */
.active-animal-name-display h3 {
    /* styles set in HTML */
    /* opacity transition set in HTML */
    will-change: opacity;
}

/* Navigation Buttons */
.circle-nav-center {
    /* position, top, transform, z-index, p-, bg, hover:bg, rounded, shadow, transition set in HTML */
}

.circle-nav-center:disabled {
    opacity: 0.3;
    /* Tailwind class */
    cursor: not-allowed;
    /* Tailwind class */
    /* Add pointer-events: none if opacity isn't enough to prevent clicks */
    /* pointer-events: none; */
}

.animateThis {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animateThis.in-view {
    opacity: 1;
    transform: translateY(0);
}



/* Minimal CSS for Tabs and Scrollbar */

.therapy-animals-tabs .city-tab {
    /* Base tab styles */

    display: inline-block;
    text-decoration: none;
    color: #aaaaaa;
    /* text-gray-400 */
    font-size: 1.25rem;
    /* text-xl */
    font-weight: 400;
    padding: 4px 8px;
    /* py-1 px-2 */
    margin-right: 1rem;
    /* mr-4 */
    border-bottom: 2px solid transparent;
    transition: color 0.3s ease, border-bottom-color 0.3s ease;
    opacity: 0.8;
}

.therapy-animals-tabs .city-tab:hover {
    color: #f6b736;
    /* hover:text-yellow-500 */
    border-bottom-color: #f6b736;
    /* hover:border-yellow-500 */
    opacity: 1;
}

.therapy-animals-tabs .city-tab.active-tab {
    color: #f6b736;
    /* text-yellow-500 equivalent */
    border-bottom-color: #f6b736;
    /* border-yellow-500 equivalent */
    opacity: 1;
    font-weight: 500;
    /* Make active tab slightly bolder */
}

/* Custom Scrollbar for Tabs (Optional, but nice) */
.therapy-animals-tabs::-webkit-scrollbar {
    width: 7px;
    height: 4px;
    background-color: #d1d5db;
    /* Tailwind gray-300 */
}

.therapy-animals-tabs::-webkit-scrollbar-thumb {
    background-color: #374151;
    /* Tailwind gray-700 */
    border-radius: 5px;
}

/* Swiper specific overrides if needed */
.therapySwiper .swiper-wrapper {
    /* Ensure vertical alignment if needed, Tailwind 'items-center' should handle this */
    align-items: center;
    padding-top: 20px;
    /* Add padding to prevent clipping of scaled-up active slide */
    padding-bottom: 20px;
}

/* Base styles for the therapy box and its contents */
.therapy-box {
    position: relative;
    text-align: center;
    border-radius: 50%;
    overflow: visible;
    /* Allow scaled element to overflow */
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* Smoother transition */
    transform-origin: center bottom;
    /* Scale from bottom center */
    /* Initial Width/Height set via inline Tailwind classes */
}

.therapy-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* Changed from center top */
    border-radius: 50%;
    position: relative;
    /* Initial state: translated, filtered - handled by Tailwind */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.3s ease-in-out;
}

.therapy-animal-name {
    /* Base styling - padding handled inline */
    display: block;
    font-size: 2rem;
    /* Start smaller */
    font-weight: bold;
    color: #f3b500;
    /* Specific yellow */
    letter-spacing: 0.02em;
    /* tracking-wide */
    text-align: center;
    position: absolute;
    bottom: -30px;
    /* Position below the circle */
    left: 0;
    right: 0;
    margin: 0 auto;
    padding-top: 10px;
    /* Initial state: opacity 0 - handled by Tailwind */
    transition: opacity 0.3s ease-in-out;
}


/* Responsive name size adjustments */
@media (min-width: 640px) {

    /* sm */
    .therapy-animal-name {
        font-size: 2.25rem;
        bottom: -35px;
    }
}

@media (min-width: 768px) {

    /* md */
    .therapy-animal-name {
        font-size: 2.5rem;
        bottom: -40px;
    }
}

@media (min-width: 1024px) {

    /* lg */
    .therapy-animal-name {
        font-size: 3rem;
        bottom: -50px;
    }

    /* text-5xl */
}

@media (min-width: 1280px) {

    /* xl */
    .therapy-animal-name {
        font-size: 3.5rem;
        bottom: -60px;
    }

    /* Slightly larger than text-5xl */
}

   /* Media Section Styles */

.media-news-items {
    will-change: transform;
    display: block;
    transform: translateZ(0);
}

.media-news-items a {
    flex-shrink: 0;
    display: block;
}




.colgBox {
    width: 100%;
    aspect-ratio: 1;
    background: #ccc;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    position: relative;
}

.colgBox .colgBxImg {
    width: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
}

.colgBxContent {
    width: 100%;
    background: var(--blueColor);
    color: #fff;
    transition: all 0.6s ease;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    /* p-6 */
    height: 100%;
}

.colgBxContent:hover {
    background: var(--yellowColor);
}

.colgBxText {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.1;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
    margin-bottom: auto;
}

@media (min-width: 768px) {
    .colgBxText {
        font-size: 30px;
    }
}

@media (min-width: 1024px) {
    .colgBxText {
        font-size: 36px;
    }

    .colgBox {
        min-height: 100%;
    }
}

@media (min-width: 1280px) {
    .colgBxText {
        font-size: 60px;
    }
}

@media (max-width: 1024px) {
    .colgBxCenter {
        aspect-ratio: unset;
    }
}

/* Animation helper */
.animateThis {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.6s ease-out;
}

.animateThis.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Circle button */
.circleBtn {
    background-color: var(--yellowColor);
    color: #1e40af;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    display: inline-block;
    transition: background-color 0.3s ease;
    text-decoration: none;
}

.circleBtn:hover {
    background-color: #d97706;
    color: #fff;
}