.elementor-811 .elementor-element.elementor-element-8e4968d{--display:flex;--min-height:600px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--flex-wrap:wrap;--align-content:center;--overflow:hidden;}.elementor-811 .elementor-element.elementor-element-8e4968d:not(.elementor-motion-effects-element-type-background), .elementor-811 .elementor-element.elementor-element-8e4968d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.sixsentix.com/wp-content/uploads/2025/11/Industries-banner.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );color:var( --e-global-color-primary );}.elementor-811 .elementor-element.elementor-element-1053cf4{width:100%;max-width:100%;z-index:9;text-align:center;}.elementor-811 .elementor-element.elementor-element-1053cf4 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:66px;font-weight:700;line-height:75px;color:var( --e-global-color-e94f1a7 );}.elementor-811 .elementor-element.elementor-element-8c674b3{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:100px 100px;--row-gap:100px;--column-gap:100px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-811 .elementor-element.elementor-element-f84b04c{--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:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-811 .elementor-element.elementor-element-699de63{width:100%;max-width:100%;}.elementor-811 .elementor-element.elementor-element-699de63 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:46px;font-weight:700;line-height:55px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-811 .elementor-element.elementor-element-90d30e0{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-primary );}.elementor-811 .elementor-element.elementor-element-90d30e0 a{color:var( --e-global-color-text );}.elementor-811 .elementor-element.elementor-element-90d30e0 a:hover, .elementor-811 .elementor-element.elementor-element-90d30e0 a:focus{color:var( --e-global-color-ed993f9 );}.elementor-811 .elementor-element.elementor-element-f3722c1{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-811 .elementor-element.elementor-element-4a67745{width:var( --container-widget-width, calc(50% - 10px) );max-width:calc(50% - 10px);--container-widget-width:calc(50% - 10px);--container-widget-flex-grow:0;text-align:end;}.elementor-811 .elementor-element.elementor-element-4a67745 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-4a67745 img{width:240px;max-width:100%;height:450px;object-fit:cover;object-position:bottom center;border-radius:20px 20px 20px 20px;}.elementor-811 .elementor-element.elementor-element-edf942a{width:var( --container-widget-width, calc(50% - 10px) );max-width:calc(50% - 10px);--container-widget-width:calc(50% - 10px);--container-widget-flex-grow:0;z-index:0;text-align:start;}.elementor-811 .elementor-element.elementor-element-edf942a > .elementor-widget-container{margin:100px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-edf942a img{width:240px;max-width:100%;height:450px;object-fit:cover;object-position:center right;border-radius:20px 20px 20px 20px;}.elementor-811 .elementor-element.elementor-element-9af573e{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:100px 100px;--row-gap:100px;--column-gap:100px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-811 .elementor-element.elementor-element-d202696{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-811 .elementor-element.elementor-element-e3d4b62{width:var( --container-widget-width, calc(50% - 10px) );max-width:calc(50% - 10px);--container-widget-width:calc(50% - 10px);--container-widget-flex-grow:0;text-align:end;}.elementor-811 .elementor-element.elementor-element-e3d4b62 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-e3d4b62 img{width:240px;max-width:100%;height:450px;object-fit:cover;object-position:bottom center;border-radius:20px 20px 20px 20px;}.elementor-811 .elementor-element.elementor-element-070bcc6{width:var( --container-widget-width, calc(50% - 10px) );max-width:calc(50% - 10px);--container-widget-width:calc(50% - 10px);--container-widget-flex-grow:0;z-index:0;text-align:start;}.elementor-811 .elementor-element.elementor-element-070bcc6 > .elementor-widget-container{margin:100px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-070bcc6 img{width:240px;max-width:100%;height:450px;object-fit:cover;object-position:center right;border-radius:20px 20px 20px 20px;}.elementor-811 .elementor-element.elementor-element-4f1a755{--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:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-811 .elementor-element.elementor-element-4568872{width:100%;max-width:100%;}.elementor-811 .elementor-element.elementor-element-4568872 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:46px;font-weight:700;line-height:55px;}.elementor-811 .elementor-element.elementor-element-23ea7e5{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-primary );}.elementor-811 .elementor-element.elementor-element-23ea7e5 a{color:var( --e-global-color-text );}.elementor-811 .elementor-element.elementor-element-23ea7e5 a:hover, .elementor-811 .elementor-element.elementor-element-23ea7e5 a:focus{color:var( --e-global-color-ed993f9 );}.elementor-811 .elementor-element.elementor-element-a1385b2{--display:flex;--min-height:540px;}.elementor-811 .elementor-element.elementor-element-a1385b2:not(.elementor-motion-effects-element-type-background), .elementor-811 .elementor-element.elementor-element-a1385b2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F2F2F2;}.elementor-811 .elementor-element.elementor-element-d1020a3{width:100%;max-width:100%;text-align:center;}.elementor-811 .elementor-element.elementor-element-d1020a3 > .elementor-widget-container{margin:0px 0px 50px 0px;}.elementor-811 .elementor-element.elementor-element-d1020a3.elementor-element{--align-self:center;--flex-grow:1;--flex-shrink:0;}.elementor-811 .elementor-element.elementor-element-d1020a3 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:46px;font-weight:bold;color:#333232;}.elementor-811 .elementor-element.elementor-element-1dc0828{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;--border-radius:30px 30px 30px 30px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-811 .elementor-element.elementor-element-43bf78f{--display:flex;--position:absolute;--min-height:383px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:0px;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-43bf78f{left:0px;}body.rtl .elementor-811 .elementor-element.elementor-element-43bf78f{right:0px;}.elementor-811 .elementor-element.elementor-element-f3e0454{width:var( --container-widget-width, 68.063% );max-width:68.063%;--container-widget-width:68.063%;--container-widget-flex-grow:0;top:34px;z-index:10;}.elementor-811 .elementor-element.elementor-element-f3e0454 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-f3e0454.elementor-element{--align-self:flex-start;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-f3e0454{left:34px;}body.rtl .elementor-811 .elementor-element.elementor-element-f3e0454{right:34px;}.elementor-811 .elementor-element.elementor-element-f3e0454 .elementor-heading-title{font-family:var( --e-global-typography-9871c02-font-family ), Sans-serif;font-size:var( --e-global-typography-9871c02-font-size );font-weight:var( --e-global-typography-9871c02-font-weight );line-height:var( --e-global-typography-9871c02-line-height );color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-ac15343{width:var( --container-widget-width, 80% );max-width:80%;--container-widget-width:80%;--container-widget-flex-grow:0;top:93.99px;z-index:10;font-family:"Work Sans", Sans-serif;font-size:14px;font-weight:normal;line-height:24px;color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-ac15343 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border-radius:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-ac15343.elementor-element{--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-ac15343{left:33.976px;}body.rtl .elementor-811 .elementor-element.elementor-element-ac15343{right:33.976px;}.elementor-811 .elementor-element.elementor-element-ac15343 p{margin-block-end:0px;}.elementor-811 .elementor-element.elementor-element-a83a65e > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-a83a65e{z-index:-1;}.elementor-811 .elementor-element.elementor-element-a83a65e img{max-width:100%;height:410px;object-fit:cover;object-position:top center;opacity:100;}.elementor-811 .elementor-element.elementor-element-97654f2{--display:flex;--border-radius:30px 30px 30px 30px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-811 .elementor-element.elementor-element-f5db77c{--display:flex;--position:absolute;--min-height:383px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:0px;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-f5db77c{left:0px;}body.rtl .elementor-811 .elementor-element.elementor-element-f5db77c{right:0px;}.elementor-811 .elementor-element.elementor-element-c0b323c{width:var( --container-widget-width, 68.063% );max-width:68.063%;--container-widget-width:68.063%;--container-widget-flex-grow:0;top:34px;z-index:10;}.elementor-811 .elementor-element.elementor-element-c0b323c > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-c0b323c.elementor-element{--align-self:flex-start;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-c0b323c{left:34px;}body.rtl .elementor-811 .elementor-element.elementor-element-c0b323c{right:34px;}.elementor-811 .elementor-element.elementor-element-c0b323c .elementor-heading-title{font-family:var( --e-global-typography-9871c02-font-family ), Sans-serif;font-size:var( --e-global-typography-9871c02-font-size );font-weight:var( --e-global-typography-9871c02-font-weight );line-height:var( --e-global-typography-9871c02-line-height );color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-8a23d97{width:var( --container-widget-width, 82.978% );max-width:82.978%;--container-widget-width:82.978%;--container-widget-flex-grow:0;bottom:106px;z-index:10;font-family:"Work Sans", Sans-serif;font-size:14px;font-weight:normal;line-height:24px;color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-8a23d97 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border-radius:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-8a23d97.elementor-element{--order:99999 /* order end hack */;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-8a23d97{left:36.934px;}body.rtl .elementor-811 .elementor-element.elementor-element-8a23d97{right:36.934px;}.elementor-811 .elementor-element.elementor-element-8a23d97 p{margin-block-end:0px;}.elementor-811 .elementor-element.elementor-element-f38b237 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-f38b237{z-index:-1;}.elementor-811 .elementor-element.elementor-element-f38b237 img{max-width:100%;height:410px;object-fit:cover;object-position:top center;opacity:100;}.elementor-811 .elementor-element.elementor-element-1044b0d{--display:flex;--border-radius:30px 30px 30px 30px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-811 .elementor-element.elementor-element-419f550{--display:flex;--position:absolute;--min-height:383px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:0px;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-419f550{left:0px;}body.rtl .elementor-811 .elementor-element.elementor-element-419f550{right:0px;}.elementor-811 .elementor-element.elementor-element-fea8417{width:var( --container-widget-width, 68.063% );max-width:68.063%;--container-widget-width:68.063%;--container-widget-flex-grow:0;top:34px;z-index:10;}.elementor-811 .elementor-element.elementor-element-fea8417 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-fea8417.elementor-element{--align-self:flex-start;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-fea8417{left:34px;}body.rtl .elementor-811 .elementor-element.elementor-element-fea8417{right:34px;}.elementor-811 .elementor-element.elementor-element-fea8417 .elementor-heading-title{font-family:var( --e-global-typography-9871c02-font-family ), Sans-serif;font-size:var( --e-global-typography-9871c02-font-size );font-weight:var( --e-global-typography-9871c02-font-weight );line-height:var( --e-global-typography-9871c02-line-height );color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-9ef49a4{width:var( --container-widget-width, 86.147% );max-width:86.147%;--container-widget-width:86.147%;--container-widget-flex-grow:0;bottom:115px;z-index:10;font-family:"Work Sans", Sans-serif;font-size:14px;font-weight:normal;line-height:24px;color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-9ef49a4 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border-radius:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-9ef49a4.elementor-element{--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-9ef49a4{left:34px;}body.rtl .elementor-811 .elementor-element.elementor-element-9ef49a4{right:34px;}.elementor-811 .elementor-element.elementor-element-9ef49a4 p{margin-block-end:0px;}.elementor-811 .elementor-element.elementor-element-912db3e > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-912db3e{z-index:-1;}.elementor-811 .elementor-element.elementor-element-912db3e img{max-width:100%;height:410px;object-fit:cover;object-position:top center;opacity:100;}.elementor-811 .elementor-element.elementor-element-916dcb3{--display:flex;--border-radius:30px 30px 30px 30px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-811 .elementor-element.elementor-element-fc15749{--display:flex;--position:absolute;--min-height:383px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:0px;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-fc15749{left:0px;}body.rtl .elementor-811 .elementor-element.elementor-element-fc15749{right:0px;}.elementor-811 .elementor-element.elementor-element-f3fdf7b{width:var( --container-widget-width, 68.063% );max-width:68.063%;--container-widget-width:68.063%;--container-widget-flex-grow:0;top:34px;z-index:10;}.elementor-811 .elementor-element.elementor-element-f3fdf7b > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-f3fdf7b.elementor-element{--align-self:flex-start;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-f3fdf7b{left:34px;}body.rtl .elementor-811 .elementor-element.elementor-element-f3fdf7b{right:34px;}.elementor-811 .elementor-element.elementor-element-f3fdf7b .elementor-heading-title{font-family:var( --e-global-typography-9871c02-font-family ), Sans-serif;font-size:var( --e-global-typography-9871c02-font-size );font-weight:var( --e-global-typography-9871c02-font-weight );line-height:var( --e-global-typography-9871c02-line-height );color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-51e432b{width:var( --container-widget-width, 83.046% );max-width:83.046%;--container-widget-width:83.046%;--container-widget-flex-grow:0;top:90px;z-index:10;font-family:"Work Sans", Sans-serif;font-size:14px;font-weight:normal;line-height:24px;color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-51e432b > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border-radius:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-51e432b.elementor-element{--order:-99999 /* order start hack */;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-51e432b{left:37px;}body.rtl .elementor-811 .elementor-element.elementor-element-51e432b{right:37px;}.elementor-811 .elementor-element.elementor-element-51e432b p{margin-block-end:0px;}.elementor-811 .elementor-element.elementor-element-6a76179 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-6a76179{z-index:-1;}.elementor-811 .elementor-element.elementor-element-6a76179 img{max-width:100%;height:410px;object-fit:cover;object-position:top center;opacity:100;}.elementor-811 .elementor-element.elementor-element-3cd4b00{--display:flex;--border-radius:30px 30px 30px 30px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-811 .elementor-element.elementor-element-36b2bb6{--display:flex;--position:absolute;--min-height:383px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:0px;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-36b2bb6{left:0px;}body.rtl .elementor-811 .elementor-element.elementor-element-36b2bb6{right:0px;}.elementor-811 .elementor-element.elementor-element-b34a8d1{width:var( --container-widget-width, 68.063% );max-width:68.063%;--container-widget-width:68.063%;--container-widget-flex-grow:0;top:34px;z-index:10;}.elementor-811 .elementor-element.elementor-element-b34a8d1 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-b34a8d1.elementor-element{--align-self:flex-start;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-b34a8d1{left:34px;}body.rtl .elementor-811 .elementor-element.elementor-element-b34a8d1{right:34px;}.elementor-811 .elementor-element.elementor-element-b34a8d1 .elementor-heading-title{font-family:var( --e-global-typography-9871c02-font-family ), Sans-serif;font-size:var( --e-global-typography-9871c02-font-size );font-weight:var( --e-global-typography-9871c02-font-weight );line-height:var( --e-global-typography-9871c02-line-height );color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-36867f6{width:var( --container-widget-width, 82% );max-width:82%;--container-widget-width:82%;--container-widget-flex-grow:0;bottom:114.868px;z-index:10;font-family:"Work Sans", Sans-serif;font-size:14px;font-weight:normal;line-height:24px;color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-36867f6 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border-radius:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-36867f6.elementor-element{--order:-99999 /* order start hack */;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-36867f6{left:39.955px;}body.rtl .elementor-811 .elementor-element.elementor-element-36867f6{right:39.955px;}.elementor-811 .elementor-element.elementor-element-36867f6 p{margin-block-end:0px;}.elementor-811 .elementor-element.elementor-element-29750b5 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-29750b5{z-index:-1;}.elementor-811 .elementor-element.elementor-element-29750b5 img{max-width:100%;height:410px;object-fit:cover;object-position:top center;opacity:100;}.elementor-811 .elementor-element.elementor-element-c2f7d9b{--display:flex;--border-radius:30px 30px 30px 30px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-811 .elementor-element.elementor-element-7171013{--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;--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-811 .elementor-element.elementor-element-3e77711{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:2px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-811 .elementor-element.elementor-element-3e77711.e-con{--align-self:flex-start;--flex-grow:0;--flex-shrink:0;}.elementor-811 .elementor-element.elementor-element-ef84074{--display:flex;--position:absolute;--min-height:383px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:0px;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-ef84074{left:0px;}body.rtl .elementor-811 .elementor-element.elementor-element-ef84074{right:0px;}.elementor-811 .elementor-element.elementor-element-b8bea13{width:var( --container-widget-width, 68.063% );max-width:68.063%;--container-widget-width:68.063%;--container-widget-flex-grow:0;top:34px;z-index:10;}.elementor-811 .elementor-element.elementor-element-b8bea13 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-b8bea13.elementor-element{--align-self:flex-start;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-b8bea13{left:34px;}body.rtl .elementor-811 .elementor-element.elementor-element-b8bea13{right:34px;}.elementor-811 .elementor-element.elementor-element-b8bea13 .elementor-heading-title{font-family:var( --e-global-typography-9871c02-font-family ), Sans-serif;font-size:var( --e-global-typography-9871c02-font-size );font-weight:var( --e-global-typography-9871c02-font-weight );line-height:var( --e-global-typography-9871c02-line-height );color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-9ecfaf3{width:var( --container-widget-width, 77.639% );max-width:77.639%;--container-widget-width:77.639%;--container-widget-flex-grow:0;bottom:114.882px;z-index:10;font-family:"Work Sans", Sans-serif;font-size:14px;font-weight:normal;line-height:24px;color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-9ecfaf3 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border-radius:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-9ecfaf3.elementor-element{--order:-99999 /* order start hack */;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-9ecfaf3{left:40.972px;}body.rtl .elementor-811 .elementor-element.elementor-element-9ecfaf3{right:40.972px;}.elementor-811 .elementor-element.elementor-element-9ecfaf3 p{margin-block-end:0px;}.elementor-811 .elementor-element.elementor-element-e2e4ed8 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-e2e4ed8{z-index:-1;}.elementor-811 .elementor-element.elementor-element-e2e4ed8 img{max-width:100%;height:410px;object-fit:cover;object-position:top center;opacity:100;}.elementor-811 .elementor-element.elementor-element-f8b3d50{--display:flex;--border-radius:30px 30px 30px 30px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-811 .elementor-element.elementor-element-c755759{--display:flex;--position:absolute;--min-height:383px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:0px;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-c755759{left:0px;}body.rtl .elementor-811 .elementor-element.elementor-element-c755759{right:0px;}.elementor-811 .elementor-element.elementor-element-52ff2c5{width:var( --container-widget-width, 79.101% );max-width:79.101%;--container-widget-width:79.101%;--container-widget-flex-grow:0;top:34px;z-index:10;}.elementor-811 .elementor-element.elementor-element-52ff2c5 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-52ff2c5.elementor-element{--align-self:flex-start;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-52ff2c5{left:34px;}body.rtl .elementor-811 .elementor-element.elementor-element-52ff2c5{right:34px;}.elementor-811 .elementor-element.elementor-element-52ff2c5 .elementor-heading-title{font-family:var( --e-global-typography-9871c02-font-family ), Sans-serif;font-size:var( --e-global-typography-9871c02-font-size );font-weight:var( --e-global-typography-9871c02-font-weight );line-height:var( --e-global-typography-9871c02-line-height );color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-01d4d32{width:var( --container-widget-width, 75.933% );max-width:75.933%;--container-widget-width:75.933%;--container-widget-flex-grow:0;bottom:143px;z-index:10;font-family:"Work Sans", Sans-serif;font-size:14px;font-weight:normal;line-height:24px;color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-01d4d32 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border-radius:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-01d4d32.elementor-element{--order:-99999 /* order start hack */;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-01d4d32{left:40.972px;}body.rtl .elementor-811 .elementor-element.elementor-element-01d4d32{right:40.972px;}.elementor-811 .elementor-element.elementor-element-01d4d32 p{margin-block-end:0px;}.elementor-811 .elementor-element.elementor-element-1e16d69 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-1e16d69{z-index:-1;}.elementor-811 .elementor-element.elementor-element-1e16d69 img{max-width:100%;height:410px;object-fit:cover;object-position:top center;opacity:100;}.elementor-811 .elementor-element.elementor-element-7c31a51{--e-n-carousel-swiper-slides-gap:10px;--e-n-carousel-slide-height:auto;--e-n-carousel-slide-container-height:100%;--e-n-carousel-arrow-prev-left-align:0%;--e-n-carousel-arrow-prev-translate-x:0px;--e-n-carousel-arrow-prev-left-position:0px;--e-n-carousel-arrow-prev-top-align:50%;--e-n-carousel-arrow-prev-translate-y:-50%;--e-n-carousel-arrow-prev-top-position:0px;--e-n-carousel-arrow-next-right-align:0%;--e-n-carousel-arrow-next-translate-x:0%;--e-n-carousel-arrow-next-right-position:0px;--e-n-carousel-arrow-next-top-align:50%;--e-n-carousel-arrow-next-translate-y:-50%;--e-n-carousel-arrow-next-top-position:0px;--e-n-carousel-arrow-normal-color:#EF5125;--e-n-carousel-arrow-hover-color:#F5966D;}.elementor-811 .elementor-element.elementor-element-f0b805d{--spacer-size:50px;}.elementor-811 .elementor-element.elementor-element-85dbf39{--display:flex;--min-height:540px;}.elementor-811 .elementor-element.elementor-element-85dbf39:not(.elementor-motion-effects-element-type-background), .elementor-811 .elementor-element.elementor-element-85dbf39 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F2F2F2;}.elementor-811 .elementor-element.elementor-element-57ea3ae{width:100%;max-width:100%;text-align:center;}.elementor-811 .elementor-element.elementor-element-57ea3ae > .elementor-widget-container{margin:0px 0px 50px 0px;}.elementor-811 .elementor-element.elementor-element-57ea3ae.elementor-element{--align-self:center;--flex-grow:1;--flex-shrink:0;}.elementor-811 .elementor-element.elementor-element-57ea3ae .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:46px;font-weight:bold;color:#333232;}.elementor-811 .elementor-element.elementor-element-01dbe84{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;--border-radius:30px 30px 30px 30px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-811 .elementor-element.elementor-element-332d229{--display:flex;--position:absolute;--min-height:383px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:0px;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-332d229{left:0px;}body.rtl .elementor-811 .elementor-element.elementor-element-332d229{right:0px;}.elementor-811 .elementor-element.elementor-element-e32d9ae{width:var( --container-widget-width, 68.063% );max-width:68.063%;--container-widget-width:68.063%;--container-widget-flex-grow:0;top:34px;z-index:10;}.elementor-811 .elementor-element.elementor-element-e32d9ae > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-e32d9ae.elementor-element{--align-self:flex-start;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-e32d9ae{left:34px;}body.rtl .elementor-811 .elementor-element.elementor-element-e32d9ae{right:34px;}.elementor-811 .elementor-element.elementor-element-e32d9ae .elementor-heading-title{font-family:var( --e-global-typography-9871c02-font-family ), Sans-serif;font-size:var( --e-global-typography-9871c02-font-size );font-weight:var( --e-global-typography-9871c02-font-weight );line-height:var( --e-global-typography-9871c02-line-height );color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-344b6b0{width:var( --container-widget-width, 80% );max-width:80%;--container-widget-width:80%;--container-widget-flex-grow:0;top:93.99px;z-index:10;font-family:"Work Sans", Sans-serif;font-size:14px;font-weight:normal;line-height:24px;color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-344b6b0 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border-radius:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-344b6b0.elementor-element{--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-344b6b0{left:33.976px;}body.rtl .elementor-811 .elementor-element.elementor-element-344b6b0{right:33.976px;}.elementor-811 .elementor-element.elementor-element-344b6b0 p{margin-block-end:0px;}.elementor-811 .elementor-element.elementor-element-477ccdd > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-477ccdd{z-index:-1;}.elementor-811 .elementor-element.elementor-element-477ccdd img{max-width:100%;height:410px;object-fit:cover;object-position:top center;opacity:100;}.elementor-811 .elementor-element.elementor-element-315125c{--display:flex;--border-radius:30px 30px 30px 30px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-811 .elementor-element.elementor-element-0529f23{--display:flex;--position:absolute;--min-height:383px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:0px;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-0529f23{left:0px;}body.rtl .elementor-811 .elementor-element.elementor-element-0529f23{right:0px;}.elementor-811 .elementor-element.elementor-element-2e225b4{width:var( --container-widget-width, 68.063% );max-width:68.063%;--container-widget-width:68.063%;--container-widget-flex-grow:0;top:34px;z-index:10;}.elementor-811 .elementor-element.elementor-element-2e225b4 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-2e225b4.elementor-element{--align-self:flex-start;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-2e225b4{left:34px;}body.rtl .elementor-811 .elementor-element.elementor-element-2e225b4{right:34px;}.elementor-811 .elementor-element.elementor-element-2e225b4 .elementor-heading-title{font-family:var( --e-global-typography-9871c02-font-family ), Sans-serif;font-size:var( --e-global-typography-9871c02-font-size );font-weight:var( --e-global-typography-9871c02-font-weight );line-height:var( --e-global-typography-9871c02-line-height );color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-4bc9943{width:var( --container-widget-width, 82.978% );max-width:82.978%;--container-widget-width:82.978%;--container-widget-flex-grow:0;bottom:106px;z-index:10;font-family:"Work Sans", Sans-serif;font-size:14px;font-weight:normal;line-height:24px;color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-4bc9943 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border-radius:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-4bc9943.elementor-element{--order:99999 /* order end hack */;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-4bc9943{left:36.934px;}body.rtl .elementor-811 .elementor-element.elementor-element-4bc9943{right:36.934px;}.elementor-811 .elementor-element.elementor-element-4bc9943 p{margin-block-end:0px;}.elementor-811 .elementor-element.elementor-element-328fca1 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-328fca1{z-index:-1;}.elementor-811 .elementor-element.elementor-element-328fca1 img{max-width:100%;height:410px;object-fit:cover;object-position:top center;opacity:100;}.elementor-811 .elementor-element.elementor-element-c8f071c{--display:flex;--border-radius:30px 30px 30px 30px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-811 .elementor-element.elementor-element-edd1a29{--display:flex;--position:absolute;--min-height:383px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:0px;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-edd1a29{left:0px;}body.rtl .elementor-811 .elementor-element.elementor-element-edd1a29{right:0px;}.elementor-811 .elementor-element.elementor-element-8f0409e{width:var( --container-widget-width, 68.063% );max-width:68.063%;--container-widget-width:68.063%;--container-widget-flex-grow:0;top:34px;z-index:10;}.elementor-811 .elementor-element.elementor-element-8f0409e > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-8f0409e.elementor-element{--align-self:flex-start;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-8f0409e{left:34px;}body.rtl .elementor-811 .elementor-element.elementor-element-8f0409e{right:34px;}.elementor-811 .elementor-element.elementor-element-8f0409e .elementor-heading-title{font-family:var( --e-global-typography-9871c02-font-family ), Sans-serif;font-size:var( --e-global-typography-9871c02-font-size );font-weight:var( --e-global-typography-9871c02-font-weight );line-height:var( --e-global-typography-9871c02-line-height );color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-cc14a9e{width:var( --container-widget-width, 86.147% );max-width:86.147%;--container-widget-width:86.147%;--container-widget-flex-grow:0;bottom:115px;z-index:10;font-family:"Work Sans", Sans-serif;font-size:14px;font-weight:normal;line-height:24px;color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-cc14a9e > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border-radius:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-cc14a9e.elementor-element{--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-cc14a9e{left:34px;}body.rtl .elementor-811 .elementor-element.elementor-element-cc14a9e{right:34px;}.elementor-811 .elementor-element.elementor-element-cc14a9e p{margin-block-end:0px;}.elementor-811 .elementor-element.elementor-element-b9453f5 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-b9453f5{z-index:-1;}.elementor-811 .elementor-element.elementor-element-b9453f5 img{max-width:100%;height:410px;object-fit:cover;object-position:top center;opacity:100;}.elementor-811 .elementor-element.elementor-element-a2512b7{--display:flex;--border-radius:30px 30px 30px 30px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-811 .elementor-element.elementor-element-a5a89f8{--display:flex;--position:absolute;--min-height:383px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:0px;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-a5a89f8{left:0px;}body.rtl .elementor-811 .elementor-element.elementor-element-a5a89f8{right:0px;}.elementor-811 .elementor-element.elementor-element-b7bad5e{width:var( --container-widget-width, 68.063% );max-width:68.063%;--container-widget-width:68.063%;--container-widget-flex-grow:0;top:34px;z-index:10;}.elementor-811 .elementor-element.elementor-element-b7bad5e > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-b7bad5e.elementor-element{--align-self:flex-start;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-b7bad5e{left:34px;}body.rtl .elementor-811 .elementor-element.elementor-element-b7bad5e{right:34px;}.elementor-811 .elementor-element.elementor-element-b7bad5e .elementor-heading-title{font-family:var( --e-global-typography-9871c02-font-family ), Sans-serif;font-size:var( --e-global-typography-9871c02-font-size );font-weight:var( --e-global-typography-9871c02-font-weight );line-height:var( --e-global-typography-9871c02-line-height );color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-b2beefb{width:var( --container-widget-width, 83.046% );max-width:83.046%;--container-widget-width:83.046%;--container-widget-flex-grow:0;top:90px;z-index:10;font-family:"Work Sans", Sans-serif;font-size:14px;font-weight:normal;line-height:24px;color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-b2beefb > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border-radius:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-b2beefb.elementor-element{--order:-99999 /* order start hack */;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-b2beefb{left:37px;}body.rtl .elementor-811 .elementor-element.elementor-element-b2beefb{right:37px;}.elementor-811 .elementor-element.elementor-element-b2beefb p{margin-block-end:0px;}.elementor-811 .elementor-element.elementor-element-76c270f > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-76c270f{z-index:-1;}.elementor-811 .elementor-element.elementor-element-76c270f img{max-width:100%;height:410px;object-fit:cover;object-position:top center;opacity:100;}.elementor-811 .elementor-element.elementor-element-81f9b67{--display:flex;--border-radius:30px 30px 30px 30px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-811 .elementor-element.elementor-element-206d2be{--display:flex;--position:absolute;--min-height:383px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:0px;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-206d2be{left:0px;}body.rtl .elementor-811 .elementor-element.elementor-element-206d2be{right:0px;}.elementor-811 .elementor-element.elementor-element-65045a7{width:var( --container-widget-width, 68.063% );max-width:68.063%;--container-widget-width:68.063%;--container-widget-flex-grow:0;top:34px;z-index:10;}.elementor-811 .elementor-element.elementor-element-65045a7 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-65045a7.elementor-element{--align-self:flex-start;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-65045a7{left:34px;}body.rtl .elementor-811 .elementor-element.elementor-element-65045a7{right:34px;}.elementor-811 .elementor-element.elementor-element-65045a7 .elementor-heading-title{font-family:var( --e-global-typography-9871c02-font-family ), Sans-serif;font-size:var( --e-global-typography-9871c02-font-size );font-weight:var( --e-global-typography-9871c02-font-weight );line-height:var( --e-global-typography-9871c02-line-height );color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-52bff06{width:var( --container-widget-width, 82% );max-width:82%;--container-widget-width:82%;--container-widget-flex-grow:0;bottom:114.868px;z-index:10;font-family:"Work Sans", Sans-serif;font-size:14px;font-weight:normal;line-height:24px;color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-52bff06 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border-radius:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-52bff06.elementor-element{--order:-99999 /* order start hack */;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-52bff06{left:39.955px;}body.rtl .elementor-811 .elementor-element.elementor-element-52bff06{right:39.955px;}.elementor-811 .elementor-element.elementor-element-52bff06 p{margin-block-end:0px;}.elementor-811 .elementor-element.elementor-element-cba141d > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-cba141d{z-index:-1;}.elementor-811 .elementor-element.elementor-element-cba141d img{max-width:100%;height:410px;object-fit:cover;object-position:top center;opacity:100;}.elementor-811 .elementor-element.elementor-element-7f0a000{--display:flex;--border-radius:30px 30px 30px 30px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-811 .elementor-element.elementor-element-505b52c{--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;--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-811 .elementor-element.elementor-element-69a866c{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:2px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-811 .elementor-element.elementor-element-69a866c.e-con{--align-self:flex-start;--flex-grow:0;--flex-shrink:0;}.elementor-811 .elementor-element.elementor-element-a5370b7{--display:flex;--position:absolute;--min-height:383px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:0px;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-a5370b7{left:0px;}body.rtl .elementor-811 .elementor-element.elementor-element-a5370b7{right:0px;}.elementor-811 .elementor-element.elementor-element-9006618{width:var( --container-widget-width, 68.063% );max-width:68.063%;--container-widget-width:68.063%;--container-widget-flex-grow:0;top:34px;z-index:10;}.elementor-811 .elementor-element.elementor-element-9006618 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-9006618.elementor-element{--align-self:flex-start;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-9006618{left:34px;}body.rtl .elementor-811 .elementor-element.elementor-element-9006618{right:34px;}.elementor-811 .elementor-element.elementor-element-9006618 .elementor-heading-title{font-family:var( --e-global-typography-9871c02-font-family ), Sans-serif;font-size:var( --e-global-typography-9871c02-font-size );font-weight:var( --e-global-typography-9871c02-font-weight );line-height:var( --e-global-typography-9871c02-line-height );color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-ed0f57f{width:var( --container-widget-width, 77.639% );max-width:77.639%;--container-widget-width:77.639%;--container-widget-flex-grow:0;bottom:114.882px;z-index:10;font-family:"Work Sans", Sans-serif;font-size:14px;font-weight:normal;line-height:24px;color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-ed0f57f > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border-radius:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-ed0f57f.elementor-element{--order:-99999 /* order start hack */;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-ed0f57f{left:40.972px;}body.rtl .elementor-811 .elementor-element.elementor-element-ed0f57f{right:40.972px;}.elementor-811 .elementor-element.elementor-element-ed0f57f p{margin-block-end:0px;}.elementor-811 .elementor-element.elementor-element-f15f852 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-f15f852{z-index:-1;}.elementor-811 .elementor-element.elementor-element-f15f852 img{max-width:100%;height:410px;object-fit:cover;object-position:top center;opacity:100;}.elementor-811 .elementor-element.elementor-element-6a0c96f{--display:flex;--border-radius:30px 30px 30px 30px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-811 .elementor-element.elementor-element-6fa065e{--display:flex;--position:absolute;--min-height:383px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:0px;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-6fa065e{left:0px;}body.rtl .elementor-811 .elementor-element.elementor-element-6fa065e{right:0px;}.elementor-811 .elementor-element.elementor-element-27f6b43{width:var( --container-widget-width, 79.101% );max-width:79.101%;--container-widget-width:79.101%;--container-widget-flex-grow:0;top:34px;z-index:10;}.elementor-811 .elementor-element.elementor-element-27f6b43 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-27f6b43.elementor-element{--align-self:flex-start;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-27f6b43{left:34px;}body.rtl .elementor-811 .elementor-element.elementor-element-27f6b43{right:34px;}.elementor-811 .elementor-element.elementor-element-27f6b43 .elementor-heading-title{font-family:var( --e-global-typography-9871c02-font-family ), Sans-serif;font-size:var( --e-global-typography-9871c02-font-size );font-weight:var( --e-global-typography-9871c02-font-weight );line-height:var( --e-global-typography-9871c02-line-height );color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-104af3b{width:var( --container-widget-width, 75.933% );max-width:75.933%;--container-widget-width:75.933%;--container-widget-flex-grow:0;bottom:143px;z-index:10;font-family:"Work Sans", Sans-serif;font-size:14px;font-weight:normal;line-height:24px;color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-104af3b > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border-radius:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-104af3b.elementor-element{--order:-99999 /* order start hack */;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-104af3b{left:40.972px;}body.rtl .elementor-811 .elementor-element.elementor-element-104af3b{right:40.972px;}.elementor-811 .elementor-element.elementor-element-104af3b p{margin-block-end:0px;}.elementor-811 .elementor-element.elementor-element-69d75ef > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-69d75ef{z-index:-1;}.elementor-811 .elementor-element.elementor-element-69d75ef img{max-width:100%;height:410px;object-fit:cover;object-position:top center;opacity:100;}.elementor-811 .elementor-element.elementor-element-7e9aaf2{--e-n-carousel-swiper-slides-gap:10px;--e-n-carousel-slide-height:auto;--e-n-carousel-slide-container-height:100%;--e-n-carousel-arrow-prev-left-align:0%;--e-n-carousel-arrow-prev-translate-x:0px;--e-n-carousel-arrow-prev-left-position:0px;--e-n-carousel-arrow-prev-top-align:50%;--e-n-carousel-arrow-prev-translate-y:-50%;--e-n-carousel-arrow-prev-top-position:0px;--e-n-carousel-arrow-next-right-align:0%;--e-n-carousel-arrow-next-translate-x:0%;--e-n-carousel-arrow-next-right-position:0px;--e-n-carousel-arrow-next-top-align:50%;--e-n-carousel-arrow-next-translate-y:-50%;--e-n-carousel-arrow-next-top-position:0px;--e-n-carousel-arrow-normal-color:#EF5125;--e-n-carousel-arrow-hover-color:#F5966D;}.elementor-811 .elementor-element.elementor-element-f4ecb0a{--spacer-size:50px;}.elementor-811 .elementor-element.elementor-element-ae38ed2{--display:flex;--min-height:540px;}.elementor-811 .elementor-element.elementor-element-ae38ed2:not(.elementor-motion-effects-element-type-background), .elementor-811 .elementor-element.elementor-element-ae38ed2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F2F2F2;}.elementor-811 .elementor-element.elementor-element-7ccfe80{width:100%;max-width:100%;text-align:center;}.elementor-811 .elementor-element.elementor-element-7ccfe80 > .elementor-widget-container{margin:0px 0px 50px 0px;}.elementor-811 .elementor-element.elementor-element-7ccfe80.elementor-element{--align-self:center;--flex-grow:1;--flex-shrink:0;}.elementor-811 .elementor-element.elementor-element-7ccfe80 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:46px;font-weight:bold;color:#333232;}.elementor-811 .elementor-element.elementor-element-f154921{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;--border-radius:30px 30px 30px 30px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-811 .elementor-element.elementor-element-b0f5fa1{--display:flex;--position:absolute;--min-height:383px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:0px;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-b0f5fa1{left:0px;}body.rtl .elementor-811 .elementor-element.elementor-element-b0f5fa1{right:0px;}.elementor-811 .elementor-element.elementor-element-5790262{width:var( --container-widget-width, 68.063% );max-width:68.063%;--container-widget-width:68.063%;--container-widget-flex-grow:0;top:34px;z-index:10;}.elementor-811 .elementor-element.elementor-element-5790262 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-5790262.elementor-element{--align-self:flex-start;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-5790262{left:34px;}body.rtl .elementor-811 .elementor-element.elementor-element-5790262{right:34px;}.elementor-811 .elementor-element.elementor-element-5790262 .elementor-heading-title{font-family:var( --e-global-typography-9871c02-font-family ), Sans-serif;font-size:var( --e-global-typography-9871c02-font-size );font-weight:var( --e-global-typography-9871c02-font-weight );line-height:var( --e-global-typography-9871c02-line-height );color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-21296b8{width:var( --container-widget-width, 80% );max-width:80%;--container-widget-width:80%;--container-widget-flex-grow:0;top:93.99px;z-index:10;font-family:"Work Sans", Sans-serif;font-size:14px;font-weight:normal;line-height:24px;color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-21296b8 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border-radius:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-21296b8.elementor-element{--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-21296b8{left:33.976px;}body.rtl .elementor-811 .elementor-element.elementor-element-21296b8{right:33.976px;}.elementor-811 .elementor-element.elementor-element-21296b8 p{margin-block-end:0px;}.elementor-811 .elementor-element.elementor-element-530e4c4 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-530e4c4{z-index:-1;}.elementor-811 .elementor-element.elementor-element-530e4c4 img{max-width:100%;height:410px;object-fit:cover;object-position:top center;opacity:100;filter:brightness( 60% ) contrast( 55% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-811 .elementor-element.elementor-element-968959c{--display:flex;--border-radius:30px 30px 30px 30px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-811 .elementor-element.elementor-element-b52538e{--display:flex;--position:absolute;--min-height:383px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:0px;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-b52538e{left:0px;}body.rtl .elementor-811 .elementor-element.elementor-element-b52538e{right:0px;}.elementor-811 .elementor-element.elementor-element-ef6e6b9{width:var( --container-widget-width, 68.063% );max-width:68.063%;--container-widget-width:68.063%;--container-widget-flex-grow:0;top:34px;z-index:10;}.elementor-811 .elementor-element.elementor-element-ef6e6b9 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-ef6e6b9.elementor-element{--align-self:flex-start;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-ef6e6b9{left:34px;}body.rtl .elementor-811 .elementor-element.elementor-element-ef6e6b9{right:34px;}.elementor-811 .elementor-element.elementor-element-ef6e6b9 .elementor-heading-title{font-family:var( --e-global-typography-9871c02-font-family ), Sans-serif;font-size:var( --e-global-typography-9871c02-font-size );font-weight:var( --e-global-typography-9871c02-font-weight );line-height:var( --e-global-typography-9871c02-line-height );color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-63c07e7{width:var( --container-widget-width, 82.978% );max-width:82.978%;--container-widget-width:82.978%;--container-widget-flex-grow:0;bottom:106px;z-index:10;font-family:"Work Sans", Sans-serif;font-size:14px;font-weight:normal;line-height:24px;color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-63c07e7 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border-radius:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-63c07e7.elementor-element{--order:99999 /* order end hack */;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-63c07e7{left:36.934px;}body.rtl .elementor-811 .elementor-element.elementor-element-63c07e7{right:36.934px;}.elementor-811 .elementor-element.elementor-element-63c07e7 p{margin-block-end:0px;}.elementor-811 .elementor-element.elementor-element-bfea2e6 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-bfea2e6{z-index:-1;}.elementor-811 .elementor-element.elementor-element-bfea2e6 img{max-width:100%;height:410px;object-fit:cover;object-position:top center;opacity:100;filter:brightness( 60% ) contrast( 55% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-811 .elementor-element.elementor-element-29ab4de{--display:flex;--border-radius:30px 30px 30px 30px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-811 .elementor-element.elementor-element-f605a6c{--display:flex;--position:absolute;--min-height:383px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:0px;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-f605a6c{left:0px;}body.rtl .elementor-811 .elementor-element.elementor-element-f605a6c{right:0px;}.elementor-811 .elementor-element.elementor-element-2bde3de{width:var( --container-widget-width, 68.063% );max-width:68.063%;--container-widget-width:68.063%;--container-widget-flex-grow:0;top:34px;z-index:10;}.elementor-811 .elementor-element.elementor-element-2bde3de > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-2bde3de.elementor-element{--align-self:flex-start;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-2bde3de{left:34px;}body.rtl .elementor-811 .elementor-element.elementor-element-2bde3de{right:34px;}.elementor-811 .elementor-element.elementor-element-2bde3de .elementor-heading-title{font-family:var( --e-global-typography-9871c02-font-family ), Sans-serif;font-size:var( --e-global-typography-9871c02-font-size );font-weight:var( --e-global-typography-9871c02-font-weight );line-height:var( --e-global-typography-9871c02-line-height );color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-af6db6e{width:var( --container-widget-width, 86.147% );max-width:86.147%;--container-widget-width:86.147%;--container-widget-flex-grow:0;bottom:115px;z-index:10;font-family:"Work Sans", Sans-serif;font-size:14px;font-weight:normal;line-height:24px;color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-af6db6e > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border-radius:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-af6db6e.elementor-element{--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-af6db6e{left:34px;}body.rtl .elementor-811 .elementor-element.elementor-element-af6db6e{right:34px;}.elementor-811 .elementor-element.elementor-element-af6db6e p{margin-block-end:0px;}.elementor-811 .elementor-element.elementor-element-a2a8da4 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-a2a8da4{z-index:-1;}.elementor-811 .elementor-element.elementor-element-a2a8da4 img{max-width:100%;height:410px;object-fit:cover;object-position:top center;opacity:100;filter:brightness( 60% ) contrast( 55% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-811 .elementor-element.elementor-element-fcd6f9e{--display:flex;--border-radius:30px 30px 30px 30px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-811 .elementor-element.elementor-element-0a6378a{--display:flex;--position:absolute;--min-height:383px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:0px;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-0a6378a{left:0px;}body.rtl .elementor-811 .elementor-element.elementor-element-0a6378a{right:0px;}.elementor-811 .elementor-element.elementor-element-f9b4361{width:var( --container-widget-width, 68.063% );max-width:68.063%;--container-widget-width:68.063%;--container-widget-flex-grow:0;top:34px;z-index:10;}.elementor-811 .elementor-element.elementor-element-f9b4361 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-f9b4361.elementor-element{--align-self:flex-start;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-f9b4361{left:34px;}body.rtl .elementor-811 .elementor-element.elementor-element-f9b4361{right:34px;}.elementor-811 .elementor-element.elementor-element-f9b4361 .elementor-heading-title{font-family:var( --e-global-typography-9871c02-font-family ), Sans-serif;font-size:var( --e-global-typography-9871c02-font-size );font-weight:var( --e-global-typography-9871c02-font-weight );line-height:var( --e-global-typography-9871c02-line-height );color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-5f18915{width:var( --container-widget-width, 83.046% );max-width:83.046%;--container-widget-width:83.046%;--container-widget-flex-grow:0;top:90px;z-index:10;font-family:"Work Sans", Sans-serif;font-size:14px;font-weight:normal;line-height:24px;color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-5f18915 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border-radius:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-5f18915.elementor-element{--order:-99999 /* order start hack */;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-5f18915{left:37px;}body.rtl .elementor-811 .elementor-element.elementor-element-5f18915{right:37px;}.elementor-811 .elementor-element.elementor-element-5f18915 p{margin-block-end:0px;}.elementor-811 .elementor-element.elementor-element-6f2e8d9 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-6f2e8d9{z-index:-1;}.elementor-811 .elementor-element.elementor-element-6f2e8d9 img{max-width:100%;height:410px;object-fit:cover;object-position:top center;opacity:100;filter:brightness( 60% ) contrast( 55% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-811 .elementor-element.elementor-element-11da384{--display:flex;--border-radius:30px 30px 30px 30px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-811 .elementor-element.elementor-element-fe03e30{--display:flex;--position:absolute;--min-height:383px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:0px;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-fe03e30{left:0px;}body.rtl .elementor-811 .elementor-element.elementor-element-fe03e30{right:0px;}.elementor-811 .elementor-element.elementor-element-2831e18{width:var( --container-widget-width, 68.063% );max-width:68.063%;--container-widget-width:68.063%;--container-widget-flex-grow:0;top:34px;z-index:10;}.elementor-811 .elementor-element.elementor-element-2831e18 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-2831e18.elementor-element{--align-self:flex-start;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-2831e18{left:34px;}body.rtl .elementor-811 .elementor-element.elementor-element-2831e18{right:34px;}.elementor-811 .elementor-element.elementor-element-2831e18 .elementor-heading-title{font-family:var( --e-global-typography-9871c02-font-family ), Sans-serif;font-size:var( --e-global-typography-9871c02-font-size );font-weight:var( --e-global-typography-9871c02-font-weight );line-height:var( --e-global-typography-9871c02-line-height );color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-f84b565{width:var( --container-widget-width, 82% );max-width:82%;--container-widget-width:82%;--container-widget-flex-grow:0;bottom:114.868px;z-index:10;font-family:"Work Sans", Sans-serif;font-size:14px;font-weight:normal;line-height:24px;color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-f84b565 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border-radius:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-f84b565.elementor-element{--order:-99999 /* order start hack */;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-f84b565{left:39.955px;}body.rtl .elementor-811 .elementor-element.elementor-element-f84b565{right:39.955px;}.elementor-811 .elementor-element.elementor-element-f84b565 p{margin-block-end:0px;}.elementor-811 .elementor-element.elementor-element-39c333d > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-39c333d{z-index:-1;}.elementor-811 .elementor-element.elementor-element-39c333d img{max-width:100%;height:410px;object-fit:cover;object-position:top center;opacity:100;filter:brightness( 60% ) contrast( 55% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-811 .elementor-element.elementor-element-0153a18{--display:flex;--border-radius:30px 30px 30px 30px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-811 .elementor-element.elementor-element-14bab45{--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;--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-811 .elementor-element.elementor-element-8f6e1d3{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:2px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-811 .elementor-element.elementor-element-8f6e1d3.e-con{--align-self:flex-start;--flex-grow:0;--flex-shrink:0;}.elementor-811 .elementor-element.elementor-element-ab6ef66{--display:flex;--position:absolute;--min-height:383px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:0px;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-ab6ef66{left:0px;}body.rtl .elementor-811 .elementor-element.elementor-element-ab6ef66{right:0px;}.elementor-811 .elementor-element.elementor-element-4ab8a8d{width:var( --container-widget-width, 68.063% );max-width:68.063%;--container-widget-width:68.063%;--container-widget-flex-grow:0;top:34px;z-index:10;}.elementor-811 .elementor-element.elementor-element-4ab8a8d > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-4ab8a8d.elementor-element{--align-self:flex-start;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-4ab8a8d{left:34px;}body.rtl .elementor-811 .elementor-element.elementor-element-4ab8a8d{right:34px;}.elementor-811 .elementor-element.elementor-element-4ab8a8d .elementor-heading-title{font-family:var( --e-global-typography-9871c02-font-family ), Sans-serif;font-size:var( --e-global-typography-9871c02-font-size );font-weight:var( --e-global-typography-9871c02-font-weight );line-height:var( --e-global-typography-9871c02-line-height );color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-4a7b295{width:var( --container-widget-width, 77.639% );max-width:77.639%;--container-widget-width:77.639%;--container-widget-flex-grow:0;bottom:114.882px;z-index:10;font-family:"Work Sans", Sans-serif;font-size:14px;font-weight:normal;line-height:24px;color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-4a7b295 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border-radius:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-4a7b295.elementor-element{--order:-99999 /* order start hack */;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-4a7b295{left:40.972px;}body.rtl .elementor-811 .elementor-element.elementor-element-4a7b295{right:40.972px;}.elementor-811 .elementor-element.elementor-element-4a7b295 p{margin-block-end:0px;}.elementor-811 .elementor-element.elementor-element-1f3a0c3 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-1f3a0c3{z-index:-1;}.elementor-811 .elementor-element.elementor-element-1f3a0c3 img{max-width:100%;height:410px;object-fit:cover;object-position:top center;opacity:100;filter:brightness( 60% ) contrast( 55% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-811 .elementor-element.elementor-element-e770376{--display:flex;--border-radius:30px 30px 30px 30px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-811 .elementor-element.elementor-element-76e1651{--display:flex;--position:absolute;--min-height:383px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:0px;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-76e1651{left:0px;}body.rtl .elementor-811 .elementor-element.elementor-element-76e1651{right:0px;}.elementor-811 .elementor-element.elementor-element-6ebec7f{width:var( --container-widget-width, 79.101% );max-width:79.101%;--container-widget-width:79.101%;--container-widget-flex-grow:0;top:34px;z-index:10;}.elementor-811 .elementor-element.elementor-element-6ebec7f > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-6ebec7f.elementor-element{--align-self:flex-start;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-6ebec7f{left:34px;}body.rtl .elementor-811 .elementor-element.elementor-element-6ebec7f{right:34px;}.elementor-811 .elementor-element.elementor-element-6ebec7f .elementor-heading-title{font-family:var( --e-global-typography-9871c02-font-family ), Sans-serif;font-size:var( --e-global-typography-9871c02-font-size );font-weight:var( --e-global-typography-9871c02-font-weight );line-height:var( --e-global-typography-9871c02-line-height );color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-66157cf{width:var( --container-widget-width, 75.933% );max-width:75.933%;--container-widget-width:75.933%;--container-widget-flex-grow:0;bottom:143px;z-index:10;font-family:"Work Sans", Sans-serif;font-size:14px;font-weight:normal;line-height:24px;color:#FFFFFF;}.elementor-811 .elementor-element.elementor-element-66157cf > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border-radius:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-66157cf.elementor-element{--order:-99999 /* order start hack */;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-66157cf{left:40.972px;}body.rtl .elementor-811 .elementor-element.elementor-element-66157cf{right:40.972px;}.elementor-811 .elementor-element.elementor-element-66157cf p{margin-block-end:0px;}.elementor-811 .elementor-element.elementor-element-0eeb4c0 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-0eeb4c0{z-index:-1;}.elementor-811 .elementor-element.elementor-element-0eeb4c0 img{max-width:100%;height:410px;object-fit:cover;object-position:top center;opacity:100;filter:brightness( 60% ) contrast( 55% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-811 .elementor-element.elementor-element-8c6586b{--e-n-carousel-swiper-slides-gap:10px;--e-n-carousel-slide-height:auto;--e-n-carousel-slide-container-height:100%;--e-n-carousel-arrow-prev-left-align:0%;--e-n-carousel-arrow-prev-translate-x:0px;--e-n-carousel-arrow-prev-left-position:0px;--e-n-carousel-arrow-prev-top-align:50%;--e-n-carousel-arrow-prev-translate-y:-50%;--e-n-carousel-arrow-prev-top-position:0px;--e-n-carousel-arrow-next-right-align:0%;--e-n-carousel-arrow-next-translate-x:0%;--e-n-carousel-arrow-next-right-position:0px;--e-n-carousel-arrow-next-top-align:50%;--e-n-carousel-arrow-next-translate-y:-50%;--e-n-carousel-arrow-next-top-position:0px;--e-n-carousel-arrow-normal-color:#EF5125;--e-n-carousel-arrow-hover-color:#F5966D;}.elementor-811 .elementor-element.elementor-element-cf006f4{--spacer-size:50px;}.elementor-811 .elementor-element.elementor-element-215d14f{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:0px 100px;--row-gap:0px;--column-gap:100px;}.elementor-811 .elementor-element.elementor-element-f16d67f{--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;--gap:30px 30px;--row-gap:30px;--column-gap:30px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-811 .elementor-element.elementor-element-0aae41b > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-811 .elementor-element.elementor-element-0aae41b .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:46px;font-weight:700;line-height:55px;}.elementor-811 .elementor-element.elementor-element-e0d4de3{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-primary );}.elementor-811 .elementor-element.elementor-element-05c40fd{--display:flex;--min-height:469px;--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-811 .elementor-element.elementor-element-05c40fd:not(.elementor-motion-effects-element-type-background), .elementor-811 .elementor-element.elementor-element-05c40fd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.sixsentix.com/wp-content/uploads/2025/12/check-mark.svg");background-position:center center;background-repeat:no-repeat;background-size:140% auto;}.elementor-811 .elementor-element.elementor-element-1678224.elementor-element{--align-self:stretch;--order:99999 /* order end hack */;--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-1678224{left:0px;}body.rtl .elementor-811 .elementor-element.elementor-element-1678224{right:0px;}.elementor-811 .elementor-element.elementor-element-1678224{top:0px;}.elementor-811 .elementor-element.elementor-element-1678224 img{width:34%;}.elementor-811 .elementor-element.elementor-element-fb210c7{--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;--flex-wrap:wrap;--padding-top:50px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-811 .elementor-element.elementor-element-8e4968d{--min-height:400px;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-811 .elementor-element.elementor-element-1053cf4{z-index:9;}.elementor-811 .elementor-element.elementor-element-1053cf4 .elementor-heading-title{font-size:50px;line-height:55px;}.elementor-811 .elementor-element.elementor-element-8c674b3{--gap:20px 20px;--row-gap:20px;--column-gap:20px;--flex-wrap:wrap;}.elementor-811 .elementor-element.elementor-element-699de63 .elementor-heading-title{font-size:36px;line-height:40px;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-811 .elementor-element.elementor-element-90d30e0{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-811 .elementor-element.elementor-element-9af573e{--gap:20px 20px;--row-gap:20px;--column-gap:20px;--flex-wrap:wrap;}.elementor-811 .elementor-element.elementor-element-d202696.e-con{--order:99999 /* order end hack */;}.elementor-811 .elementor-element.elementor-element-4568872 .elementor-heading-title{font-size:36px;line-height:40px;}.elementor-811 .elementor-element.elementor-element-23ea7e5{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-811 .elementor-element.elementor-element-f3e0454 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-c0b323c .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-fea8417 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-f3fdf7b .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-b34a8d1 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-b8bea13 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-52ff2c5 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-7c31a51{--e-n-carousel-swiper-slides-to-display:2;}.elementor-811 .elementor-element.elementor-element-e32d9ae .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-2e225b4 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-4bc9943{bottom:86px;}.elementor-811 .elementor-element.elementor-element-8f0409e .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-cc14a9e{bottom:95px;}.elementor-811 .elementor-element.elementor-element-b7bad5e .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-65045a7 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-52bff06{bottom:95px;}.elementor-811 .elementor-element.elementor-element-9006618 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-27f6b43 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-104af3b{bottom:102px;}.elementor-811 .elementor-element.elementor-element-7e9aaf2{--e-n-carousel-swiper-slides-to-display:2;}.elementor-811 .elementor-element.elementor-element-5790262 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-ef6e6b9 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-2bde3de .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-f9b4361 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-2831e18 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-4ab8a8d .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-6ebec7f .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-8c6586b{--e-n-carousel-swiper-slides-to-display:2;}.elementor-811 .elementor-element.elementor-element-e0d4de3{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-811 .elementor-element.elementor-element-05c40fd{--min-height:261px;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-1678224{left:-31px;}body.rtl .elementor-811 .elementor-element.elementor-element-1678224{right:-31px;}.elementor-811 .elementor-element.elementor-element-1678224{top:10px;}.elementor-811 .elementor-element.elementor-element-1678224 img{width:38%;max-width:41%;}}@media(max-width:767px){.elementor-811 .elementor-element.elementor-element-8e4968d{--min-height:300px;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-811 .elementor-element.elementor-element-1053cf4 .elementor-heading-title{font-size:40px;line-height:46px;}.elementor-811 .elementor-element.elementor-element-699de63 .elementor-heading-title{font-size:30px;line-height:36px;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-811 .elementor-element.elementor-element-90d30e0{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-811 .elementor-element.elementor-element-4568872 .elementor-heading-title{font-size:30px;line-height:36px;}.elementor-811 .elementor-element.elementor-element-23ea7e5{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-811 .elementor-element.elementor-element-d1020a3 .elementor-heading-title{font-size:30px;}.elementor-811 .elementor-element.elementor-element-f3e0454 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-c0b323c .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-fea8417 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-f3fdf7b .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-b34a8d1 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-b8bea13 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-52ff2c5 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-7c31a51{--e-n-carousel-swiper-slides-to-display:1;}.elementor-811 .elementor-element.elementor-element-57ea3ae .elementor-heading-title{font-size:30px;}.elementor-811 .elementor-element.elementor-element-e32d9ae .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-2e225b4 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-8f0409e .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-b7bad5e .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-65045a7 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-9006618 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-27f6b43 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-7e9aaf2{--e-n-carousel-swiper-slides-to-display:1;}.elementor-811 .elementor-element.elementor-element-7ccfe80 .elementor-heading-title{font-size:30px;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-5790262{left:25px;}body.rtl .elementor-811 .elementor-element.elementor-element-5790262{right:25px;}.elementor-811 .elementor-element.elementor-element-5790262 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-21296b8{left:25px;}body.rtl .elementor-811 .elementor-element.elementor-element-21296b8{right:25px;}.elementor-811 .elementor-element.elementor-element-21296b8{top:80px;}.elementor-811 .elementor-element.elementor-element-b52538e{--min-height:383px;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-ef6e6b9{left:25px;}body.rtl .elementor-811 .elementor-element.elementor-element-ef6e6b9{right:25px;}.elementor-811 .elementor-element.elementor-element-ef6e6b9 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-63c07e7{left:25px;}body.rtl .elementor-811 .elementor-element.elementor-element-63c07e7{right:25px;}.elementor-811 .elementor-element.elementor-element-63c07e7{bottom:29px;}.elementor-811 .elementor-element.elementor-element-63c07e7 p{margin-block-end:0px;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-2bde3de{left:25px;}body.rtl .elementor-811 .elementor-element.elementor-element-2bde3de{right:25px;}.elementor-811 .elementor-element.elementor-element-2bde3de .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-af6db6e{left:25px;}body.rtl .elementor-811 .elementor-element.elementor-element-af6db6e{right:25px;}.elementor-811 .elementor-element.elementor-element-af6db6e{bottom:30px;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-f9b4361{left:25px;}body.rtl .elementor-811 .elementor-element.elementor-element-f9b4361{right:25px;}.elementor-811 .elementor-element.elementor-element-f9b4361 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-5f18915{left:25px;}body.rtl .elementor-811 .elementor-element.elementor-element-5f18915{right:25px;}.elementor-811 .elementor-element.elementor-element-5f18915{top:85px;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-2831e18{left:25px;}body.rtl .elementor-811 .elementor-element.elementor-element-2831e18{right:25px;}.elementor-811 .elementor-element.elementor-element-2831e18 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-f84b565{left:25px;}body.rtl .elementor-811 .elementor-element.elementor-element-f84b565{right:25px;}.elementor-811 .elementor-element.elementor-element-f84b565{bottom:16px;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-4ab8a8d{left:25px;}body.rtl .elementor-811 .elementor-element.elementor-element-4ab8a8d{right:25px;}.elementor-811 .elementor-element.elementor-element-4ab8a8d .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-4a7b295{left:25px;}body.rtl .elementor-811 .elementor-element.elementor-element-4a7b295{right:25px;}.elementor-811 .elementor-element.elementor-element-4a7b295{bottom:50px;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-6ebec7f{left:25px;}body.rtl .elementor-811 .elementor-element.elementor-element-6ebec7f{right:25px;}.elementor-811 .elementor-element.elementor-element-6ebec7f .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-66157cf{left:25px;}body.rtl .elementor-811 .elementor-element.elementor-element-66157cf{right:25px;}.elementor-811 .elementor-element.elementor-element-66157cf{bottom:94px;}.elementor-811 .elementor-element.elementor-element-8c6586b{--e-n-carousel-swiper-slides-to-display:1;}.elementor-811 .elementor-element.elementor-element-215d14f{--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-811 .elementor-element.elementor-element-0aae41b .elementor-heading-title{font-size:30px;line-height:1.5em;letter-spacing:0.5px;word-spacing:0em;}.elementor-811 .elementor-element.elementor-element-e0d4de3{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-811 .elementor-element.elementor-element-1678224{width:var( --container-widget-width, 275.222px );max-width:275.222px;--container-widget-width:275.222px;--container-widget-flex-grow:0;top:89px;}body:not(.rtl) .elementor-811 .elementor-element.elementor-element-1678224{left:13px;}body.rtl .elementor-811 .elementor-element.elementor-element-1678224{right:13px;}.elementor-811 .elementor-element.elementor-element-fb210c7{--margin-top:-107px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}}@media(min-width:768px){.elementor-811 .elementor-element.elementor-element-f84b04c{--width:50%;}.elementor-811 .elementor-element.elementor-element-f3722c1{--width:50%;}.elementor-811 .elementor-element.elementor-element-d202696{--width:50%;}.elementor-811 .elementor-element.elementor-element-4f1a755{--width:50%;}.elementor-811 .elementor-element.elementor-element-7171013{--width:100%;}.elementor-811 .elementor-element.elementor-element-3e77711{--width:100%;}.elementor-811 .elementor-element.elementor-element-505b52c{--width:100%;}.elementor-811 .elementor-element.elementor-element-69a866c{--width:100%;}.elementor-811 .elementor-element.elementor-element-14bab45{--width:100%;}.elementor-811 .elementor-element.elementor-element-8f6e1d3{--width:100%;}.elementor-811 .elementor-element.elementor-element-f16d67f{--width:50%;}.elementor-811 .elementor-element.elementor-element-05c40fd{--width:50%;}}@media(max-width:1024px) and (min-width:768px){.elementor-811 .elementor-element.elementor-element-f84b04c{--width:100%;}.elementor-811 .elementor-element.elementor-element-f3722c1{--width:100%;}.elementor-811 .elementor-element.elementor-element-d202696{--width:100%;}.elementor-811 .elementor-element.elementor-element-4f1a755{--width:100%;}.elementor-811 .elementor-element.elementor-element-f16d67f{--width:728px;}.elementor-811 .elementor-element.elementor-element-05c40fd{--width:534px;}}@media(min-width:1940px){.elementor-811 .elementor-element.elementor-element-8e4968d{--content-width:1330px;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-811 .elementor-element.elementor-element-8c674b3{--content-width:1330px;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-811 .elementor-element.elementor-element-90d30e0{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-811 .elementor-element.elementor-element-9af573e{--content-width:1330px;}.elementor-811 .elementor-element.elementor-element-23ea7e5{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-811 .elementor-element.elementor-element-a1385b2{--content-width:1330px;}.elementor-811 .elementor-element.elementor-element-f3e0454 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-c0b323c .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-fea8417 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-f3fdf7b .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-b34a8d1 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-b8bea13 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-52ff2c5 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-85dbf39{--content-width:1330px;}.elementor-811 .elementor-element.elementor-element-e32d9ae .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-2e225b4 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-8f0409e .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-b7bad5e .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-65045a7 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-9006618 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-27f6b43 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-ae38ed2{--content-width:1330px;}.elementor-811 .elementor-element.elementor-element-5790262 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-ef6e6b9 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-2bde3de .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-f9b4361 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-2831e18 .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-4ab8a8d .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-6ebec7f .elementor-heading-title{font-size:var( --e-global-typography-9871c02-font-size );line-height:var( --e-global-typography-9871c02-line-height );}.elementor-811 .elementor-element.elementor-element-215d14f{--content-width:1330px;}.elementor-811 .elementor-element.elementor-element-e0d4de3{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-811 .elementor-element.elementor-element-1678224{width:var( --container-widget-width, 549px );max-width:549px;--container-widget-width:549px;--container-widget-flex-grow:0;}.elementor-811 .elementor-element.elementor-element-fb210c7{--width:1330px;}}/* Start custom CSS for container, class: .elementor-element-43bf78f *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f5db77c *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-419f550 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fc15749 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-36b2bb6 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ef84074 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c755759 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-43bf78f *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f5db77c *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-419f550 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fc15749 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-36b2bb6 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ef84074 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c755759 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-43bf78f *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f5db77c *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-419f550 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fc15749 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-36b2bb6 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ef84074 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c755759 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-43bf78f *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f5db77c *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-419f550 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fc15749 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-36b2bb6 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ef84074 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c755759 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-43bf78f *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f5db77c *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-419f550 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fc15749 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-36b2bb6 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ef84074 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c755759 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-43bf78f *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f5db77c *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-419f550 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fc15749 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-36b2bb6 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ef84074 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c755759 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-43bf78f *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f5db77c *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-419f550 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fc15749 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-36b2bb6 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ef84074 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c755759 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-43bf78f *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f5db77c *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-419f550 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fc15749 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-36b2bb6 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ef84074 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c755759 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-332d229 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0529f23 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-edd1a29 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5a89f8 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-206d2be *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5370b7 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa065e *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-332d229 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0529f23 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-edd1a29 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5a89f8 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-206d2be *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5370b7 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa065e *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-332d229 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0529f23 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-edd1a29 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5a89f8 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-206d2be *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5370b7 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa065e *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-332d229 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0529f23 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-edd1a29 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5a89f8 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-206d2be *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5370b7 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa065e *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-332d229 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0529f23 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-edd1a29 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5a89f8 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-206d2be *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5370b7 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa065e *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-332d229 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0529f23 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-edd1a29 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5a89f8 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-206d2be *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5370b7 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa065e *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-332d229 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0529f23 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-edd1a29 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5a89f8 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-206d2be *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5370b7 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa065e *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-332d229 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0529f23 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-edd1a29 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5a89f8 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-206d2be *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a5370b7 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa065e *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0f5fa1 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b52538e *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f605a6c *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0a6378a *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fe03e30 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ab6ef66 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-76e1651 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0f5fa1 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b52538e *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f605a6c *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0a6378a *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fe03e30 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ab6ef66 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-76e1651 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0f5fa1 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b52538e *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f605a6c *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0a6378a *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fe03e30 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ab6ef66 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-76e1651 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0f5fa1 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b52538e *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f605a6c *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0a6378a *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fe03e30 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ab6ef66 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-76e1651 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0f5fa1 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b52538e *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f605a6c *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0a6378a *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fe03e30 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ab6ef66 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-76e1651 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0f5fa1 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b52538e *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f605a6c *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0a6378a *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fe03e30 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ab6ef66 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-76e1651 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0f5fa1 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b52538e *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f605a6c *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0a6378a *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fe03e30 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ab6ef66 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-76e1651 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0f5fa1 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b52538e *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f605a6c *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0a6378a *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fe03e30 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ab6ef66 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-76e1651 *//* === Card (entire hover area) === */
.card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s ease;      /* little jump */
  will-change: transform;
  cursor: default;


  /* zoom vars */
  --img-scale-base: 1.15;  /* keeps left edge covered */
  --img-scale-hover: 1.50; /* stronger zoom on hover */
}

/* jump on hover */
.card:hover { transform: translateY(-10px); }

/* === Image area (only this gets the gradient) === */
.card-image {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Image: left edge fixed; no translate so no gap */
.card-image img {
  width: 100%;
  height: 360px;                  /* adjust to your design or use aspect-ratio */
  object-fit: cover;
  object-position: left center;
  transform-origin: left center;
  transform: scale(var(--img-scale-base));
  transition: transform .45s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Default gradient: top -> bottom (image only) */
.card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(35, 36, 38, 0.80) 0%,
    rgba(35, 36, 38, 0.60) 40%,
    rgba(96, 110, 180, 0.15) 70%,
    rgba(239, 81, 37, 0.08) 90%,
    rgba(239, 81, 37, 0) 100%
  );
  transition: background 0.4s ease;
  z-index: 1;
  pointer-events: none; /* never block hover */
}

/* Hover: zoom image + switch gradient left -> right */
.card:hover .card-image img {
  transform: scale(var(--img-scale-hover));
}
.card:hover .card-image::after {
  background: linear-gradient(
    to right,
    rgba(53, 54, 55, 0.88) 0%,
    rgba(53, 54, 55, 0.90) 35%,
    rgba(53, 54, 55, 0.60) 70%,
    rgba(53, 54, 55, 0.00) 100%
  );
}

/* === Title & Badge (sit on top of the image) === */
.card-title,
.card-badge {
  position: absolute;
  z-index: 2;      /* above gradient */
  color: #fff;
}
.card-title { top: 24px; left: 24px; line-height: 1.15; }
.card-badge { top: 24px; right: 24px; }

/* === Description text: hidden by default, shows on hover === */
.card-text {
  position: absolute;
  left: 24px; right: 24px; bottom: 24px;
  z-index: 2;      /* above gradient */
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-text {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: responsive image height */
@media (max-width: 1024px) { .card-image img { height: 320px; } }
@media (max-width: 767px)  { .card-image img { height: 280px; } }

/* Optional sub-pixel safety if you ever see a 1px sliver on the left */
/* .card-image img { width: calc(100% + 2px); margin-left: -1px; } */

/* Hide button by default */
.card .meet-us-btn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
}

/* Show button on hover */
.card:hover .meet-us-btn {
  opacity: 1;
  transform: translateY(0);
}

/* The card wrapper must be relative so we can absolutely place the button */
.card { position: relative; }

/* === Button CONTAINER (this has your 'meet-us-btn' class) === */
/* Make the container invisible and position it in the card */
.meet-us-btn{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;

  /* kill any background/border/padding Elementor added on the container */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* hide until card hover */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}

/* Target the actual button inside your meet-us-btn container */
.meet-us-btn .elementor-button {
  border-radius: 4px !important; /* Match badge corners */
  background: #ef5125 !important; /* Default red */
  color: inherit !important; /* Keep your existing text color */
  font-weight: inherit !important; /* Keep your existing weight */
  transition: all 0.4s ease !important;
}

/* Gradient on hover - seamless blend */
.meet-us-btn .elementor-button:hover {
  background: linear-gradient(
    90deg,
    #606eb4 0%,
    #cb4f43 30%,
    #ef5125 60%,
    #f5966d 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: meetGradientShift 3s ease-in-out infinite alternate;
}

/* Smooth moving gradient effect */
@keyframes meetGradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.card:hover .card-badge {
  background: linear-gradient(135deg, #595a5c, #4a4b4d) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1678224 *//* Foreground icon random floating — very slow & big moves */
.fg-icon.float-random {
  position: relative !important;
  animation: floatRandom 28s ease-in-out infinite; /* slower cycle */
  will-change: transform;
}

@keyframes floatRandom {
  0%   { transform: translate(0px, 0px); }
  10%  { transform: translate(22px, -14px); }
  20%  { transform: translate(-18px, 22px); }
  30%  { transform: translate(26px, 12px); }
  40%  { transform: translate(-22px, -14px); }
  50%  { transform: translate(20px, -26px); }
  60%  { transform: translate(-16px, 20px); }
  70%  { transform: translate(24px, 12px); }
  80%  { transform: translate(-18px, -14px); }
  90%  { transform: translate(16px, 20px); }
  100% { transform: translate(0px, 0px); }
}

/* Accessibility: stop if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fg-icon.float-random { animation: none !important; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-05c40fd */.bg-icon-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: inherit;

  /* Soft but present shadow */
  filter:
    drop-shadow(0 14px 24px rgba(0, 0, 0, 0.07))
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.05));
  -webkit-filter:
    drop-shadow(0 14px 24px rgba(0, 0, 0, 0.07))
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.05));
}/* End custom CSS */