/* Card and Component Styling */
.feature-card-1 {
    border-color: var(--border-color) !important;
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
    background-color: transparent !important;
    background: transparent !important;
}

.feature-card-1:hover {
    border-color: var(--border-color-light) !important;
    box-shadow: var(--shadow-medium);
    background-color: transparent !important;
    background: transparent !important;
}

/* Force remove all backgrounds from feature cards */
.feature-card-1,
.feature-card-1 *,
.feature-card-1::before,
.feature-card-1::after {
    background: transparent !important;
    background-color: transparent !important;
}

/* Remove any inherited backgrounds */
.border-dark {
    background: transparent !important;
    background-color: transparent !important;
}

/* Override any Bootstrap or framework backgrounds */
.feature-card-1.border.border-dark,
.feature-card-1.border.border-dark *,
.feature-card-1.border.border-dark::before,
.feature-card-1.border.border-dark::after {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Force remove any gradient backgrounds */
.feature-card-1 {
    background-image: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Featured Services Icon Containers - Glassmorphism Effect */
.ver-r4 .w-8.h-8.rounded-circle {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

/* Featured Services Cards Hover Effect */
.service-item {
    min-height: 75px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.metric-card .glassmorphism-box {
    gap: 1.5rem !important;
}

.service-item:hover {
    background-color: var(--color-hover-bg) !important; /* #161718 */
}

.service-content {
    width: 95%;
}

/* Featured Services Text - Single Line with Ellipsis */
.service-content span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    max-width: 100% !important;
}

.service-arrow {
    width: 5%;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Chevron Animation on Hover */
.service-chevron {
    transition: transform 0.3s ease !important;
}

.service-item:hover .service-chevron {
    transform: translateX(4px) !important;
}

/* Make the text content take full width */
.column-list-card .flex-grow-1 {
    width: 100% !important;
    max-width: 100% !important;
}

/* Ensure the button retains its size */
.column-list-card .btn {
    width: auto !important;
    min-width: 120px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: start !important;
}

/* Reduce padding in platform cards on small screens */
.column-list-card {
    padding: 1.5rem !important;
}

/* Base rule for heading-card */
.heading-card {
    padding-top: 3rem !important;
}

/* Key Featured Services - Icon Container Styling */
.service-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    flex-shrink: 0 !important;
}

.column-list-card:hover {
    background-color: var(--color-primary) !important;
}

/* Responsive Section Title Headings with Clamp - Moved to Global Styles */

@media (min-width: 768px) {
    .column-list-card {
        padding: 2.5rem !important;
    }

    .heading-card {
        padding-top: 6rem !important;
    }
   
}

/* Add border-dashed-right to platform-first-col on larger screens */
@media (min-width: 992px) {
    .column-list-card.main,
    .featured-services__second-column {
        border-right: 1px dashed var(--color-dashed-border) !important;
        border-image: repeating-linear-gradient(to bottom, var(--color-dashed-border) 0, var(--color-dashed-border) 6px, transparent 6px, transparent 10px) 1 !important;
        border-image-slice: 1 !important;
    }
    .featured-services {
        border: none !important;
    }
}