.elementor-34868 .elementor-element.elementor-element-465e6fdd{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:var(--vp);--padding-bottom:var(--vp);--padding-left:0;--padding-right:0;}.elementor-34868 .elementor-element.elementor-element-28230094{--display:flex;--padding-top:0;--padding-bottom:0;--padding-left:var(--hp);--padding-right:var(--hp);}.elementor-34868 .elementor-element.elementor-element-7a4c6ce0{text-align:center;}.elementor-34868 .elementor-element.elementor-element-7a4c6ce0 .elementor-heading-title{font-family:var( --e-global-typography-2055efa-font-family ), Sans-serif;font-size:var( --e-global-typography-2055efa-font-size );font-weight:var( --e-global-typography-2055efa-font-weight );text-transform:var( --e-global-typography-2055efa-text-transform );line-height:var( --e-global-typography-2055efa-line-height );color:var( --e-global-color-text );}.elementor-34868 .elementor-element.elementor-element-432a6798.elementor-element{--align-self:center;}.elementor-34868 .elementor-element.elementor-element-432a6798{text-align:center;font-family:"Poppins", Sans-serif;font-size:var(--body-fs);font-weight:400;color:var( --e-global-color-text );}.elementor-34868 .elementor-element.elementor-element-3c31abf9{--e-image-carousel-slides-to-show:7;}.elementor-34868 .elementor-element.elementor-element-3c31abf9 .swiper-wrapper{display:flex;align-items:center;}.elementor-34868 .elementor-element.elementor-element-1971d0ce .elementor-button{background-color:var( --e-global-color-e5d36b2 );font-family:var( --e-global-typography-7615ec9-font-family ), Sans-serif;font-size:var( --e-global-typography-7615ec9-font-size );font-weight:var( --e-global-typography-7615ec9-font-weight );text-transform:var( --e-global-typography-7615ec9-text-transform );line-height:var( --e-global-typography-7615ec9-line-height );fill:var( --e-global-color-text );color:var( --e-global-color-text );border-style:solid;border-color:var( --e-global-color-7b10bd6 );}.elementor-34868 .elementor-element.elementor-element-1971d0ce .elementor-button:hover, .elementor-34868 .elementor-element.elementor-element-1971d0ce .elementor-button:focus{background-color:var( --e-global-color-7b10bd6 );color:var( --e-global-color-e5d36b2 );border-color:var( --e-global-color-7b10bd6 );}.elementor-34868 .elementor-element.elementor-element-1971d0ce > .elementor-widget-container{margin:var(--vp50) 0 0 0;}.elementor-34868 .elementor-element.elementor-element-1971d0ce .elementor-button:hover svg, .elementor-34868 .elementor-element.elementor-element-1971d0ce .elementor-button:focus svg{fill:var( --e-global-color-e5d36b2 );}@media(min-width:768px){.elementor-34868 .elementor-element.elementor-element-28230094{--content-width:680px;}}@media(max-width:1024px){.elementor-34868 .elementor-element.elementor-element-7a4c6ce0 .elementor-heading-title{font-size:var( --e-global-typography-2055efa-font-size );line-height:var( --e-global-typography-2055efa-line-height );}.elementor-34868 .elementor-element.elementor-element-3c31abf9{--e-image-carousel-slides-to-show:4;}.elementor-34868 .elementor-element.elementor-element-1971d0ce .elementor-button{font-size:var( --e-global-typography-7615ec9-font-size );line-height:var( --e-global-typography-7615ec9-line-height );}}@media(max-width:767px){.elementor-34868 .elementor-element.elementor-element-7a4c6ce0 .elementor-heading-title{font-size:var( --e-global-typography-2055efa-font-size );line-height:var( --e-global-typography-2055efa-line-height );}.elementor-34868 .elementor-element.elementor-element-1971d0ce .elementor-button{font-size:var( --e-global-typography-7615ec9-font-size );line-height:var( --e-global-typography-7615ec9-line-height );}}/* Start custom CSS for text-editor, class: .elementor-element-432a6798 */.elementor-34868 .elementor-element.elementor-element-432a6798 p:last-child {
    margin: 0;
}/* End custom CSS */
/* Start custom CSS for image-carousel, class: .elementor-element-3c31abf9 */.elementor-34868 .elementor-element.elementor-element-3c31abf9 img {
    align-self: center;
    height: auto;
    max-height: 70px;
    width: 70%;
    max-width: 90%;
    object-fit: contain;
}/* End custom CSS */
/* Start custom CSS *//* 1. Base Styles & Transitions - (Unchanged) */
.purple-card, .pink-card, .yellow-card, .teal-card, .ho-card,
[class*="-card-inverted"] {
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.12) !important;
    transition: all 0.35s ease-in-out;
}

