/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Dec 03 2025 | 10:03:28 */
/* ===========================================================
   What We Offer Section CSS
   -----------------------------------------------------------
   Handles:
   - Flex layout for offer items
   - Shrink & active states
   - Text visibility for each item
   - Responsive behavior for mobile
   =========================================================== */
.offer-section {
    display: flex;
}

/* ------------------ Offer Items ------------------ */
.offer-section .offer-item {
    flex: 0 0 14%;
    height: 500px;
    transition: flex 1s ease-in-out; /* 0.5s → 1s for slower animation */
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

/* Default: second item = 50% */
.offer-section .offer-item.second-item {
    flex: 0 0 50%;
    transition: flex 1s ease-in-out; /* Ensure same slow animation */
}

/* Active (hovered) item */
.offer-section .offer-item.active {
    flex: 0 0 50%;
    transition: flex 1s ease-in-out; /* Smooth slow expansion */
}

/* Others shrink */
.offer-section .offer-item.shrink {
    flex: 0 0 14.2%;
    transition: flex 1s ease-in-out; /* Smooth shrink */
}


/* ------------------ Offer Text Visibility ------------------ */
/* Default: text hidden for small items */
.offer-section .offer-item .offer-text {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

/* Hover: text visible for hovered item */
.offer-section .offer-item:hover .offer-text {
    opacity: 1;
    pointer-events: auto;
}

/* Default OPEN 2nd item → text visible always */
.offer-section .offer-item.second-item .offer-text {
    opacity: 1;
    pointer-events: auto;
}

/* ------------------ Heading Flex ------------------ */
.offer-heading {
    display: flex;
}
/* Default state (smooth reverse/back transition enabled) */
.offer-text h6.elementor-heading-title.elementor-size-default {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.8s ease; /* OFF slow */
}



/* Hover animation for items except second-item */
.offer-item:not(.second-item):hover .offer-text h6.elementor-heading-title.elementor-size-default {
    opacity: 1; /* Make sure text stays visible immediately */
    transform: translateY(0); /* Start from normal position */
    animation: slowFadeDown 1s ease-out forwards;
    animation-delay: 1s; /* Delay matches flex expansion */
}

/* Downward appear animation */
@keyframes slowFadeDown {
    0% {
        transform: translateY(-20px); /* Move down from above */
    }
    100% {
        transform: translateY(0);
    }
}

















/* Default: text hidden */
.offer-section .offer-item .offer-text {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

/* Second item always visible */
.offer-section .offer-item.second-item .offer-text {
    opacity: 1;
    pointer-events: auto;

}

/* Hovered items: show text only after flex expands */
.offer-section .offer-item:hover {
    flex: 0 0 50%; /* Expand */
    transition: flex 1s ease-in-out;
}

/* Text appears after flex completes */
.offer-section .offer-item:hover .offer-text {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 1s; /* Same as flex transition duration */
}














/* ------------------ Responsive ------------------ */
@media (max-width: 1200px) {
    .offer-heading h4.elementor-heading-title.elementor-size-default {
        font-size: 150%!Important; /* h4 text 1.5 times base font size */
    }

    .offer-text h6.elementor-heading-title.elementor-size-default {
        font-size: 120%!Important; /* h6 text 1.2 times base font size */
    }
}
@media (max-width: 768px) {
    .offer-section .offer-item,
    .offer-section .offer-item.second-item {
        flex: 0 0 100%;
    }
}

/* ===========================================================
   End of What We Offer Section CSS
   ===========================================================