.calmhaven-cms-block {
   position: relative; 
   display: block; /* REMOVE this if you had it before: text-align: center; */ 
   overflow: hidden;
    transition: all 0.3s ease;
}
/* Remove default margin/padding from subheading, heading, and text */
.cms-subheading,
.cms-heading,
.cms-text-1,
.cms-text-2 {
    margin: 0;
    padding: 0;
    line-height: 1; /* Adjust if needed */
}

/* Space between elements */
.calmhaven-cms-block > * + * {
    margin-top: 5px; /* Adjust spacing between texts/buttons */
}

/* Remove default spacing in button */
.cms-button {
    margin: 0;
    padding: 8px 10px; /* Or whatever padding you like */
    display: inline-block;
    text-decoration: none;
}

/* Base styles */
.calmhaven-cms-block {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* pseudo-element will show dynamic Elementor inline background */
.calmhaven-cms-block::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: inherit;
    transition: transform 0.5s ease;
    z-index: -1;
}

/* grow effect ONLY if hover-grow class exists */
.calmhaven-cms-block.hover-grow:hover::before {
    transform: scale(1.1);
}

/* when hover-grow class is NOT present, no scale at all */
.calmhaven-cms-block:not(.hover-grow):hover::before {
    transform: none;
}

/* Padding, margin, border will be injected inline from Elementor controls */

/* Text sections */
.calmhaven-cms-block .cms-text-1,
.calmhaven-cms-block .cms-text-2 {
    margin: 10px 0;
    line-height: 1.6;
}

/* Heading */
.calmhaven-cms-block .cms-heading {
    margin: 5px 0;
    font-size: 28px;
    font-weight: 600;
}

/* Button */
.calmhaven-cms-block .cms-button {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 30px;
    background: #0073e6;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
    cursor: pointer;
}
.calmhaven-cms-block .cms-button:hover {
    background: #005bb5;
    color: #fff;
}

/* Base state: elements hidden or off-screen */
.cms-subheading,
.cms-heading,
.cms-text-2,
.cms-button {
    opacity: 0;
    transform: translateX(0) translateY(0);
    transition: all 0.5s ease;
}

/* Hover triggers animation */
.calmhaven-cms-block:hover .move-left {
    opacity: 1;
    transform: translateX(0);
    animation: moveLeft 0.5s forwards;
}

.calmhaven-cms-block:hover .move-right {
    opacity: 1;
    transform: translateX(0);
    animation: moveRight 0.5s forwards;
}

.calmhaven-cms-block:hover .move-bottom {
    opacity: 1;
    transform: translateY(0);
    animation: moveBottom 0.5s forwards;
}

.calmhaven-cms-block:hover .fade-in {
    opacity: 1;
    animation: fadeIn 0.5s forwards;
}

/* Keyframes */
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }
@keyframes moveLeft { from {opacity:0; transform: translateX(-100%);} to {opacity:1; transform: translateX(0);} }
@keyframes moveRight { from {opacity:0; transform: translateX(100%);} to {opacity:1; transform: translateX(0);} }
@keyframes moveBottom { from {opacity:0; transform: translateY(100%);} to {opacity:1; transform: translateY(0);} }


/* Hover Only Mode: hidden initially */
.hover-only.move-left { transform: translateX(-100%); opacity: 0; }
.hover-only.move-right { transform: translateX(100%); opacity: 0; }
.hover-only.move-bottom { transform: translateY(100%); opacity: 0; }
.hover-only.fade-in { opacity: 0; }

/* On hover, show */
.calmhaven-cms-block:hover .hover-only {
    transform: translate(0,0);
    opacity: 1;
    transition: all 0.5s ease;
}

/* Always Show Mode: visible by default, but animates on hover */
.always-show { opacity: 1; transform: translate(0,0); transition: all 0.5s ease; }
.calmhaven-cms-block:hover .always-show.move-left { transform: translateX(0); }
.calmhaven-cms-block:hover .always-show.move-right { transform: translateX(0); }
.calmhaven-cms-block:hover .always-show.move-bottom { transform: translateY(0); }
.calmhaven-cms-block:hover .always-show.fade-in { opacity: 1; }