[class*="-card"] .elementor-heading-title, 
[class*="-card"] p {
    transition: all 0.35s ease-in-out;
}

[class*="-card"] p:last-child {
    margin: 0;
}

/* 2. Color Theme Definitions - (Unchanged) */
.purple-card, .purple-card-inverted { --accent: var(--e-global-color-7b10bd6); --text: #fff; }
.pink-card,   .pink-card-inverted   { --accent: var(--e-global-color-18d9440); --text: #fff; }
.yellow-card, .yellow-card-inverted { --accent: #F89631; --text: #000; }
.teal-card,   .teal-card-inverted   { --accent: #00B48F; --text: #000; }

/* 3. The "Active" State Logic - (Desktop Hover) */
[class*="-card"]:hover, 
[class*="-card-inverted"] {
    background-color: var(--accent, #ffffff) !important;
}

[class*="-card"]:hover p, 
[class*="-card"]:hover .elementor-heading-title,
[class*="-card-inverted"] p,
[class*="-card-inverted"] .elementor-heading-title {
    color: var(--text) !important;
}

/* 4. Mobile Logic & Variants */
@media (max-width: 0px) {
    /* Define the -sm override variants */
    .sm-purple-card { --accent: var(--e-global-color-7b10bd6); --text: #fff; }
    .sm-pink-card   { --accent: var(--e-global-color-18d9440); --text: #fff; }
    .sm-yellow-card { --accent: #F89631; --text: #000; }
    .sm-teal-card   { --accent: #00B48F; --text: #000; }

    /* Force background color for all card types on mobile */
    [class*="-card"] {
        background-color: var(--accent) !important;
    }

    /* Force text color for all internal elements on mobile */
    [class*="-card"] p, 
    [class*="-card"] .elementor-heading-title {
        color: var(--text) !important;
    }
}
/* 4. Mobile Logic & "Opposite" Variants */
@media (max-width: 767px) {
    
    /* --- 4a. Define Variable Overrides --- */
    .sm-purple-card, .sm-purple-card-inverted { --accent: var(--e-global-color-7b10bd6); --text: #fff; }
    .sm-pink-card,   .sm-pink-card-inverted   { --accent: var(--e-global-color-18d9440); --text: #fff; }
    .sm-yellow-card, .sm-yellow-card-inverted { --accent: #F89631; --text: #000; }
    .sm-teal-card,   .sm-teal-card-inverted   { --accent: #00B48F; --text: #000; }

    /* --- 4b. The "Normal" Mobile State (White Background) --- */
    /* This applies to any card using a standard -sm class */
    .sm-purple-card, .sm-pink-card, .sm-yellow-card, .sm-teal-card {
        background-color: #fff !important;
    }
    
    /* Text/Icons take the accent color when the background is white */
    .sm-purple-card p, .sm-purple-card .elementor-heading-title,
    .sm-pink-card p,   .sm-pink-card .elementor-heading-title,
    .sm-yellow-card p, .sm-yellow-card .elementor-heading-title,
    .sm-teal-card p,   .sm-teal-card .elementor-heading-title {
        color: var(--accent) !important;
    }

    /* --- 4c. The "Inverted" Mobile State (Solid Background) --- */
    /* This applies to any card using an -inverted -sm class */
    [class*="sm-"][class*="-inverted"] {
        background-color: var(--accent) !important;
    }

    [class*="sm-"][class*="-inverted"] p, 
    [class*="sm-"][class*="-inverted"] .elementor-heading-title {
        color: var(--text) !important;
    }
}


/* 4. Flip Card Logic (Standard CSS) */
.flip-card {
    background-color: transparent;
    width: 100%;
    height: 100%;
    perspective: 1000px;
    position: relative;
}

.flip-front, .flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform 0.6s;
}

.flip-back {
    transform: rotateY(180deg);
}

.flip-card:hover .flip-front {
    transform: rotateY(180deg);
}

.flip-card:hover .flip-back {
    transform: rotateY(360deg);
}/* End custom CSS */