#miniBanner {
        max-height: 300px;
        overflow: hidden;
        position: relative;
        clip-path: polygon(
            0% 0%, 0% 0%, 95% 0%, 100% 0%,
            100% 95%, 95% 100%, 5% 100%, 0% 95%
        );
    }

    /* Banner Images */
    #miniBanner img {
        height: 320px;
        object-fit: cover;
        filter: blur(1.3px);
        transition: transform 1s ease-in-out;
    }

    .carousel-item.active img {
        animation: zoomOut 2s forwards;
    }

    @keyframes zoomOut {
        0% { transform: scale(1.2); }
        100% { transform: scale(1); }
    }

    /* TEXT OVERLAY */
   
.banner-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    padding: 0 20px;
    width: 80%;
    z-index: 5;
}

.banner-text h1 {
    font-size: 48px;     /* Bigger title */
    font-weight: 800;
    margin-bottom: 15px;
    color: #fff;         /* Pure white */
    text-shadow: 0px 3px 6px rgba(0,0,0,0.5);
}

.banner-text p {
    font-size: 18px;     /* Slightly bigger paragraph */
    line-height: 1.5;
    color: #ffffff;      /* Pure white */
    text-shadow: 0px 2px 4px rgba(0,0,0,0.5);
}


    /* ------------------------------------------- */
    /* 1. ANIMATION KEYFRAMES (Keep the same) */
    /* ------------------------------------------- */
    @keyframes gradient-animate {
        0% {
            background-position: 0% 0%;
        }
        50% {
            background-position: 100% 100%;
        }
        100% {
            background-position: 0% 0%;
        }
    }

    /* ------------------------------------------- */
    /* 2. FEATURE ITEM (The Outer Square Box) */
    /* ------------------------------------------- */
    .feature-item {
        border: none !important;

        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        /* Increased min-height to account for the text */
        min-height: 250px; 
        
        /* Changed to column layout to stack image and text */
        display: flex;
        flex-direction: column; /* Stack contents vertically */
        align-items: center; 
        justify-content: center; 
        
        /* Faint Gradient Background */
        background: linear-gradient(45deg, #c1e2ff, #ffe0b2, #c1e2ff, #ffe0b2); 
        background-size: 400% 400%;
        animation: gradient-animate 10s ease infinite; 
        background-color: #f7f7f7; 
    }

    /* Styling for the new Title */
    .feature-title {
        color: #000; /* Ensure the text is visible */
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-top: auto !important; /* Push the title to the bottom */
        margin-bottom: 0 !important; /* No extra margin at the very bottom */
    }

    /* Optional: Hover Effect */
    .feature-item:hover {
        transform: translateY(-5px); 
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); 
        animation: gradient-animate 5s ease infinite; 
    }
	/* Make Safety box wider only */
.feature-wide {
    flex: 0 0 auto;
    width: 260px !important; /* Increase length (width) */
}
/* Subtle animation on all boxes */
.feature-item {
    animation: floatIn 1s ease both;
}

@keyframes floatIn {
    0% { 
        opacity: 0; 
        transform: translateY(40px) scale(0.9); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
}

/* Continuous gentle floating effect */
.feature-item:hover {
    animation: hoverFloat 0.6s ease forwards;
}

@keyframes hoverFloat {
    0% { transform: translateY(0) scale(1); }
    100% { transform: translateY(-5px) scale(1.03); }
}


    /* ------------------------------------------- */
    /* 3. IMAGE CONTAINER (The Inner Circle) */
    /* ------------------------------------------- */
    .feature-img {
        width: 150px; 
        height: 150px;
        border-radius: 50%;
        
        border: 1px solid #005086;
        
        overflow: hidden; 
        display: flex !important;
        justify-content: center;
        align-items: center;
        /* Adjust margin to sit correctly above the title */
        margin: 1rem auto; 
        
        background-color: white !important; 
    }
    
    /* Styling for the Image itself */
    .feature-img img {
        width: 100%;
        height: 100%;
        object-fit: cover; 
    }