.menu-color {
    color: #010f59 !important;
}

.card-custom {
    background-color: #ffffff;
    border-radius: 18px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    padding: 1.75rem;
}

.card-custom:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.15);
}

.card-custom .card-title {
    font-size: 18px;
    font-weight: 700;
    color: #010f59;
    margin-bottom: 1rem;
}

.card-custom .card-text {
    font-size: 14px;
    color: #444;
    line-height: 1.85;
}

/* 
.card-title {
    font-weight: bold;
    text-transform: uppercase;
} */

.what-is-imac-area h5 {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
    color: #010f59;
}

.what-is-imac-area h2 {
    font-weight: 700;
    color: #010f59;
}

.what-is-imac-area p {
    font-size: 16px;
    line-height: 1.8;
}

.what-is-imac-area ul {
    padding-left: 0;
    list-style: none;
    margin-top: 1rem;
}

.what-is-imac-area ul li {
    margin-bottom: 10px;
    font-size: 16px;
}

.what-is-imac-area ul li::before {
    content: "\2714";
    /* checkmark */
    color: #010f59;
    font-weight: bold;
    display: inline-block;
    width: 1.5em;
}

.stats {
    font-weight: 700;
    color: #010f59;
    font-size: 32px;
}

.stats-label {
    font-size: 16px;
    color: #000;
}

.what-is-imac-area img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 4px;
}

.headline-content {
    color: #050f69 !important;
}

/* Custom col for 5 equal columns per row on large screens */
@media (min-width: 1200px) {
    .col-lg-2-4 {
        flex: 0 0 auto;
        width: 20%;
    }
}

/* Card styling */
.headlines-card-custom {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.headlines-card-custom:hover {
    transform: translateY(-5px);
}

.headlines-card-custom .thumbnail {
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.headlines-card-custom .thumbnail img.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.headlines-card-custom .inner-content {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.headlines-card-custom .title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #1a1a1a;
}

.headlines-card-custom .disc {
    font-size: 16px;
    color: #555;
    flex-grow: 1;
}

.headlines-card-custom .read-more {
    margin-top: 10px;
    font-weight: 500;
    color: #007bff;
    text-decoration: none;
}

/* how we work style */
.work-card {
    background-color: #f9f9f9;
    border-radius: 15px;
    transition: all 0.3s ease-in-out;
    border: 1px solid #e0e0e0;

    .icon {
        font-size: 40px;
        color: #050f69;
        transition: transform 0.3s ease, color 0.3s;
    }

    h5 {
        color: #050f69;
    }

    &:hover {
        background-color: #050f69;
        color: #fff;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);

        .icon {
            color: #ffd700;
            transform: scale(1.2);
        }

        h5,
        p {
            color: #fff;
        }
    }
}

/* how we work below slider style */

.single-blog-area-one-2 {
    height: 300px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.single-blog-area-one-2:hover {
    transform: scale(1.03);
}

.single-blog-area-one-2 .thumbnail {
    display: block;
    height: 100%;
    width: 100%;
}

.single-blog-area-one-2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* our team style */
.team-card {
 background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px; /* Spacing between cards */
    transition: box-shadow 0.3s ease-in-out; /* Smooth shadow transition */
}

.team-card:hover {
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Enhance shadow on hover */
}

.team-image-wrapper {
  overflow: hidden; /* This is crucial to "frame" the image */
    position: relative; /* Needed if you want to use absolute positioning for overlays, etc. */
    display: block; /* Ensures it behaves as a block element */
}
.team-image-zoom-lift {
    width: 100%; /* Ensure image fills its container */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove any extra space below image */

    /* Smooth transition for transform properties */
    transition: transform 0.4s ease-in-out;
}

.team-card:hover .team-image-zoom-lift {
    /* Scale the image up slightly */
    transform: scale(1.1); /* Zooms the image by 10% */

    /* Optional: Add a slight lift effect (adjust as needed) */
    transform: scale(1.1) translateY(-10px);

    /* Optional: Scale and slight lift combined with a different origin */
     transform-origin: bottom center; /* You can change the origin of the transform */
    transform: scale(1.15) translateY(-5%);
}



.team-image-wrapper img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    padding: 10px;
}

.team-card .title {
    font-size: 18px;
    font-weight: 600;
    color: #050f69;
    margin-bottom: 5px;
}

.team-card span {
    font-size: 14px;
    color: #555;
}

/* cliets logo style in home page */
.our-register-clients {
    background-color: #f9f9f9;
}

.client-logo-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    text-align: center;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.client-logo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.client-logo-card img {
    max-height: 80px;
    object-fit: contain;
    width: auto;
    max-width: 100%;
    transition: transform 0.3s;
}

.client-logo-card:hover img {
    transform: scale(1.05);
}

/* Ensure immediate parent of image wrapper allows overflow */
.team-card {
    overflow: visible; /* Crucial to allow the scaled image to "pop out" */
    position: relative; /* Needed for z-index context if image is positioned absolutely */
    transition: box-shadow 0.3s ease; /* Optional: smooth shadow transition */
}

/* Styles for the image wrapper */
.team-image-wrapper {
    position: relative; /* Needed for z-index on hover */
    overflow: hidden; /* Keep initial image contained within its bounds */
    border-radius: 8px; /* Match card border-radius */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Initial subtle shadow */
    height: 200px;
    
}

/* Styles for the image itself */
.team-image-wrapper img {
    width: 100%;
    height: 100%;
     object-fit: cover;
    display: block;
    transition: transform 0.3s ease-in-out, z-index 0s linear 0.3s; /* Smooth scale, z-index after scale */
    transform-origin: center center; /* Ensure scaling from the center */
}

/* Hover effect on the image wrapper */
.team-image-wrapper:hover {
    z-index: 10; /* Bring the hovered image wrapper to the front */
}

.team-image-wrapper:hover img {
    transform: scale(1.5); /* Make the image 20% larger */
    /* You might need to adjust the scale value based on your design */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* More prominent shadow on hover */
    transition: transform 0.3s ease-in-out, z-index 0s linear; /* Z-index immediately on hover */
}

/* Optional: Adjust spacing or alignment if needed due to pop-out */
.col-lg-4.col-md-6 {
    /* Add some padding or margin if the enlarged image overlaps siblings */
    padding: 10px; /* Example padding */
}

/* Ensure the main container for the columns also allows overflow if necessary */
.row {
    overflow: visible; /* Important if images are very close to row boundaries */
}

/* Ensure the image doesn't overflow its container during scale */
.single-gallery {
    overflow: hidden; /* Crucial for clipping the zoom if the image expands beyond its div */
}

/* Styles for the image itself */
.single-gallery img {
    display: block; /* Removes extra space below image */
    width: 100%; /* Ensures image fills its container */
    height: auto; /* Maintains aspect ratio */
    transition: transform 0.3s ease-in-out; /* Smooth transition for the transform property */
}

/* Hover effect */
.single-gallery img:hover {
    transform: scale(1.5); /* Zooms in the image by 5% */
}