/* Tab Active States */
.tab-active {
    color: #22c55e !important;
    border-bottom-color: #22c55e !important;
}

.tab-inactive {
    color: #000000 !important;
    border-bottom-color: transparent !important;
}

/* Section transitions */
section {
    position: relative;
}

/* Image object fit */
.object-contain {
    object-fit: contain;
}

/* Custom Scrollbar for sliders */
#slider-residential::-webkit-scrollbar {
    height: 4px;
}

#slider-residential::-webkit-scrollbar-track {
    background: transparent;
}

#slider-residential::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 10px;
}


/* Hero Section text shadow for better readability if needed */
.hero-text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Hero Image Styling */
.hero-image {
    margin: 0.5rem;
    border-radius: 0.75rem;
    overflow: hidden;
}

@media (min-width: 768px) {
    .hero-image {
        margin: 1rem;
    }
}

/* Nav indicator and active glow */
.nav-link {
    transition: text-shadow 0.3s ease, color 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
    color: #ffffff;
}

.nav-indicator {
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}

.nav-link.active .nav-indicator {
    transform: translateX(-50%) scaleX(1);
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Team Slider Responsiveness (維持 Desktop Design below 1024px) */
@media (max-width: 1023px) {
    .team-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-end !important;
        box-sizing: border-box !important;

        /* Proportional card height and padding scaling */
        height: clamp(250px, 42vw, 430px) !important;
        padding-top: clamp(12px, 3.5vw, 56px) !important;
        padding-bottom: clamp(12px, 3.5vw, 56px) !important;
        padding-left: clamp(16px, 4vw, 56px) !important;
        padding-right: clamp(16px, 4vw, 56px) !important;
        gap: clamp(12px, 4vw, 40px) !important;
        border-radius: clamp(1.5rem, 3vw, 2.5rem) !important;
    }

    .team-card-image-wrap {
        flex-shrink: 0 !important;
        border-radius: clamp(1rem, 2vw, 2rem) !important;
        overflow: hidden !important;
        z-index: 20 !important;

        /* Height must match card height for the top overflow to work correctly */
        height: clamp(250px, 42vw, 430px) !important;

        /* Proportional image width */
        width: clamp(80px, 28vw, 281px) !important;

        /* Subtle negative margin for right overflow, scaling down with screen size */
        margin-right: clamp(-16px, -1.5vw, -4px) !important;
        margin-bottom: 0 !important;
    }

    /* Scale quotes icon and text */
    .team-card-quote-icon {
        width: clamp(24px, 4.5vw, 64px) !important;
        height: auto !important;
    }

    .team-card-quote-wrap {
        margin-bottom: clamp(8px, 1.5vw, 24px) !important;
        height: auto !important;
    }

    .team-card-quote-text {
        font-size: clamp(11px, 1.6vw, 20px) !important;
        line-height: 1.5 !important;
    }

    /* Scale names and titles */
    .team-card-name-wrap {
        margin-top: clamp(8px, 2vw, 32px) !important;
    }

    .team-card-name {
        font-size: clamp(13px, 2.2vw, 24px) !important;
        line-height: 1.2 !important;
    }

    .team-card-title {
        font-size: clamp(9px, 1.3vw, 14px) !important;
        line-height: 1.2 !important;
        margin-top: clamp(2px, 0.5vw, 4px) !important;
    }
}

/* Specific Mobile Proportions below 768px to balance layout */
@media (max-width: 767px) {
    .team-card {
        height: clamp(210px, 35vw, 250px) !important;
        padding-top: clamp(10px, 2.5vw, 16px) !important;
        padding-bottom: clamp(10px, 2.5vw, 16px) !important;
        padding-left: clamp(14px, 3.5vw, 24px) !important;
        padding-right: clamp(14px, 3.5vw, 24px) !important;
        gap: clamp(10px, 3vw, 16px) !important;
    }

    .team-card-image-wrap {
        /* Height matches card height for top overflow */
        height: clamp(210px, 35vw, 250px) !important;

        /* Increase image width on mobile for better visual presence */
        width: clamp(110px, 25vw + 40px, 150px) !important;

        /* Reduce right overflow slightly to fit smaller viewport edges */
        margin-right: clamp(-10px, -1vw, -2px) !important;
    }
}

/* Specific Mobile Proportions below 500px to prevent text overflow */
@media (max-width: 499px) {
    .team-card {
        height: clamp(235px, 50vw, 260px) !important;
        padding-top: clamp(10px, 2vw, 14px) !important;
        padding-bottom: clamp(10px, 2vw, 14px) !important;
        padding-left: clamp(12px, 3vw, 16px) !important;
        padding-right: clamp(12px, 3vw, 16px) !important;
        gap: 10px !important;
    }

    .team-card-image-wrap {
        height: clamp(225px, 40vw, 240px) !important;
        width: clamp(135px, 40vw, 150px) !important;
        margin-right: -4px !important;
        margin-bottom: 14px !important;
    }

    .team-card-quote-icon {
        width: clamp(20px, 4vw, 28px) !important;
    }

    .team-card-quote-wrap {
        margin-bottom: 6px !important;
    }

    .team-card-quote-text {
        font-size: 10.5px !important;
        line-height: 1.45 !important;
    }

    .team-card-name-wrap {
        margin-top: 6px !important;
    }

    .team-card-name {
        font-size: 12.5px !important;
    }

    .team-card-title {
        font-size: 9px !important;
        margin-top: 2px !important;
    }
}