.elementor-577 .elementor-element.elementor-element-604f766{--display:flex;--min-height:400px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-577 .elementor-element.elementor-element-84bc1f9{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-577 .elementor-element.elementor-element-84bc1f9:not(.elementor-motion-effects-element-type-background), .elementor-577 .elementor-element.elementor-element-84bc1f9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://atossamedspa.com/wp-content/uploads/2024/10/1616178696-homepage3.avif");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-577 .elementor-element.elementor-element-4de56ea{--display:flex;--justify-content:flex-start;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-577 .elementor-element.elementor-element-1348201{width:var( --container-widget-width, 104.031% );max-width:104.031%;--container-widget-width:104.031%;--container-widget-flex-grow:0;text-align:center;}.elementor-577 .elementor-element.elementor-element-1348201 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-577 .elementor-element.elementor-element-1348201.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-577 .elementor-element.elementor-element-1348201 .elementor-heading-title{font-family:"Prata", Sans-serif;font-size:40px;font-weight:500;font-style:normal;line-height:1.25em;color:#FFFFFF;}.elementor-577 .elementor-element.elementor-element-76ca7e1 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(2px/2);}.elementor-577 .elementor-element.elementor-element-76ca7e1 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(2px/2);}.elementor-577 .elementor-element.elementor-element-76ca7e1 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(2px/2);}.elementor-577 .elementor-element.elementor-element-76ca7e1 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-2px/2);}.elementor-577 .elementor-element.elementor-element-76ca7e1 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-2px/2);}.elementor-577 .elementor-element.elementor-element-76ca7e1 .elementor-icon-list-icon i{color:#FFFFFF;transition:color 0.3s;}.elementor-577 .elementor-element.elementor-element-76ca7e1 .elementor-icon-list-icon svg{fill:#FFFFFF;transition:fill 0.3s;}.elementor-577 .elementor-element.elementor-element-76ca7e1{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-577 .elementor-element.elementor-element-76ca7e1 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-577 .elementor-element.elementor-element-76ca7e1 .elementor-icon-list-item > a{font-size:18px;}.elementor-577 .elementor-element.elementor-element-76ca7e1 .elementor-icon-list-text{color:#FFFFFF;transition:color 0.3s;}.elementor-577 .elementor-element.elementor-element-25442c8 .elementor-button{background-color:#02010163;border-style:solid;border-width:1px 1px 1px 1px;}.elementor-577 .elementor-element.elementor-element-7df5591{width:var( --container-widget-width, 104.031% );max-width:104.031%;--container-widget-width:104.031%;--container-widget-flex-grow:0;text-align:center;}.elementor-577 .elementor-element.elementor-element-7df5591 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-577 .elementor-element.elementor-element-7df5591.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-577 .elementor-element.elementor-element-7df5591 .elementor-heading-title{font-family:"Prata", Sans-serif;font-size:40px;font-weight:500;font-style:normal;line-height:1.25em;color:#FFFFFF;}.elementor-577 .elementor-element.elementor-element-255ce96{--display:flex;}.elementor-577 .elementor-element.elementor-element-dac8bb0{--display:flex;}.elementor-577 .elementor-element.elementor-element-738a47e{--display:flex;}@media(max-width:1024px){.elementor-577 .elementor-element.elementor-element-1348201 .elementor-heading-title{font-size:32px;}.elementor-577 .elementor-element.elementor-element-7df5591 .elementor-heading-title{font-size:32px;}}@media(max-width:767px){.elementor-577 .elementor-element.elementor-element-4de56ea{--min-height:200px;}.elementor-577 .elementor-element.elementor-element-1348201 .elementor-heading-title{font-size:55px;}.elementor-577 .elementor-element.elementor-element-76ca7e1 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-577 .elementor-element.elementor-element-76ca7e1 .elementor-icon-list-item > a{font-size:18px;}.elementor-577 .elementor-element.elementor-element-7df5591 .elementor-heading-title{font-size:41px;}}/* Start custom CSS for container, class: .elementor-element-4de56ea *//*.services-box {*/
  
/*    transition: transform 0.3s ease;*/
/*}*/

/*.services-box:hover {*/
 
/*    transform: scale(1.05);  */
/*}*//* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-84bc1f9 */.benefits-card {
    position: relative;
    overflow: hidden;
    color: #333; /* Default text color */
    transition: color 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Increased blur and spread for a larger shadow */
    border-radius: 8px; /* Optional: to soften the edges */
}

.benefits-card:hover {
    color: white; /* Change text color on hover */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Larger, more spread-out shadow on hover */
    transform: scale(1.05); /* Added scale effect on hover */
}

.benefits-card .child-box {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    position: relative;
    z-index: 1;
}

.benefits-card .card-content {
    opacity: 1; /* Make the content visible */
    transition: opacity 0.3s ease;
    position: relative;
    z-index: 1;
}

/* When hovering on benefits-card, show .child-box and hide .card-content */
.benefits-card:hover .child-box {
    opacity: 1;
    visibility: visible;
}

.benefits-card:hover .card-content {
    opacity: 0; /* Hide the main card content */
}

/* Styling for the icons */
.benefits-card i {
    color: #000000 !important;
}

.benefits-card::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8));
    transition: top 0.4s ease;
    z-index: 0;
}

.benefits-card:hover::before {
    top: 0;
}

.card-heading {
    padding-top: 180px; /* Default padding */
    visibility: visible; /* Ensure it's visible by default */
    opacity: 1; /* Ensure opacity is set for visibility */
    transition: padding-top 0.3s ease, visibility 0.3s ease, opacity 0.3s ease; /* Smooth transition for padding, visibility, and opacity */
}

.benefits-card .card-heading{
    visibility: visible;
}

/* Hide heading on hover */
.benefits-card:hover .card-heading {
    padding-top: 0; /* Remove padding on hover */
    visibility: hidden; /* Hide on hover */
    opacity: 0; /* Fade out the heading */
}

/* Ensure visibility for .box-button */
.benefits-card .box-button {
    visibility: hidden; /* Hide by default */
}

.benefits-card:hover .box-button {
    visibility: visible; /* Show on hover */
}


@media (max-width: 768px) {
    .benefits-card {
        height: 500px;  
    }

  
    .card-heading {
        padding-top: 100px;
        visibility: visible; /* Ensure heading is visible */
        opacity: 1; 

    .benefits-card:hover .card-heading {
        visibility: hidden; /* Still hide on hover */
        opacity: 0; /* Fade out the heading */
    }
}/* End custom CSS */