.flexible-section {
    background-color: var(--bs-body-bg);
}

.service-card {
    background-color: var(--bs-secondary-bg);
    padding: 0rem 2rem;
    padding-bottom: 1rem;
   
}
.service-card:hover {
 border:2px solid var(--border-primary);
 border-radius: 4px    ;
   
}
.service-card img {
   height: 9rem;
   width: 9rem;
//    background-color: var(--bs-body-bg);
}



.service-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.service-description {
    font-size: 0.8rem;
    color: var(--text-secondary);
    // color: #2b2e41;
    line-height: 1.1;
    font-weight: 400;
}

.image-wrapper img {
    object-fit: contain;
}

@media (max-width: 991px) {
    .image-wrapper {
        margin-top: 1rem;
        min-height: 300px;
    }
}


// new added ===================================

/* Premium Overrides */
:root {
    --cl-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    --cl-shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.cl-hero-header {
    background: radial-gradient(circle at top left, #3f445e, var(--bs-black));
    min-height: 75vh;
    /* Diagonal bottom cut for a modern look */
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
    
    .cl-floating-img {
        animation: cl-float 6s ease-in-out infinite;
        filter: drop-shadow(0 30px 50px rgba(var(--bs-primary-rgb), 0.2));
        transition: var(--cl-transition);
        &:hover { transform: scale(1.02) rotate(1deg); }
    }
}

.cl-mission-overlap {
    margin-top: -120px; 
    
    .card {
        backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
    }
}

.cl-service-card {
    transition: var(--cl-transition);
    border: 1px solid rgba(0,0,0,0.05);
    overflow: hidden;
    position: relative;

    &::after {
        content: "";
        position: absolute;
        bottom: 0; left: 0; width: 0; height: 4px;
        background: var(--bs-primary);
        transition: var(--cl-transition);
    }

    &:hover {
        transform: translateY(-12px);
        box-shadow: var(--cl-shadow-hover) !important;
        &::after { width: 100%; }
        .cl-icon-box { background: var(--bs-secondary-bg); border-radius: 50%; }
    }

    .cl-icon-box {
        transition: var(--cl-transition);
        padding: 15px;
        img { width: 60px; height: 60px; }
    }
}

.cl-value-card {
    transition: var(--cl-transition);
    background: linear-gradient(to bottom right, #ffffff, var(--bs-secondary-bg));
    border:1px dashed var(--bs-primary) !important;
    
    .display-4 {
        background: linear-gradient(120deg, var(--bs-primary), transparent);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
       
    }

    &:hover {
        background: #ffffff00;
        // border-left-width: 3px solid var(--bs-primary) !important;
        box-shadow: var(--cl-shadow-hover);
    }
}

.cl-motto-banner {
    background: linear-gradient(45deg, var(--bs-black), #2b2e41);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.1);

    .cl-motto-shape {
        background: radial-gradient(circle, rgba(var(--bs-primary-rgb), 0.25) 0%, transparent 70%);
        filter: blur(40px);
    }
}

/* New: CTA Button Glow */
.btn-primary-glow {
    background-color: var(--bs-primary);
    box-shadow: 0 4px 15px rgba(var(--bs-primary-rgb), 0.4);
    transition: var(--cl-transition);
    &:hover {
        box-shadow: 0 8px 25px rgba(var(--bs-primary-rgb), 0.6);
        transform: translateY(-2px);
    }
}

@keyframes cl-float {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-25px) rotate(-1deg); }
}