.elementor-3858 .elementor-element.elementor-element-3993125{--display:flex;--min-height:40vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--overlay-opacity:0.5;}.elementor-3858 .elementor-element.elementor-element-3993125:not(.elementor-motion-effects-element-type-background), .elementor-3858 .elementor-element.elementor-element-3993125 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://comeliveinfrance.com/wp-content/uploads/2026/02/photo-1758523671819-06a0f1941520.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-3858 .elementor-element.elementor-element-3993125::before, .elementor-3858 .elementor-element.elementor-element-3993125 > .elementor-background-video-container::before, .elementor-3858 .elementor-element.elementor-element-3993125 > .e-con-inner > .elementor-background-video-container::before, .elementor-3858 .elementor-element.elementor-element-3993125 > .elementor-background-slideshow::before, .elementor-3858 .elementor-element.elementor-element-3993125 > .e-con-inner > .elementor-background-slideshow::before, .elementor-3858 .elementor-element.elementor-element-3993125 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-primary );--background-overlay:'';}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-3858 .elementor-element.elementor-element-9ca99f9 .elementor-heading-title{font-family:"Urbanist", Sans-serif;font-weight:700;color:#FCFCFC;}.elementor-3858 .elementor-element.elementor-element-4c06107{--display:flex;--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;--justify-content:center;--padding-top:80px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}.elementor-3858 .elementor-element.elementor-element-9397280{--display:flex;--justify-content:space-between;--padding-top:70px;--padding-bottom:70px;--padding-left:0px;--padding-right:0px;}.elementor-3858 .elementor-element.elementor-element-9397280:not(.elementor-motion-effects-element-type-background), .elementor-3858 .elementor-element.elementor-element-9397280 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-3858 .elementor-element.elementor-element-99a2969{--display:flex;box-shadow:0px 10px 60px 0px rgba(0, 0, 0, 0.08);}.elementor-3858 .elementor-element.elementor-element-99a2969:not(.elementor-motion-effects-element-type-background), .elementor-3858 .elementor-element.elementor-element-99a2969 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-widget-icon-box.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon-box.elementor-view-framed .elementor-icon, .elementor-widget-icon-box.elementor-view-default .elementor-icon{fill:var( --e-global-color-primary );color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-title a{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-icon-box .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box:has(:hover) .elementor-icon-box-title, .elementor-widget-icon-box:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-3858 .elementor-element.elementor-element-985af99 .elementor-icon-box-wrapper{text-align:start;gap:15px;}.elementor-3858 .elementor-element.elementor-element-985af99.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;fill:var( --e-global-color-primary );color:var( --e-global-color-primary );}.elementor-3858 .elementor-element.elementor-element-985af99.elementor-view-framed .elementor-icon, .elementor-3858 .elementor-element.elementor-element-985af99.elementor-view-default .elementor-icon{fill:#FFFFFF;color:#FFFFFF;border-color:#FFFFFF;}.elementor-3858 .elementor-element.elementor-element-985af99.elementor-view-framed .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-3858 .elementor-element.elementor-element-985af99 .elementor-icon{font-size:27px;padding:15px;border-width:0px 0px 0px 0px;border-radius:12px 12px 12px 12px;}.elementor-3858 .elementor-element.elementor-element-985af99 .elementor-icon i{transform:rotate(0deg);}.elementor-3858 .elementor-element.elementor-element-985af99 .elementor-icon-box-title, .elementor-3858 .elementor-element.elementor-element-985af99 .elementor-icon-box-title a{font-family:"Urbanist", Sans-serif;font-size:24px;font-weight:700;}.elementor-3858 .elementor-element.elementor-element-985af99 .elementor-icon-box-title{color:#000000;}.elementor-3858 .elementor-element.elementor-element-d9f81f8{--display:flex;box-shadow:0px 10px 60px 0px rgba(0, 0, 0, 0.08);}.elementor-3858 .elementor-element.elementor-element-d9f81f8:not(.elementor-motion-effects-element-type-background), .elementor-3858 .elementor-element.elementor-element-d9f81f8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-3858 .elementor-element.elementor-element-814266a .elementor-icon-box-wrapper{text-align:start;gap:15px;}.elementor-3858 .elementor-element.elementor-element-814266a.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;fill:var( --e-global-color-primary );color:var( --e-global-color-primary );}.elementor-3858 .elementor-element.elementor-element-814266a.elementor-view-framed .elementor-icon, .elementor-3858 .elementor-element.elementor-element-814266a.elementor-view-default .elementor-icon{fill:#FFFFFF;color:#FFFFFF;border-color:#FFFFFF;}.elementor-3858 .elementor-element.elementor-element-814266a.elementor-view-framed .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-3858 .elementor-element.elementor-element-814266a .elementor-icon{font-size:27px;padding:15px;border-width:0px 0px 0px 0px;border-radius:12px 12px 12px 12px;}.elementor-3858 .elementor-element.elementor-element-814266a .elementor-icon i{transform:rotate(0deg);}.elementor-3858 .elementor-element.elementor-element-814266a .elementor-icon-box-title, .elementor-3858 .elementor-element.elementor-element-814266a .elementor-icon-box-title a{font-family:"Urbanist", Sans-serif;font-size:24px;font-weight:700;}.elementor-3858 .elementor-element.elementor-element-814266a .elementor-icon-box-title{color:#000000;}.elementor-3858 .elementor-element.elementor-element-ed71a40{--display:flex;box-shadow:0px 10px 60px 0px rgba(0, 0, 0, 0.08);}.elementor-3858 .elementor-element.elementor-element-ed71a40:not(.elementor-motion-effects-element-type-background), .elementor-3858 .elementor-element.elementor-element-ed71a40 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-3858 .elementor-element.elementor-element-00356c6 .elementor-icon-box-wrapper{text-align:start;gap:15px;}.elementor-3858 .elementor-element.elementor-element-00356c6.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;fill:var( --e-global-color-primary );color:var( --e-global-color-primary );}.elementor-3858 .elementor-element.elementor-element-00356c6.elementor-view-framed .elementor-icon, .elementor-3858 .elementor-element.elementor-element-00356c6.elementor-view-default .elementor-icon{fill:#FFFFFF;color:#FFFFFF;border-color:#FFFFFF;}.elementor-3858 .elementor-element.elementor-element-00356c6.elementor-view-framed .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-3858 .elementor-element.elementor-element-00356c6 .elementor-icon{font-size:27px;padding:15px;border-width:0px 0px 0px 0px;border-radius:12px 12px 12px 12px;}.elementor-3858 .elementor-element.elementor-element-00356c6 .elementor-icon-box-title, .elementor-3858 .elementor-element.elementor-element-00356c6 .elementor-icon-box-title a{font-family:"Urbanist", Sans-serif;font-size:24px;font-weight:700;}.elementor-3858 .elementor-element.elementor-element-00356c6 .elementor-icon-box-title{color:#000000;}.elementor-3858 .elementor-element.elementor-element-997b11d{--display:flex;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-3858 .elementor-element.elementor-element-9397280{--width:100%;}.elementor-3858 .elementor-element.elementor-element-997b11d{--width:100%;}}/* Start custom CSS for container, class: .elementor-element-99a2969 *//* ======================================== CHALLENGE/FEATURE CARD CSS With Animated Border, Hover Effects & Box Shadow ======================================== */ /* Main Card Container */ .challenge-card { position: relative; background: #ffffff; border-radius: 24px; padding: 40px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border: 2px solid transparent; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); overflow: hidden; } .challenge-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 24px; padding: 2px; background: linear-gradient(135deg, #375A7F 0%, #4a7099 50%, #375A7F 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } /* Side Border (Left) - Always Visible */ .challenge-card::after { content: ''; position: absolute; left: 0; top: 20%; width: 4px; height: 60%; background: linear-gradient(180deg, #375A7F 0%, #4a7099 100%); border-radius: 0 4px 4px 0; transition: all 0.4s ease; } /* Hover Effects */ .challenge-card:hover { transform: translateY(-8px); box-shadow: 0 20px 60px rgba(55, 90, 127, 0.15); border-color: transparent; } .challenge-card:hover::before { opacity: 1; } .challenge-card:hover::after { height: 80%; top: 10%; width: 5px; box-shadow: 0 0 20px rgba(55, 90, 127, 0.4); } .challenge-card:hover .challenge-icon { transform: scale(1.08); box-shadow: 0 8px 25px rgba(55, 90, 127, 0.15); } .challenge-card.border-right::after { left: auto; right: 0; border-radius: 4px 0 0 4px; } /* Option 2: Full Border Animation on Hover */ .challenge-card.full-border-animation { border: 2px solid #e5e9ed; } .challenge-card.full-border-animation:hover { border-color: #375A7F; box-shadow: 0 0 0 3px rgba(55, 90, 127, 0.1); } /* Option 3: Glow Effect on Hover */ .challenge-card.glow-effect:hover { box-shadow: 0 20px 60px rgba(55, 90, 127, 0.2), 0 0 40px rgba(55, 90, 127, 0.1); } /* Option 4: No Side Border (Clean) */ .challenge-card.no-border::after { display: none; } /* Option 5: Gradient Background on Hover */ .challenge-card.gradient-hover:hover { background: linear-gradient(135deg, #ffffff 0%, #f8fbfd 100%); } @media (max-width: 768px) { .challenge-card { padding: 30px; border-radius: 20px; } .challenge-card:hover { transform: translateY(-4px); } } @media (max-width: 480px) { .challenge-card { padding: 25px; } } /* ======================================== GRID LAYOUT (If using multiple cards) ======================================== *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-d9f81f8 *//* ======================================== CHALLENGE/FEATURE CARD CSS With Animated Border, Hover Effects & Box Shadow ======================================== */ /* Main Card Container */ .challenge-card { position: relative; background: #ffffff; border-radius: 24px; padding: 40px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border: 2px solid transparent; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); overflow: hidden; } .challenge-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 24px; padding: 2px; background: linear-gradient(135deg, #375A7F 0%, #4a7099 50%, #375A7F 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } /* Side Border (Left) - Always Visible */ .challenge-card::after { content: ''; position: absolute; left: 0; top: 20%; width: 4px; height: 60%; background: linear-gradient(180deg, #375A7F 0%, #4a7099 100%); border-radius: 0 4px 4px 0; transition: all 0.4s ease; } /* Hover Effects */ .challenge-card:hover { transform: translateY(-8px); box-shadow: 0 20px 60px rgba(55, 90, 127, 0.15); border-color: transparent; } .challenge-card:hover::before { opacity: 1; } .challenge-card:hover::after { height: 80%; top: 10%; width: 5px; box-shadow: 0 0 20px rgba(55, 90, 127, 0.4); } .challenge-card:hover .challenge-icon { transform: scale(1.08); box-shadow: 0 8px 25px rgba(55, 90, 127, 0.15); } .challenge-card.border-right::after { left: auto; right: 0; border-radius: 4px 0 0 4px; } /* Option 2: Full Border Animation on Hover */ .challenge-card.full-border-animation { border: 2px solid #e5e9ed; } .challenge-card.full-border-animation:hover { border-color: #375A7F; box-shadow: 0 0 0 3px rgba(55, 90, 127, 0.1); } /* Option 3: Glow Effect on Hover */ .challenge-card.glow-effect:hover { box-shadow: 0 20px 60px rgba(55, 90, 127, 0.2), 0 0 40px rgba(55, 90, 127, 0.1); } /* Option 4: No Side Border (Clean) */ .challenge-card.no-border::after { display: none; } /* Option 5: Gradient Background on Hover */ .challenge-card.gradient-hover:hover { background: linear-gradient(135deg, #ffffff 0%, #f8fbfd 100%); } @media (max-width: 768px) { .challenge-card { padding: 30px; border-radius: 20px; } .challenge-card:hover { transform: translateY(-4px); } } @media (max-width: 480px) { .challenge-card { padding: 25px; } } /* ======================================== GRID LAYOUT (If using multiple cards) ======================================== *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-ed71a40 *//* ======================================== CHALLENGE/FEATURE CARD CSS With Animated Border, Hover Effects & Box Shadow ======================================== */ /* Main Card Container */ .challenge-card { position: relative; background: #ffffff; border-radius: 24px; padding: 40px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border: 2px solid transparent; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); overflow: hidden; } .challenge-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 24px; padding: 2px; background: linear-gradient(135deg, #375A7F 0%, #4a7099 50%, #375A7F 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } /* Side Border (Left) - Always Visible */ .challenge-card::after { content: ''; position: absolute; left: 0; top: 20%; width: 4px; height: 60%; background: linear-gradient(180deg, #375A7F 0%, #4a7099 100%); border-radius: 0 4px 4px 0; transition: all 0.4s ease; } /* Hover Effects */ .challenge-card:hover { transform: translateY(-8px); box-shadow: 0 20px 60px rgba(55, 90, 127, 0.15); border-color: transparent; } .challenge-card:hover::before { opacity: 1; } .challenge-card:hover::after { height: 80%; top: 10%; width: 5px; box-shadow: 0 0 20px rgba(55, 90, 127, 0.4); } .challenge-card:hover .challenge-icon { transform: scale(1.08); box-shadow: 0 8px 25px rgba(55, 90, 127, 0.15); } .challenge-card.border-right::after { left: auto; right: 0; border-radius: 4px 0 0 4px; } /* Option 2: Full Border Animation on Hover */ .challenge-card.full-border-animation { border: 2px solid #e5e9ed; } .challenge-card.full-border-animation:hover { border-color: #375A7F; box-shadow: 0 0 0 3px rgba(55, 90, 127, 0.1); } /* Option 3: Glow Effect on Hover */ .challenge-card.glow-effect:hover { box-shadow: 0 20px 60px rgba(55, 90, 127, 0.2), 0 0 40px rgba(55, 90, 127, 0.1); } /* Option 4: No Side Border (Clean) */ .challenge-card.no-border::after { display: none; } /* Option 5: Gradient Background on Hover */ .challenge-card.gradient-hover:hover { background: linear-gradient(135deg, #ffffff 0%, #f8fbfd 100%); } @media (max-width: 768px) { .challenge-card { padding: 30px; border-radius: 20px; } .challenge-card:hover { transform: translateY(-4px); } } @media (max-width: 480px) { .challenge-card { padding: 25px; } } /* ======================================== GRID LAYOUT (If using multiple cards) ======================================== *//* End custom CSS */